Design Tokens - A-raf Design System

A’raf DS uses a 4-layer token architecture:

Layer	Collection	Count	Purpose
Foundation	Primitive values	155	Raw colors, spacing, typography scales
Token	Semantic aliases	103	Light/Dark mode–aware surface, text, border, icon
Component	Per-component	776	Scoped tokens for each component
Theme	Mode variants	28	Standard / Sharp / Soft / Round theme overrides

Foundation — Colors

Brand: Picton Blue

The primary interactive color. Used for buttons, links, focused states, and brand accents.

Token	Value	Swatch
`picton-blue/50`	`#f1f9fe`
`picton-blue/100`	`#e2f3fc`
`picton-blue/200`	`#bee7f9`
`picton-blue/300`	`#84d3f5`
`picton-blue/400`	`#43beed`
`picton-blue/500`	`#1ba8df`
`picton-blue/600`	`#0d85bc`
`picton-blue/700`	`#0c6a98`
`picton-blue/800`	`#0e5a7e`
`picton-blue/900`	`#124b68`
`picton-blue/950`	`#0c3045`

Brand: Polynesian Blue

The secondary brand color. Used for dark sidebars, primary buttons, and high-emphasis surfaces.

Token	Value	Swatch
`polynesian-blue/50`	`#eff7ff`
`polynesian-blue/100`	`#deedff`
`polynesian-blue/200`	`#b6dcff`
`polynesian-blue/300`	`#76c1ff`
`polynesian-blue/400`	`#2da3ff`
`polynesian-blue/500`	`#0287f5`
`polynesian-blue/600`	`#0069d2`
`polynesian-blue/700`	`#0054aa`
`polynesian-blue/800`	`#004990`
`polynesian-blue/900`	`#073b73`
`polynesian-blue/950`	`#04254d`

Neutral

Token	Value	Swatch
`neutral/white`	`#ffffff`
`neutral/50`	`#f9fafb`
`neutral/100`	`#f3f4f6`
`neutral/200`	`#e5e7eb`
`neutral/300`	`#d1d5db`
`neutral/400`	`#9ca3af`
`neutral/500`	`#6b7280`
`neutral/600`	`#4b5563`
`neutral/700`	`#374151`
`neutral/800`	`#1f2937`
`neutral/900`	`#111827`
`neutral/950`	`#030712`
`neutral/black`	`#000000`

Status Colors

Token	Red	Orange	Yellow	Green	Blue	Purple
`/50`	`#fef2f2`	`#fff7ed`	`#fefce8`	`#f0fdf4`	`#eff6ff`	`#faf5ff`
`/300`	`#fca5a5`	`#fdba74`	`#fde047`	`#86efac`	`#93c5fd`	`#d8b4fe`
`/500`	`#ef4444`	`#f97316`	`#eab308`	`#22c55e`	`#3b82f6`	`#a855f7`
`/700`	`#b91c1c`	`#c2410c`	`#a16207`	`#15803d`	`#1d4ed8`	`#7e22ce`
`/900`	`#7f1d1d`	`#7c2d12`	`#713f12`	`#14532d`	`#1e3a8a`	`#581c87`

Foundation — Spacing

All spacing values are in pixels (px).

Token	Value
`spacing/0`	0px
`spacing/0_5`	2px
`spacing/1`	1px
`spacing/1_5`	6px
`spacing/2`	8px
`spacing/2_5`	10px
`spacing/3`	12px
`spacing/3_5`	14px
`spacing/4`	16px
`spacing/5`	20px
`spacing/6`	24px
`spacing/7`	28px
`spacing/8`	32px
`spacing/9`	36px
`spacing/10`	40px
`spacing/11`	44px
`spacing/12`	48px
`spacing/14`	56px
`spacing/16`	64px
`spacing/20`	80px
`spacing/24`	96px

Foundation — Border Radius

Token	Value	Example
`radius/none`	0px	Square
`radius/xs`	2px	Slight rounding
`radius/sm`	4px	Small cards
`radius/md`	6px	Inputs, buttons
`radius/lg`	8px	Cards, modals
`radius/xl`	12px	Large panels
`radius/2xl`	16px	Drawers, sheets
`radius/3xl`	24px	Extra rounded
`radius/full`	9999px	Pills, avatars

Foundation — Typography

Font Families

Token	Value
`font-family/sans`	Plus Jakarta Sans
`font-family/mono`	JetBrains Mono

Font Sizes

Token	Value	Usage
`font-size/xs`	11px	Labels, captions
`font-size/sm`	12px	Helper text, badges
`font-size/base`	14px	Body text (default)
`font-size/md`	16px	Emphasized body
`font-size/lg`	18px	Small headings
`font-size/xl`	20px	Section headings
`font-size/2xl`	24px	Card titles
`font-size/3xl`	30px	Page headings
`font-size/4xl`	36px	Display text
`font-size/5xl`	48px	Hero text

