> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tessera.edstratumlabs.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Tokens

> Colors, typefaces, sizes, and radii, generated from the design tokens file.

Tessera uses one set of design tokens. The screens, the prototype, the component app, and this page all read from the same file, so a token change shows up everywhere.

<Note>
  The palette is warm paper and ink with **one** teal accent. Violet is reserved for AI content. Warning *text* uses `warning-text`; `warning` is for dots, bars, and icons only.
</Note>

## Colors

|                                                                                                                                                                                       | Token            | Value     | Use                                                                                |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | --------- | ---------------------------------------------------------------------------------- |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#F4F1EB', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `paper`          | `#F4F1EB` | Page ground                                                                        |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#FFFFFF', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `surface`        | `#FFFFFF` | Cards, panels                                                                      |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#FAF8F4', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `surface-alt`    | `#FAF8F4` | Rails, headers, footers                                                            |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#EBE6DD', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `surface-sunk`   | `#EBE6DD` | Segmented-control track, code background                                           |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#E3DED4', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `line`           | `#E3DED4` | Borders                                                                            |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#EDE8DF', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `line-soft`      | `#EDE8DF` | Inner dividers                                                                     |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#D5CFC4', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `control-line`   | `#D5CFC4` | Button and input borders                                                           |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#1C1B19', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `ink`            | `#1C1B19` | Primary text                                                                       |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#2A2825', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `ink-2`          | `#2A2825` | Reading text                                                                       |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#3A3833', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `ink-3`          | `#3A3833` | Secondary body text                                                                |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#5F5B54', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `muted`          | `#5F5B54` | Secondary/meta text; 6.3:1 on white                                                |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#0E6B63', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `accent`         | `#0E6B63` | The single brand accent: primary buttons, progress, current item                   |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#0A4F49', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `accent-hover`   | `#0A4F49` |                                                                                    |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#E3F0EE', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `accent-soft`    | `#E3F0EE` | Selected nav, accent tints                                                         |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#5B4BAF', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `ai`             | `#5B4BAF` | AI glyph, attribution, footnote numbers. Never a stripe or a meaning-bearing fill. |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#3F3380', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `ai-strong`      | `#3F3380` | AI label text on tints                                                             |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#EEEBF8', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `ai-soft`        | `#EEEBF8` |                                                                                    |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#F7F5FC', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `ai-softer`      | `#F7F5FC` |                                                                                    |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#2E7D4F', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `success`        | `#2E7D4F` |                                                                                    |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#1F5A37', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `success-text`   | `#1F5A37` |                                                                                    |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#E4F2E8', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `success-soft`   | `#E4F2E8` |                                                                                    |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#9A6A12', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `warning`        | `#9A6A12` | Dots, bars, icons ONLY (4.2:1 on its tint fails as text)                           |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#7A5310', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `warning-text`   | `#7A5310` | Warning text; 6.4:1 on warning-soft                                                |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#FBF1DC', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `warning-soft`   | `#FBF1DC` |                                                                                    |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#B3382C', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `error`          | `#B3382C` |                                                                                    |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#7A2A20', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `error-text`     | `#7A2A20` |                                                                                    |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#FBE7E4', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `error-soft`     | `#FBE7E4` |                                                                                    |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#1F4F9C', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `focus`          | `#1F4F9C` | Focus ring (3px, 2px offset)                                                       |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#F0EDE6', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `surface-bubble` | `#F0EDE6` | Learner chat bubbles, soft dividers                                                |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#ECE8E0', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `track`          | `#ECE8E0` | Progress-bar and meter tracks                                                      |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#E8E3DA', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `ring-track`     | `#E8E3DA` | Weekly time ring track                                                             |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#CFC8BB', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `line-strong`    | `#CFC8BB` | Empty/pending state outlines                                                       |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#C9C2B5', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `line-dashed`    | `#C9C2B5` | Dashed affordances (add block, ⌘K rail button)                                     |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#6F6A62', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `disabled-text`  | `#6F6A62` | Disabled or locked option text; 5.2:1 on white                                     |
| <span style={{display: 'inline-block', width: '1.1em', height: '1.1em', borderRadius: '4px', background: '#D0C8EA', border: '1px solid rgba(0,0,0,.15)', verticalAlign: '-0.2em'}} /> | `ai-line`        | `#D0C8EA` | Borders on AI tints (tutor toggle, chips)                                          |

## Typefaces

| Token   | Stack                                  | Use                                                  |
| ------- | -------------------------------------- | ---------------------------------------------------- |
| `serif` | Fraunces, Georgia, serif               | Titles, lesson reading, and ALL AI text (Marginalia) |
| `sans`  | IBM Plex Sans, system-ui, sans-serif   | All human UI                                         |
| `mono`  | IBM Plex Mono, ui-monospace, monospace | Shortcuts, slash commands, footnote numerals         |

## Sizes

| Token              | Value     | Use                                                  |
| ------------------ | --------- | ---------------------------------------------------- |
| `text-learner`     | 15px      | Comfortable density base                             |
| `text-compact`     | 13.5px    | Instructor/admin base                                |
| `text-reading`     | 19px      | Lesson prose; \~68ch measure; line-height 1.6        |
| `text-ai`          | 15.5px    | Marginalia body                                      |
| `text-label`       | 12px      | Uppercase section labels, letter-spacing .06em       |
| `title-page`       | 26px–34px |                                                      |
| `target-learner`   | 44px      | Minimum touch target on learner surfaces             |
| `target-compact`   | 28px      | Minimum on compact surfaces (WCAG 2.2 floor is 24px) |
| `rail-width`       | 76px      |                                                      |
| `artboard-desktop` | 1440x900  |                                                      |
| `artboard-phone`   | 390x844   |                                                      |

## Radii

| Token  | Value | Use                          |
| ------ | ----- | ---------------------------- |
| `sm`   | 7px   | Small buttons, chips in rows |
| `md`   | 10px  | Buttons, inputs              |
| `lg`   | 14px  | Cards                        |
| `pill` | 999px |                              |

## Density

Learner surfaces use **comfortable** density: a 15px base, 19px lesson reading at about 68 characters per line, and 44px primary buttons. Instructor and admin surfaces use **compact** density: a 13.5px base, 28–36px controls, and denser tables.