×
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

01

Clarity first

Every surface answers one question. If it takes a paragraph to explain, the design is wrong.

02

Confident contrast

Marigold against black is our signature. Hierarchy earned through scale and weight, not color soup.

03

Forward motion

Composition leans right. Numbers count up. Interactions feel inevitable, never apologetic.

04

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.75rem 12px The quick brown fox jumps over the lazy dog
text-sm 0.875rem 14px The quick brown fox jumps over the lazy dog
text-base 1rem 16px The quick brown fox jumps over the lazy dog
text-lg 1.125rem 18px The quick brown fox jumps over the lazy dog
text-xl 1.25rem 20px The quick brown fox jumps over the lazy dog
text-2xl 1.5rem 24px The quick brown fox jumps over the lazy dog
text-3xl 1.875rem 30px The quick brown fox jumps over the lazy dog
text-4xl 2.25rem 36px The quick brown fox jumps over the lazy dog
text-5xl 3rem 48px The quick brown fox jumps over the lazy dog
text-6xl 3.75rem 60px The quick brown fox jumps over the lazy dog
text-7xl 4.5rem 72px The quick brown fox jumps over the lazy dog
§ 05 · Buttons STABLE · v1.0

Action Controls

Primary call-to-action pattern. One per surface, high contrast, brutalist shadow on hover.

FIG. 01 — Button Variants PRIMARY · OUTLINE
Specifications .btn-clickx
Height
60px
Padding
12px 30px
Radius
14px
Border
3px solid
Weight
800 Extrabold
Easing
cubic-bezier(.4,0,.2,1)
Duration
300ms
FIG. 02 — States 4 STATES
Default Apply Now
With icon Apply Now
Disabled
Loading
FIG. 03 — Usage WHEN TO USE
  • 01Primary: one per viewport. The single highest-priority action.
  • 02Outline: secondary actions that accompany a primary (max 1).
  • 03Never stack more than two buttons in a row.
  • 04Use labels with verbs: "Apply Now", not "Click Here".
§ 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

CLX / DS · Version 1.0 Build · 2026.04.18 Maintained · Brand Team → Brand Guidelines