Ictinus Design System
A comprehensive token-based design system powering the music industry's most complex interfaces. Built from the ground up with a 4-tier token architecture spanning 291 variables across light and dark themes.
Origin &
Evolution
Ictinus was born from the need to unify a fragmented design language across Orfium's growing product ecosystem. Initially built to serve music copyright professionals, experts navigating dense, data-heavy interfaces for rights management, royalty tracking, and asset monitoring, the system needed to balance information density with clarity.
As Orfium expanded its reach beyond music rights into the broader entertainment industry, Ictinus evolved alongside it. What started as a shared color palette became a fully governed, token-driven system capable of powering diverse product verticals while maintaining a coherent visual language.
Version 5.1.1 represents the culmination of this evolution, a 4-tier token architecture separating raw values from semantic meaning, enabling multi-theme support, cross-platform consistency, and the flexibility to serve both the precision of copyright tools and the expressiveness of entertainment platforms.
Token Architecture
A 4-tier token system that separates raw values from semantic meaning, enabling scalable theming and component-level control.
Global
Raw, immutable values. Color palettes, spacing steps, sizing scale, border primitives.
Dimension
Semantic aliases for spatial values. Maps raw sizing/spacing to purpose-driven names.
Semantic
Context-aware color tokens with Light & Dark mode variants. The theming engine.
Component
Component-specific tokens. Fixed dimensions and aliases tailored to individual UI elements.
Color Foundation
9 color palettes with 10-step ramps, each progressing from lightest tint to deepest shade. These raw values feed into the semantic layer.
Blue
10 stepsPrimary · Brand#E9EFFB#DAE4FB#B8CCFA#8EAAEC#5E8DF8#175BF5#194DCC#173DA0#173382#12204ERed
10 stepsError · Caution#FFEBF1#FFD6E5#FFB2CE#FF80AD#FF4D8D#D4165F#BF1250#831650#601649#33123AOrange
10 stepsWarning#FFF0D1#FFE2A8#FFC95C#F5A300#D67D00#9E4214#8B391D#66301E#4D2A24#29201EPurple
10 stepsUpsell · Visited#F3EBFF#EBDBFF#D8BDFF#BD8FFF#A566FF#7531DE#5F33AC#492A89#38246E#211A47Teal
10 stepsSuccess#DCF9F2#BFF4E7#86EAD1#3CDDB4#1EBE96#107962#11695B#0F514C#104042#0E2834Light Blue
10 stepsFocus · Info#E1F5FE#BEE4FA#81D4FA#4FC3F7#29B6F6#03A9F4#039BE5#0288D1#0277BD#01579BGreen
10 stepsSuccess Alt#EAF5EA#CDE5CB#AED5AB#8FC58A#79B972#64AD5A#5A9E51#4E8C45#427B3B#2D5D28Cool Gray
10 stepsNeutral · Text#F2F4FF#DDE0EE#CACCDB#B6B8CD#A2A5BC#8E91AB#7A7D9B#52567A#262C59#111530White
3 stepsBackground#FFFFFF#F7F7F7#EFEFEFSpacing & Sizing
A predictable, non-linear scale that ensures visual consistency. Spacing values control rhythm between elements, while sizing defines physical dimensions.
Spacing Scale
13 tokens · 0–44px
spacing/00spacing/11spacing/22spacing/34spacing/48spacing/512spacing/616spacing/720spacing/824spacing/932spacing/1036spacing/1140spacing/1244Sizing Scale
23 tokens · 0–140px
sizing/00sizing/14sizing/28sizing/312sizing/416sizing/520sizing/624sizing/728sizing/832sizing/936sizing/1040sizing/1144sizing/1248sizing/1352sizing/1456sizing/1560sizing/1672sizing/1780sizing/1888sizing/1992sizing/20100sizing/21120sizing/22140Border System
Unified border radii and widths that maintain visual cohesion across all components.
Border Radius
borderRadius/12pxborderRadius/24pxborderRadius/38pxborderRadius/416pxborderRadius/536pxborderRadius/648pxborderRadius/79999pxBorder Width
borderWidth/11px, DefaultborderWidth/22px, ActiveborderWidth/34px, FocusedSemantic Colors
Context-aware tokens that automatically adapt between Light and Dark themes. Each semantic token aliases a global color, flipping intelligently per mode.
Background Colors
Text Colors
Border Colors
Indicator Colors
Palette Tokens
Each semantic palette provides muted, base, and contrast tiers for layered UI treatment.
Primary
Error
Warning
Success
Upsell
Primary Alt
Dimension Tokens
The semantic dimension layer maps global primitives to purpose-driven names, bridging raw values to contextual usage.
Icon Sizing
sem/sizing/icon/xs12px→ sizing/3sem/sizing/icon/sm16px→ sizing/4sem/sizing/icon/md20px→ sizing/5sem/sizing/icon/lg24px→ sizing/6sem/sizing/icon/xl36px→ sizing/9Semantic Spacing
sem/spacing/none0px→ spacing/0sem/spacing/2xs2px→ spacing/2sem/spacing/xs4px→ spacing/3sem/spacing/sm8px→ spacing/4sem/spacing/md12px→ spacing/5sem/spacing/lg16px→ spacing/6sem/spacing/xl20px→ spacing/7sem/spacing/2xl24px→ spacing/8sem/spacing/3xl32px→ spacing/9sem/spacing/4xl44px→ spacing/12Semantic Border
sem/borderRadius/sm2px→ borderRadius/1sem/borderRadius/md4px→ borderRadius/2sem/borderRadius/lg8px→ borderRadius/3sem/borderRadius/xl16px→ borderRadius/4sem/borderRadius/circle9999px→ borderRadius/7sem/borderWidth/default1px→ borderWidth/1sem/borderWidth/active2px→ borderWidth/2sem/borderWidth/focused4px→ borderWidth/3Components & Patterns Overview
50+ components organized across 5 Storybook categories, following atomic design principles. Click a category to explore its components.
Navigation
7 components
Inputs
5 components
Data Display
3 components
Feedback
2 components
Surfaces
3 componentsNavigation
Inputs
Button Variants
The button component demonstrates the full power of the token architecture; semantic color tokens mapped to 4 variants across multiple states.
Data Display
Feedback
Surfaces
Music Industry Patterns
Purpose-built components and patterns designed for the unique demands of music copyright management, royalty tracking, and asset monitoring.
Asset Identification
Track-level metadata cards, ISRC displays, and ownership chain visualizations for rights holders to quickly identify and manage their catalog.
Royalty Dashboards
Dense data visualizations for revenue splits, payment timelines, and earnings breakdown across territories and platforms.
Audio Controls
Inline audio players, waveform previews, and playback controls integrated directly into data tables for reference listening during dispute resolution.
Conflict Resolution
Side-by-side comparison views, claim status workflows, and multi-party negotiation interfaces for managing copyright disputes.
Design Principles
The governance model, conventions, and strategies that keep the system coherent, accessible, and scalable across teams.
Token Naming Convention
A strict {tier}/{category}/{property}/{variant} naming schema. Semantic tokens use sem/, component tokens use comp/. Slashes create natural groupings in Figma's variable panel. No abbreviations except established ones (sm, md, lg, xl).
Theming Strategy
Light and Dark modes are achieved purely through semantic token swapping; global raw values never change. Adding a new theme (e.g., High Contrast) requires zero component modifications. Define the mapping, and every component inherits automatically.
Alias Architecture
Every component token aliases a global primitive, never a raw value. This creates a traceable chain: comp/button/normal/size → sizing/9 → 36px. Changing one global value cascades everywhere. No orphaned values, no magic numbers.
Documentation Standard
Each component page follows a fixed structure: Token table, Component anatomy, Description, When to use / When not to use, Properties reference, and Interactive examples. This consistency lowers the learning curve and ensures comprehensive documentation.
Scale Progression
Sizing and spacing use a non-linear 4px-base progression. Values densify at small increments (4, 8, 12, 16) for padding and gaps, then expand at larger values (72, 80, 100, 140) for component dimensions. Tight control where detail matters, generous flexibility at macro scale.
Governance & Review
New tokens require justification via a structured request process. Every addition must fit the existing scale. Component tokens must alias globals; hardcoded values are flagged during reviews. A quarterly audit ensures token hygiene: unused tokens are deprecated, duplicates consolidated.
Accessibility First
Every color combination is validated against WCAG 2.1 AA (4.5:1 for text, 3:1 for large text). Focus states use a dedicated purple token (borderColor/interactive/focused) visible in both themes. Keyboard navigation and screen reader expectations are first-class requirements.
Adoption & Migration
Adoption is driven through enablement rather than enforcement. A Storybook instance provides a living reference. Migration tooling includes lint rules flagging hardcoded values. Training sessions and a shared Slack channel ensure questions are resolved within hours.
Reflection
Building Ictinus taught me that a design system's true power lies not in its components, but in its token architecture. The 4-tier system (Global, Dimension, Semantic, Component) creates a single source of truth that makes theming trivial and consistency automatic.
The most impactful decision was enforcing semantic aliases throughout. When every component references tokens by meaning rather than value, you unlock the ability to reshape an entire product's visual identity by changing a handful of global primitives. That's the promise of design tokens, fully realized.
Version 5.1.1 represents years of iteration, pruning, and governance. The 291 tokens we have today aren't the result of addition; they're the result of relentless subtraction, ensuring every token earns its place in the system.