<!-- MIT licensed. Copyright and license: https://opendesignmd.com/licenses/ -->

# How assistant-ui.com is designed

## Overview

assistant-ui.com presents a predominantly dark surface treatment in the captured pages. The system is anchored by `#000000`, `#fafafa`, and `#cdd6f4`, with typography led by **Geist** and **System**. The guide below names reusable design roles only where the captured evidence supports them.

The reference set uses representative captured pages. It is a design reference, not a claim about the site's private source code or a complete responsive specification.

## Design tokens

The token names are practical labels for the recorded values. They are not claims about the source site's variable names.

### Colors

| token | value | observed use |
| --- | --- | --- |
| color.surface | `#000000` | surface on page content |
| color.text | `#fafafa` | text on page content |
| color.text | `#cdd6f4` | text on page content |
| color.surface | `#262626` | surface on page content in the nav |
| color.surface | `#2b7fff` | surface on page content |
| color.text | `#a1a1a1` | text on page content in the nav |
| color.text | `#94e2d5` | text on page content |
| color.text | `#f5c2e7` | text on page content |
| color.text | `#a6e3a1` | text on page content |
| color.text | `#f9e2af` | text on page content |
| color.text | `#cba6f7` | text on page content |

### Typography

| token | font family | size | weight | line height | letter spacing | observed use |
| --- | --- | --- | --- | --- | --- | --- |
| type.body-16px | **Geist** | 16px | 400 | 24px | normal | `<div>`, `<div>` in the header, `<ul>`, `<a>`, and `<button>` in the button |
| type.body-14px | **Geist** | 14px | 400 | 23.8px | normal | `<div>`, `<p>`, and `<li>` |
| type.body-14px | **Geist** | 14px | 400 | 20px | normal | `<a>` in the nav, `<div>` in the aside, `<div>` in the nav, `<a>` in the aside, `<div>`, and `<p>` |
| type.utility-13px | **System** | 13px | 400 | 21.45px | normal | `<span>` |
| type.utility-13px | **Geist** | 13px | 400 | 17.875px | normal | `<a>` |
| type.body-16px | **Geist** | 16px | 500 | 24px | -0.16px | `<a>` and `<h3>` |
| type.utility-13px | **Geist** | 13px | 400 | 21.45px | normal | `<div>` |
| type.body-14px | **Geist** | 14px | 400 | 22.75px | normal | `<p>` |
| type.body-20px | **Geist** | 20px | 500 | 28px | -0.4px | `<a>` and `<h2>` |
| type.utility-12px | **Geist** | 12px | 400 | 16px | normal | `<p>` and `<a>` |
| type.utility-12px | **System** | 12px | 500 | 17.1429px | normal | `<code>` |
| type.body-14px | **Geist** | 14px | 500 | 20px | normal | `<a>` in the aside |
| type.utility-11.5px | **Geist** | 11.5px | 500 | 16.4286px | normal | `<a>` in the nav |
| type.utility-12px | **Geist** | 12px | 400 | 19.5px | normal | `<p>` |
| type.utility-11px | **Geist** | 11px | 400 | 15.125px | normal | `<span>` in the nav |
| type.body-14px | **Geist** | 14px | 500 | 23.8px | normal | `<a>` |
| type.utility-13px | **Geist** | 13px | 600 | 16.25px | -0.13px | `<span>` in the nav |

### Spacing

| value | property | observed element |
| --- | --- | --- |
| `0px 14px 0px 42px` | padding | page content |
| `6px 10px 6px 8px` | padding | page content |
| `0px 16px` | padding | page content |
| `8px 16px` | padding | page content |
| `12px 16px` | padding | page content |
| `8px 12px` | padding | page content |
| `4px 0px 4px 12px` | padding | page content |
| `4px 0px` | margin | page content |

### Shape and depth

The captured pages use `0px none 6px`, `0px none 10px`, `0px none 8px`, `1px solid 10px`, and `0px none 14px` border treatments.

## Colors

The visual system is predominantly dark surface treatment. Surface colors include `#000000`, `#262626`, and `#2b7fff`. Text colors include `#fafafa`, `#cdd6f4`, and `#a1a1a1`. Keep image-derived colors separate from interface colors.

## Typography

The captured type system uses **Geist** and **System**. The table records measured size, weight, leading, and tracking where available; it does not establish licensing or a complete fallback stack.

## Layout

The captured pages use values such as `0px 14px 0px 42px`, `6px 10px 6px 8px`, `0px 16px`, `8px 16px`, and `12px 16px` for padding and margin. These are measured usages, not a resolved scale. The available evidence does not establish container widths, grid rules, or breakpoints.

## Visual language

The captured visual language is predominantly dark surface treatment. Surface treatment centers on `#000000`, `#262626`, and `#2b7fff`. No structured gradient or shadow treatment is established.

## Components and states

The captured pages include repeated styling on `<div>`, `<a>`, `<span>`, `<p>`, `<li>`, `<h3>`, `<h2>`, and `<ul>` elements. The evidence does not identify reusable component boundaries or interaction states. Treat loading, focus, hover, pressed, error, and disabled states as implementation work to validate rather than as captured facts.

## Responsive behavior

The captured token set does not establish breakpoint values or mobile behavior. Validate stacking, navigation changes, image treatment, and type scaling against the representative captures before implementing a responsive adaptation.

## Practical implementation guidance

- Preserve the dark surface relationship and the measured type hierarchy before adding decorative treatment.
- Start from the returned typography, spacing, color, and border values; name any new scale or semantic role as an adaptation rather than as a source fact.
- Keep the captured font families separate from licensing decisions.
- Use screenshots to validate component anatomy, responsive behavior, focus treatment, and motion before shipping.
- Avoid introducing gradients or shadows beyond the captured treatment; none are established.

## Scope note

The guide uses representative captured pages. The evidence supports the values and observations above; it does not establish component semantics, interaction states, motion timing, breakpoint rules, font licensing, or a complete source stylesheet.