> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.

# Design Tokens

> 1,062 design tokens across 4 collections: Foundation, Token (semantic), Component, and Theme.

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` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#f1f9fe',border:'1px solid #e2e8f0'}} /> |
| `picton-blue/100` | `#e2f3fc` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#e2f3fc',border:'1px solid #e2e8f0'}} /> |
| `picton-blue/200` | `#bee7f9` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#bee7f9'}} />                            |
| `picton-blue/300` | `#84d3f5` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#84d3f5'}} />                            |
| `picton-blue/400` | `#43beed` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#43beed'}} />                            |
| `picton-blue/500` | `#1ba8df` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#1ba8df'}} />                            |
| `picton-blue/600` | `#0d85bc` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#0d85bc'}} />                            |
| `picton-blue/700` | `#0c6a98` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#0c6a98'}} />                            |
| `picton-blue/800` | `#0e5a7e` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#0e5a7e'}} />                            |
| `picton-blue/900` | `#124b68` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#124b68'}} />                            |
| `picton-blue/950` | `#0c3045` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#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` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#eff7ff',border:'1px solid #e2e8f0'}} /> |
| `polynesian-blue/100` | `#deedff` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#deedff',border:'1px solid #e2e8f0'}} /> |
| `polynesian-blue/200` | `#b6dcff` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#b6dcff'}} />                            |
| `polynesian-blue/300` | `#76c1ff` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#76c1ff'}} />                            |
| `polynesian-blue/400` | `#2da3ff` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#2da3ff'}} />                            |
| `polynesian-blue/500` | `#0287f5` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#0287f5'}} />                            |
| `polynesian-blue/600` | `#0069d2` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#0069d2'}} />                            |
| `polynesian-blue/700` | `#0054aa` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#0054aa'}} />                            |
| `polynesian-blue/800` | `#004990` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#004990'}} />                            |
| `polynesian-blue/900` | `#073b73` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#073b73'}} />                            |
| `polynesian-blue/950` | `#04254d` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#04254d'}} />                            |

### Neutral

| Token           | Value     | Swatch                                                                                                                      |
| --------------- | --------- | --------------------------------------------------------------------------------------------------------------------------- |
| `neutral/white` | `#ffffff` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#ffffff',border:'1px solid #e2e8f0'}} /> |
| `neutral/50`    | `#f9fafb` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#f9fafb',border:'1px solid #e2e8f0'}} /> |
| `neutral/100`   | `#f3f4f6` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#f3f4f6',border:'1px solid #e2e8f0'}} /> |
| `neutral/200`   | `#e5e7eb` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#e5e7eb'}} />                            |
| `neutral/300`   | `#d1d5db` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#d1d5db'}} />                            |
| `neutral/400`   | `#9ca3af` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#9ca3af'}} />                            |
| `neutral/500`   | `#6b7280` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#6b7280'}} />                            |
| `neutral/600`   | `#4b5563` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#4b5563'}} />                            |
| `neutral/700`   | `#374151` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#374151'}} />                            |
| `neutral/800`   | `#1f2937` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#1f2937'}} />                            |
| `neutral/900`   | `#111827` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#111827'}} />                            |
| `neutral/950`   | `#030712` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#030712'}} />                            |
| `neutral/black` | `#000000` | <span style={{display:'inline-block',width:40,height:16,borderRadius:3,background:'#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.