DesignOS Component Reference

Colors 149

Every token in 1. Colors, Light Mode. Semantic roles only — the 385 tokens in 7. _Primitive are excluded by the primitive gate and must never be referenced directly.

Text 20

--text-primary#0a0a0a

--text-secondary#404040

--text-tertiary#525252

--text-quarternarycorrected#737373

--text-disabled#a3a3a3

--text-errorcorrected#dc2626

--text-error-secondary#f87171

--text-warningcorrected#d97706

--text-warning-secondary#fbbf24

--text-successcorrected#059669

--text-brand#171717

--text-brand-secondary#a3a3a3

--text-alt#ffffff

--text-placeholdercorrected#a3a3a3

--text-placeholder-alt#d4d4d4

--text-success-secondary#34d399

--text-white#ffffff

--text-dark#000000

--text-info#2563eb

--text-info-secondary#60a5fa

Background 33

--bg-primary#ffffff

--bg-primary_hover#f7f7f7

--bg-secondary#f7f7f7

--bg-tertiary#f0f0f0

--bg-quarternary#e5e5e5

--bg-disabled#f7f7f7

--bg-error#fef2f2

--bg-error-secondary#fee2e2

--bg-warning#fffbeb

--bg-warning-secondary#fef3c7

--bg-success#ecfdf5

--bg-brand-primary#f7f7f7

--bg-brand-secondary#f0f0f0

--bg-alt#171717

--bg-error-solid#dc2626

--bg-success-secondary#d1fae5

--bg-success-solid#10b981

--bg-warning-solid#f59e0b

--bg-brand-primary_hover#f0f0f0

--bg-brand-solid#0a0a0a

--bg-primary_press#f0f0f0

--bg-dark#171717

--bg-white#ffffff

--bg-info#eff6ff

--bg-info-secondary#dbeafe

--bg-info-solid#2563eb

--bg-secondary_hover#f0f0f0

--bg-secondary_press#e5e5e5

--bg-brand-hover#262626

--bg-brand-press#404040

--black#000000

--white#ffffff

--bg-brand-primary_press#e5e5e5

Border 17

--border-primary#f0f0f0

--border-secondary#e5e5e5

--border-tertiary#d4d4d4

--border-disabled#f0f0f0

--border-error#dc2626

--border-error-secondary#fecaca

--border-warning#d97706

--border-warning-secondary#fde68a

--border-success#059669

--border-brand#171717

--border-brand-secondary#e5e5e5

--border-success-secondary#a7f3d0

--border-white#ffffff

--border-info#2563eb

--border-info-secondary#bfdbfe

--border-alt#ffffff

--border-alt-2#000000

Icon 19

--icon-primary#171717

--icon-secondary#525252

--icon-tertiary#737373

--icon-disabled#a3a3a3

--icon-error#dc2626

--icon-error-secondary#f87171

--icon-warning#d97706

--icon-warning-secondary#fbbf24

--icon-success#059669

--icon-brand#171717

--icon-brand-secondary#a3a3a3

--icon-success-secondary#34d399

--icon-dark#0a0a0a

--icon-white#ffffff

--icon-alt#ffffff

--icon-info#2563eb

--icon-info-secondary#60a5fa

--icon-quarternary#a3a3a3

--icon-quinary#d4d4d4

Charts 12

--chart-blue#3b82f6

--chart-orange#fb923c

--chart-green#16a34a

--chart-red#dc2626

--chart-purple#a855f7

--chart-yellow#facc15

--chart-pink#ec4899

--chart-dark#525252

--chart-lime#65a30d

--chart-cyan#06b6d4

--chart-success#10b981

--chart-success-light#6ee7b7

Opacity 18

--opacity-light-10#ffffff1a

--opacity-light-20#ffffff33

--opacity-light-30#ffffff4d

--opacity-light-40#ffffff66

--opacity-light-50#ffffff80

--opacity-light-60#ffffff99

--opacity-light-70#ffffffb2

--opacity-light-80#ffffffcc

--opacity-light-90#ffffffe5

--opacity-dark-10#0000001a

--opacity-dark-20#00000033

--opacity-dark-30#0000004d

--opacity-dark-40#00000066

--opacity-dark-50#00000080

--opacity-dark-60#00000099

--opacity-dark-70#000000b2

--opacity-dark-80#000000cc

--opacity-dark-90#000000e5

