Clarity first
Every surface answers one question. If it takes a paragraph to explain, the design is wrong.
CLX / DS Version 1.0 Build 2026.04
Operational
Design
&
Engineering
System
Design tokens, components, and interaction patterns calibrated from the Clickx brand. Everything required to build consistent, accessible product surfaces.
§ 01 · Foundations PRINCIPLES · 04
Design Principles
Confident contrast
Marigold against black is our signature. Hierarchy earned through scale and weight, not color soup.
Forward motion
Composition leans right. Numbers count up. Interactions feel inevitable, never apologetic.
Technical honesty
Specs are visible. Metadata is on the page. Users can see how the machine works.
§ 02 · Tokens SPACING · RADIUS · SHADOW
Design Tokens
Atomic, named values that compose every surface. Never hardcode, always reference.
Spacing Scale Base unit · 0.25rem / 4px
--space-0 0 0px --space-1 0.25rem 4px --space-2 0.5rem 8px --space-3 0.75rem 12px --space-4 1rem 16px --space-6 1.5rem 24px --space-8 2rem 32px --space-12 3rem 48px --space-16 4rem 64px --space-24 6rem 96px Border Radius 07 TOKENS
none
0px
sm
4px
md
8px
lg
14px
xl
20px
2xl
36px
full
FULL
Shadow & Elevation 05 LEVELS
sm
0 1px 2px
md
0 4px 12px
lg
0 12px 32px
brutal
15px 20px 0
glow
0 0 40px
§ 03 · Color SEMANTIC · 14 TOKENS
Semantic Color
Brand palette mapped to functional roles. Reference by intent, not by hue. → Full palette
Group Token Value Purpose Chip
Surface
--bg-primary #000000 App background Surface
--bg-elevated #0F1315 Section surface Surface
--bg-dark #151D21 Card surface Border
--border-subtle #484F53 Default border Border
--border-gold #F8B018 Accent border Text
--text-primary #FFFFFF Primary text Text
--text-secondary #DBDBDB Secondary body Text
--text-muted #9A9A9A Labels · captions Accent
--accent-primary #F8B018 Gold · primary action Accent
--accent-hover #E5A010 Gold · hover state Semantic
--semantic-success #BAD531 Success · green Semantic
--semantic-info #60BBEA Info · blue Semantic
--semantic-warning #FF725C Warning · coral Semantic
--semantic-danger #EF5023 Danger · red § 04 · Typography 02 TYPEFACES · 11 STEPS
Typeface Pair
Montserrat carries the system. Cormorant Garamond punctuates it with a single italic voice. → Type specimen
FIG. 01: Primary BODY · UI · DISPLAY
Aa Gg
Geometric, humanist, forward.
Aa Bb Cc Dd Ee Ff · 0 1 2 3 4 5 6 7 8 9
- Family
- Montserrat
- Designer
- Julieta Ulanovsky
- Class
- Geometric Sans
- Weights
- 300-900 (06)
- License
- OFL 1.1
- Role
- Everything default
FIG. 02: Accent ITALIC · DECORATIVE
Aa &
Transitional warmth & elegant italics.
Aa Bb Cc Dd Ee Ff · & § ¶ 01 23 45
- Family
- Cormorant Garamond
- Designer
- Christian Thalmann
- Class
- Transitional Serif
- Weights
- 400 · 500 Italic
- License
- OFL 1.1
- Role
- Accent words · &
FIG. 03: Scale Steps MONTSERRAT · xs → 7xl
text-xs 0.825rem 13.2px The quick brown fox jumps over the lazy dog text-sm 0.9625rem 15.4px The quick brown fox jumps over the lazy dog text-base 1.1rem 17.6px The quick brown fox jumps over the lazy dog text-lg 1.2375rem 19.8px The quick brown fox jumps over the lazy dog text-xl 1.375rem 22px The quick brown fox jumps over the lazy dog text-2xl 1.65rem 26.4px The quick brown fox jumps over the lazy dog text-3xl 2.0625rem 33px The quick brown fox jumps over the lazy dog text-4xl 2.475rem 39.6px The quick brown fox jumps over the lazy dog text-5xl 3.3rem 52.8px The quick brown fox jumps over the lazy dog text-6xl 4.125rem 66px The quick brown fox jumps over the lazy dog text-7xl 4.95rem 79.2px The quick brown fox jumps over the lazy dog § 06 · Forms BETA · v0.9
Form Controls
Dark-native input family. Gold focus ring, coral error state, 8px corner radius.
FIG. 01: Text Input 5 STATES
→ Please enter a valid email address
FIG. 02: Choice Controls BOX · RADIO · SWITCH
§ 07 · Cards FIG. 01-04
Surface Cards
FIG. 01 .card-dark
Brutalist
Heavy 4px border, 36px radius. Signature card for feature grids.
FIG. 02 border · 1px
Subtle
Hairline 1px border, 16px radius. For technical / spec cards.
FIG. 03 rail · gold
Accented
Left gold rail for callouts, notices, or featured content.
FIG. 04 numeric
MRR Growth
+42%
Q1 2026 · vs. prior
§ 08 · Feedback ALERTS · BADGES · TOASTS
System Feedback
FIG. 01: Alert Banners INFO · SUCCESS · WARNING · DANGER
Info · Notice
System maintenance scheduled for Friday 22:00 UTC.
Success · Confirmed
Your application has been received. Expect a reply within 48 hours.
Warning · Attention
Your trial expires in 3 days. Upgrade to keep your workspace active.
Danger · Error
Payment declined. Please verify your billing information.
FIG. 02: Badges PILL · TAG
Featured Default Active Beta Pending Alert
Online
Offline
FIG. 03: Toast TEMPORARY
Asset downloaded
clickx-logo-fullcolor.svg · 8 KB
§ 10 · Icons BETA · 15 GLYPHS
Icon Set
Inline SVG. 24×24 box, 1.5px stroke, rounded joins and caps. Never filled, never decorative.
Glyph Grid STROKE · 1.5 · ROUNDED
arrow-right
arrow-up-right
chevron-down
check
x
plus
search
menu
mail
external
download
check-circle
alert
info
settings
§ 11 · Motion EASING · DURATION
Motion Tokens
FIG. 01: Easing Curves 05 TOKENS
--ease-linear linear --ease-in cubic-bezier(0.4, 0, 1, 1) --ease-out cubic-bezier(0, 0, 0.2, 1) --ease-in-out cubic-bezier(0.4, 0, 0.2, 1) --ease-spring cubic-bezier(0.2, 1.2, 0.2, 1) FIG. 02: Duration Scale 05 TOKENS
instant 100ms Hover state fast 200ms Micro-interactions base 300ms Default transitions slow 500ms Modal · sheet reveal 800ms Page reveals Feedback Loop
Missing a pattern or found a bug?
The design system is a living document. Propose new components, flag inconsistencies, or request new tokens. Every meaningful suggestion ships.
File a Proposal
design@clickx.io