Font Weights

Token	Value
`font-weight/regular`	400
`font-weight/medium`	500
`font-weight/semibold`	600
`font-weight/bold`	700

Line Heights

Token	Value
`line-height/tight`	1.25
`line-height/snug`	1.375
`line-height/normal`	1.5
`line-height/relaxed`	1.625
`line-height/loose`	2.0

Token — Semantic (Light / Dark)

Semantic tokens reference Foundation primitives and automatically adapt to light and dark modes.

Surface

Token	Light	Dark
`surface/default/primary`	`#ffffff`	`#111827`
`surface/default/secondary`	`#f9fafb`	`#1f2937`
`surface/default/tertiary`	`#f3f4f6`	`#374151`
`surface/default/brand`	`#004990`	`#43beed`
`surface/default/inverse`	`#111827`	`#ffffff`
`surface/state/hover`	`#0069d2`	`#2da3ff`
`surface/state/disabled`	`#e5e7eb`	`#374151`
`surface/state/destructive`	`#dc2626`	`#ef4444`
`surface/status/success-subtle`	`#f0fdf4`	`#14532d`
`surface/status/error-subtle`	`#fef2f2`	`#7f1d1d`
`surface/status/warning-subtle`	`#fefce8`	`#7c2d12`
`surface/status/info-subtle`	`#eff6ff`	`#1e3a8a`

Text

Token	Light	Dark
`text/default/primary`	`#111827`	`#f9fafb`
`text/default/secondary`	`#4b5563`	`#9ca3af`
`text/default/tertiary`	`#9ca3af`	`#4b5563`
`text/default/brand`	`#004990`	`#84d3f5`
`text/default/on-brand`	`#ffffff`	`#ffffff`
`text/state/disabled`	`#9ca3af`	`#4b5563`
`text/state/destructive`	`#dc2626`	`#f87171`
`text/status/success`	`#15803d`	`#4ade80`
`text/status/error`	`#dc2626`	`#f87171`
`text/status/warning`	`#a16207`	`#fb923c`
`text/status/info`	`#1d4ed8`	`#60a5fa`

Border

Token	Light	Dark
`border/default/primary`	`#d1d5db`	`#374151`
`border/default/secondary`	`#e5e7eb`	`#1f2937`
`border/default/brand`	`#004990`	`#43beed`
`border/state/focused`	`#004990`	`#43beed`
`border/state/disabled`	`#e5e7eb`	`#374151`
`border/state/destructive`	`#dc2626`	`#ef4444`
`border/status/success`	`#16a34a`	`#22c55e`
`border/status/error`	`#ef4444`	`#ef4444`
`border/status/warning`	`#eab308`	`#fb923c`
`border/status/info`	`#3b82f6`	`#60a5fa`

Icon

Token	Light	Dark
`icon/default/primary`	`#1f2937`	`#e5e7eb`
`icon/default/secondary`	`#6b7280`	`#6b7280`
`icon/default/brand`	`#004990`	`#84d3f5`
`icon/default/on-brand`	`#ffffff`	`#ffffff`
`icon/state/disabled`	`#9ca3af`	`#4b5563`
`icon/state/destructive`	`#dc2626`	`#f87171`
`icon/status/success`	`#16a34a`	`#4ade80`
`icon/status/error`	`#dc2626`	`#f87171`
`icon/status/warning`	`#eab308`	`#fb923c`
`icon/status/info`	`#3b82f6`	`#60a5fa`

Theme — Modes

A’raf DS supports 4 theme modes that adjust the visual personality of components via the Theme token collection.

Mode	Border Radius	Feel
Standard	`radius/md` (6px)	Balanced — default for most apps
Sharp	`radius/none` (0px)	Professional, enterprise, data-heavy
Soft	`radius/xl` (12px)	Friendly, consumer-facing
Round	`radius/full` (9999px)	Playful, modern SaaS

Theme tokens include overrides for: radius/component, radius/badge, radius/container, radius/input, radius/overlay, spacing/component-x, spacing/component-y, font/heading, font/body, shadow/elevation-1/2/3, and border/width-default.

Component Tokens

Each component has its own scoped tokens (776 total) following the pattern:

component/{name}/{slot}/{property}

Example — Input component:

component/input/bg              → surface background
component/input/border          → default border color
component/input/border-focus    → focused ring color
component/input/border-error    → error state border
component/input/text            → input text color
component/input/text-placeholder → placeholder color
component/input/radius          → border radius
component/input/height          → component height

See each component’s documentation page for its full token reference.

​Foundation — Colors

​Brand: Picton Blue

​Brand: Polynesian Blue

​Neutral

​Status Colors

​Foundation — Spacing

​Foundation — Border Radius

​Foundation — Typography

​Token — Semantic (Light / Dark)

​Surface

​Text

​Border

​Icon

​Theme — Modes

​Component Tokens