Alpha 30

--alpha-brand-accent-85#0a0a0ad9

--alpha-brand-accent-10#0a0a0a1a

--alpha-brand-accent-40#0a0a0a66

--alpha-brand-accent-60#0a0a0a99

--alpha-brand-accent-20#0a0a0a33

--alpha-neutral-accent-10#0a0a0a1a

--alpha-neutral-accent-20#0a0a0a33

--alpha-neutral-accent-40#0a0a0a66

--alpha-neutral-accent-60#0a0a0a99

--alpha-neutral-accent-85#0a0a0ad9

--alpha-success-accent-10#0596691a

--alpha-success-accent-20#05966933

--alpha-success-accent-40#05966966

--alpha-success-accent-60#05966999

--alpha-success-accent-85#059669d9

--alpha-warning-accent-10#f59e0b1a

--alpha-warning-accent-20#f59e0b33

--alpha-warning-accent-40#f59e0b66

--alpha-warning-accent-60#f59e0b99

--alpha-warning-accent-85#f59e0bd9

--alpha-blue-accent-10#2563eb1a

--alpha-blue-accent-20#2563eb33

--alpha-blue-accent-40#2563eb66

--alpha-blue-accent-60#2563eb99

--alpha-blue-accent-85#2563ebd9

--alpha-error-accent-10#dc26261a

--alpha-error-accent-20#dc262633

--alpha-error-accent-40#dc262666

--alpha-error-accent-60#dc262699

--alpha-error-accent-85#dc2626d9

Corrections applied to the export

These five depart from the raw export for a documented accessibility reason. The export value and the measurement are kept so the deviation is never silent.

Figma variable	Used	Why
`Text/text-placeholder`	#707070	export #a3a3a3 measures 2.52:1 on bg-primary — fails AA
`Text/text-error`	#d62525	export #dc2626 measures 4.41:1 on bg-error — fails AA
`Text/text-warning`	#a95d05	export #d97706 measures 3.07:1 on bg-warning — fails AA
`Text/text-success`	#04805a	export #059669 measures 3.58:1 on bg-success — fails AA
`Text/text-quarternary`	#6f6f6f	export collapses the fourth text step onto the third

Roles added on top of the export

The export leaves these undefined, and every one covers a need that would otherwise fall back to a raw value.

Token	Value	Why
`--text-on-error-solid`	#ffffff	on-solid content; text-alt flips per mode, bg-error-solid does not
`--text-on-warning-solid`	#0a0a0a	white on bg-warning-solid measures 2.15:1
`--text-on-success-solid`	#0a0a0a	on-solid content for bg-success-solid
`--text-on-info-solid`	#ffffff	on-solid content for bg-info-solid
`--bg-error-solid_hover`	#ef4444	error/500 — the export defines no error hover; brightens on hover so the fill stays unmistakably red
`--bg-error-solid_press`	#b91c1c	error/700 — deepens on press, one step below the resting error/600
`--bg-error_press`	#fecaca	error/200 — press step for the soft error surface, above bg-error-secondary
`--border-control`	#8d8d8d	interactive control boundary; WCAG 1.4.11 needs 3:1
`--border-focus-ring`	#171717	focus treatment named in components §10.3 but untokenised
`--shadow-card`	0 4px 24px rgba(10,10,10,.05)	elevation must arrive through a named token
`--shadow-evidence`	0 24px 60px rgba(10,10,10,.14)	elevation must arrive through a named token
`--ring-offset`	var(--bg-primary)	inner 2px of Ring/*; must match the canvas, not literal white
`--ring-brand`	rgba(10,10,10,0.12)	outer 4px of the exported Ring/brand effect
`--ring-error`	rgba(255,0,0,0.12)	outer 4px of the exported Ring/error effect
`--motion-state`	160ms	no motion tokens in the export; §12 baseline
`--motion-ease`	cubic-bezier(.2,0,0,1)	no motion tokens in the export; §12 baseline
`--line-height-paragraph-md`	1.5	line heights live in the text styles, not the variables
`--line-height-paragraph-sm`	1.4286	line heights live in the text styles, not the variables
`--line-height-caption-md`	1.5	line heights live in the text styles, not the variables

Spacing, radius and widths

2. Spacing & Size 50 · 3. Radius 11 · 4. Widths 12. Components bind to the component theme token, never to a raw radius.

Spacing & size 50

Token	Value	Figma name
`--spacing-0`	0px	UI Spacing/spacing-0
`--spacing-2`	2px	UI Spacing/spacing-2
`--spacing-4`	4px	UI Spacing/spacing-4
`--spacing-6`	6px	UI Spacing/spacing-6
`--spacing-8`	8px	UI Spacing/spacing-8
`--spacing-12`	12px	UI Spacing/spacing-12
`--spacing-16`	16px	UI Spacing/spacing-16
`--spacing-20`	20px	UI Spacing/spacing-20
`--spacing-24`	24px	UI Spacing/spacing-24
`--spacing-32`	32px	UI Spacing/spacing-32
`--spacing-40`	40px	UI Spacing/spacing-40
`--spacing-48`	48px	UI Spacing/spacing-48
`--spacing-56`	56px	UI Spacing/spacing-56
`--spacing-64`	64px	UI Spacing/spacing-64
`--spacing-96`	96px	UI Spacing/spacing-96
`--spacing-128`	128px	UI Spacing/spacing-128
`--spacing-160`	160px	UI Spacing/spacing-160
`--spacing-192`	192px	UI Spacing/spacing-192
`--spacing-224`	224px	UI Spacing/spacing-224
`--spacing-256`	256px	UI Spacing/spacing-256
`--spacing-320`	320px	UI Spacing/spacing-320
`--spacing-384`	384px	UI Spacing/spacing-384
`--spacing-480`	480px	UI Spacing/spacing-480
`--spacing-560`	560px	UI Spacing/spacing-560
`--spacing-640`	640px	UI Spacing/spacing-640
`--spacing-720`	720px	UI Spacing/spacing-720
`--spacing-768`	768px	UI Spacing/spacing-768
`--spacing-960`	960px	UI Spacing/spacing-960
`--spacing-1280`	1280px	UI Spacing/spacing-1280
`--spacing-1440`	1440px	UI Spacing/spacing-1440
`--spacing-1920`	1920px	UI Spacing/spacing-1920
`--screen-size`	1440px	Screen Size/Size
`--padding-padding`	24px	Padding/padding
`--spacing-1024`	1024px	UI Spacing/spacing-1024
`--spacing-80`	80px	UI Spacing/spacing-80
`--spacing-1080`	1080px	UI Spacing/spacing-1080
`--gap-gap`	24px	Gap/gap
`--spacing-72`	72px	UI Spacing/spacing-72
`--font-size-display`	72px	Font Size/display
`--font-size-header-h1`	60px	Font Size/header-h1
`--font-size-header-h2`	48px	Font Size/header-h2
`--font-size-header-h3`	36px	Font Size/header-h3
`--font-size-header-h4`	30px	Font Size/header-h4
`--font-size-header-h5`	24px	Font Size/header-h5
`--font-size-header-h6`	20px	Font Size/header-h6
`--font-size-paragraph-lg`	18px	Font Size/paragraph-lg
`--font-size-paragraph-md`	16px	Font Size/paragraph-md
`--font-size-paragraph-sm`	14px	Font Size/paragraph-sm
`--font-size-caption-md`	12px	Font Size/caption-md
`--font-size-caption-sm`	10px	Font Size/caption-sm

Radius 11

Token	Value	Figma name
`--radius-none`	0px	radius-none
`--radius-xxs`	2px	radius-xxs
`--radius-xs`	4px	radius-xs
`--radius-sm`	6px	radius-sm
`--radius-md`	8px	radius-md
`--radius-lg`	12px	radius-lg
`--radius-xl`	16px	radius-xl
`--radius-2xl`	20px	radius-2xl
`--radius-3xl`	24px	radius-3xl
`--radius-4xl`	32px	radius-4xl
`--radius-full`	100000px	radius-full

Widths 12

Token	Value	Figma name
`--width-xxs`	320px	width-xxs
`--width-xs`	384px	width-xs
`--width-sm`	480px	width-sm
`--width-md`	560px	width-md
`--width-lg`	640px	width-lg
`--width-xl`	768px	width-xl
`--width-2xl`	1024px	width-2xl
`--width-3xl`	1080px	width-3xl
`--width-4xl`	1280px	width-4xl
`--width-5xl`	1440px	width-5xl
`--width-6xl`	1920px	width-6xl
`--width-xxxs`	256px	width-xxxs

Typography

5. Typography 8 tokens. The export stores weights as words and carries no line heights — both are mapped in tokens.css and listed as added roles above.

Token	Value	Figma name
`--family-display`	Inter	Family/display
`--weight-regular`	regular	Weight/regular
`--family-heading`	Inter	Family/heading
`--family-text`	Inter	Family/text
`--family-caption`	Inter	Family/caption
`--weight-bold`	bold	Weight/bold
`--weight-medium`	medium	Weight/medium
`--weight-semibold`	semibold	Weight/semibold

Size ramp

Token	Size	Sample
`--font-size-display`	72px	Ag
`--font-size-header-h1`	60px	Ag
`--font-size-header-h2`	48px	Ag
`--font-size-header-h3`	36px	Ag
`--font-size-header-h4`	30px	Ag
`--font-size-header-h5`	24px	Ag
`--font-size-header-h6`	20px	Ag
`--font-size-paragraph-lg`	18px	Ag
`--font-size-paragraph-md`	16px	Ag
`--font-size-paragraph-sm`	14px	Ag
`--font-size-caption-md`	12px	Ag
`--font-size-caption-sm`	10px	Ag

Component radius themes

6. Themes 8 tokens × 4 modes. Switching the control above swaps the whole set at once.

Component theme	Full	Normal	Sharp	Slightly Rounded
`--button`	100000px	8px	0px	12px
`--modal`	32px	16px	0px	20px
`--modal-inner-container`	20px	12px	0px	16px
`--input`	8px	8px	0px	12px
`--calendar-header`	100000px	12px	0px	16px
`--pagination`	100000px	10px	0px	14px
`--card`	12px	8px	0px	12px
`--nav-item`	12px	8px	0px	8px

Buttons

4 sizes × 5 types × 5 states, plus error and icon-only — 216 variants. Radius binds to --button.

Sizes

sm · 32px

md · 40px

lg · 48px

xl · 56px

Types and states

State	Default	Secondary	Outline	Ghost	Link	Icon only
Default
Hover
Press
Error
Disabled
Loading

Error — hover and press

Figma exposes 🚨 Error=True only at State=Default, so these two rows are derived. Each type steps through its own error surface rather than taking one blanket overlay.

State	Default	Secondary	Outline	Ghost	Link
Default
Hover
Press

Type	Default	Hover	Press
Default solid	`bg-error-solid` 600	`bg-error-solid_hover` 500	`bg-error-solid_press` 700
Secondary	`bg-error` 50	`bg-error-secondary` 100	`bg-error_press` 200
Outline	`bg-primary`	`bg-error` 50	`bg-error_press` 200
Ghost	transparent	`bg-error` 50	`bg-error_press` 200
Link	none	none	none

Why these values. The export defines no error hover or press, so both are added as semantic roles. The solid fill brightens on hover (600 → 500) and deepens on press (600 → 700), which keeps every state unmistakably red. Copying brand's step distance instead would walk error into near-black, because brand sits at the end of its ramp (950) while error sits mid-ramp.

Every state is a named fill — nothing tints, so the label holds full text-on-error-solid and no state layer sits over the content.

Contrast. White on the resting #dc2626 measures 4.9:1 and on the pressed #b91c1c 6.5:1, both clearing AA. The brightened hover #ef4444 measures 3.8:1 — under the 4.5:1 normal-text minimum. It is transient and never the resting state, but if that matters for your compliance target, drop the hover to #dc2626 and shift rest/press one step deeper.

Content colour never changes between default, hover and press. Ghost and Outline resolve to text-brand; Outline's border is border-brand-secondary.

Input field

2 sizes × 13 types × 5 states — 130 variants. Radius binds to --input = 8px in the Full theme, not the button pill. Every field is Label / Field / Hint in a 4px column.

States — `md`

Placeholder

Label

Filled

Label

Focus

Label

Disabled

Label

Error

Label

Hint text goes here

Sizes

md · 40px

Label

lg · 48px

Label

All 13 types

Simple

Icon Leading

Password

Color Input

Payment Input

Tag Input

DesignosDesign Icons

Leading Text

https://

Phone Number

🇬🇭 233

Date Input

Trailing Icon

Number Input

Upload File

Choose file

Currency

GHS

Focus and error both add a ring: 0 0 0 2px canvas offset, then 0 0 0 4px tint. The error ring is exported as literal rgba(255,0,0,.12) — pure red, not bg-error-solid.

Input properties

The component set exposes 19 properties. Three are variant axes; the rest are booleans, instance swaps and text slots that toggle optional parts of the anatomy. Optional parts are authored in the markup and hidden by default, so opting in is a class — nothing re-renders.

Playground

Size State has Label? hide label is Optional is Required Leading Icon Trailing Icon Hint

Label(optional)*

Hint text goes here

All 19 properties

Property	Kind	Values	Default	Maps to
`Size`	variant	md, lg	md	`.dos-field--lg`
`Type`	variant	13 values	Simple	per-type markup
`State`	variant	Placeholder, Focus, Filled, Error, Disabled	Placeholder	`.is-*` on the wrapper
`has Label?`	boolean	True / False	True	`.dos-field--no-label` to hide
`is Optional`	boolean	True / False	False	`.dos-field--optional`
`is Required`	boolean	True / False	False	`.dos-field--required`
`Leading Icon`	boolean	True / False	False	`.dos-field--lead-icon`
`← Icon`	swap	any icon	mail	`.dos-input__icon--lead` glyph
`Trailing Icon`	boolean	True / False	False	`.dos-field--trail-icon`
`Icon →`	swap	any icon	alert-circle	`.dos-input__icon--trail` glyph
`🌍 Country`	swap	any flag	ghana	flag in `.dos-input__addon`
`Country Code`	boolean	True / False	True	`.dos-field--no-country-code` to hide
`Password Icon`	swap	any icon	lock	leading glyph on Password
`View Icon`	swap	any icon	eye	trailing glyph on Password
`Text`	text	free text	https://	`.dos-input__addon` content
`Payment Icons`	swap	card brand	mastercard	trailing brand mark
`Hint`	boolean	True / False	False	`.dos-field--hint`
`Hint Text`	text	free text	Hint text goes here	`.dos-field__hint` content
`Dropdown Icon`	swap	any icon	chevron-down	trailing glyph on select-like types

Hiding the label does not remove it. .dos-field--no-label paired with .sr-only keeps the label in the accessibility tree — a placeholder is not a label, and a field with neither is unusable on a screen reader.

Text area

One size, 5 states. min-height: 72px, content top-aligned. Its resting border is border-secondary, not the border-primary the input field uses — that inconsistency is in the source.

Placeholder

Label

Filled

Label

Focus

Label

Disabled

Label

Error

Label

Hint text goes here

OTP input

6 layouts × 3 states — 18 variants. Cells are 48px squares. Connected shares one outer border; Split is two connected groups with a rule between; Split-Rounded keeps every cell individually rounded.

Layouts

Input-4

OTP Verification

Input-6

OTP Verification

Input-4 Connected

OTP Verification

Input-6 Connected

OTP Verification

Input-6 Split

OTP Verification

Input-6 Split-Rounded

OTP Verification

States

Default

OTP Verification

Filled

OTP Verification

Active

OTP Verification

Badges & chips

2 sizes × 6 types × 3 styles × 6 colors — 216 variants. Radius binds to --button, so chips stay pills alongside the buttons. This is the one component that already ships Color=Info.

Colors × styles, plus every type

Color	Light	Outline	Solid	Leading Icon	Text with Close Button	Avatar	Country
Default	Badge	Badge	Badge	Badge	Badge	Badge	🇬🇭Badge
Brand	Badge	Badge	Badge	Badge	Badge	Badge	🇬🇭Badge
Success	Badge	Badge	Badge	Badge	Badge	Badge	🇬🇭Badge
Warning	Badge	Badge	Badge	Badge	Badge	Badge	🇬🇭Badge
Error	Badge	Badge	Badge	Badge	Badge	Badge	🇬🇭Badge
Info	Badge	Badge	Badge	Badge	Badge	Badge	🇬🇭Badge

Types across all three styles

Text Only

Badge Badge Badge

Leading Icon

Badge Badge Badge

Text with Close Button

Badge Badge Badge

Avatar

Badge Badge Badge

Country

🇬🇭Badge 🇬🇭Badge 🇬🇭Badge

Icon Only

Sizes

Badgesm · 24px

Badgemd · 28px

Alerts & snackbar

3 colors × 2 sizes × 5 states, plus 5 snackbars — 35 variants. Large stacks the message over its actions with a dismiss button pinned top-right; Small is a single 48px row.