# Design System

## System Shape

This is a light editorial design system inspired by the Myclaude homepage screenshots. It is not a component library yet; it is a set of tokens, page patterns, and reusable components for building the first version consistently.

## Tokens

### Color

```css
--page: #f3eee5;
--paper: #fbfaf6;
--ink: #171717;
--muted: #5f5f5d;
--soft: #d9d7d2;
--green: #174f3b;
--green-2: #3f8a5a;
--blue: #315f96;
--deep-blue: #133080;
--pale-navy: #dfe1f7;
--orange: #c46f3d;
--gold: #d1b06e;
--glass: rgba(255,255,255,.58);
--line: rgba(23,23,23,.10);
--glass-border: rgba(255,255,255,.78);
--hero-border: color-mix(in srgb, var(--pale-navy) 42%, var(--line));
--inset-highlight: inset 0 1px 0 rgba(255,255,255,.76);
--hero-gradient: [multi-stop article hero gradient];
--terminal-red: #df5f5f;
--terminal-yellow: #d8b96c;
--terminal-green: #6fb777;
--table-head: rgba(231,239,224,.62);
--sidebar-active: rgba(222,248,232,.76);
```

### Typography

```css
--font-display: "Manrope", system-ui, sans-serif;
--font-editorial: "Cormorant Garamond", Georgia, serif;
--font-body: "Manrope", system-ui, sans-serif;
--font-mono: "JetBrains Mono", monospace;
```

The system uses three font families:

- Manrope: dominant voice for display, body, navigation, buttons, and cards
- Cormorant Garamond: editorial accent for future field notes, article titles, quotes, and reflective moments
- JetBrains Mono: operational utility font for labels, step numbers, workflow chips, filenames, and prompt names

Practical rule: this is a two-font reading system plus one mono utility. Manrope carries the product/site experience; Cormorant adds blog/editorial texture later.

### Spacing

```css
--page-x: clamp(24px, 5vw, 72px);
--section-y: clamp(96px, 12vw, 160px);
--wide: 1180px;
--reading: 740px;
--type-hero: clamp(4.6rem, 7vw, 7.2rem);
--type-page-title: clamp(3.4rem, 5.8vw, 5.8rem);
--type-section-title: clamp(3.1rem, 5vw, 5.4rem);
--type-card-title: clamp(1.9rem, 3vw, 2.8rem);
--type-body-large: clamp(1.05rem, 1.45vw, 1.2rem);
--type-editorial-title: clamp(2.75rem, 7vw, 4.6rem);
--type-editorial-dek: clamp(1.22rem, 2.1vw, 1.5rem);
```

### Radius

```css
--radius-sm: 10px;
--radius-md: 20px;
--radius-lg: 28px;
--radius-xl: 36px;
--radius-template: 32px;
--radius-pill: 999px;
```

### Shadows

```css
--shadow-soft: 0 18px 45px rgba(35,33,29,.08);
--shadow-float: 0 28px 70px rgba(35,33,29,.13), 0 2px 8px rgba(35,33,29,.06);
--shadow-fan: 0 24px 50px rgba(36,33,29,.18);
--shadow-hero: 0 24px 70px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.72);
```

### Type Scale

Hero headline:

- Manrope
- weight `800`
- `--type-hero`
- line-height `.93`

Subpage title:

- Manrope
- weight `800`
- `--type-page-title`
- line-height `.98`

Homepage section headline:

- Manrope
- weight `800`
- `--type-section-title`
- line-height `.98`

Card title:

- Small cards use `1.08rem`
- Wide editorial cards use `--type-card-title`

Editorial article title:

- Manrope
- weight `800`
- `--type-editorial-title`
- line-height `1.04`

Editorial article body:

- Georgia / Times stack for Medium-style reading pages
- `clamp(1.18rem, 2vw, 1.32rem)`
- line-height `1.72`

## Page Patterns

### Home

- centered hero
- bust/avatar above H1
- large Manrope H1
- italic green emphasis
- short supporting paragraph
- fan cards or visual IA below first fold
- split sections for core workflows

### Subpage

- restrained top nav
- large left-aligned H1
- short body intro
- content cards or editorial article list
- no marketing filler

### Field Note

- narrow reading width
- more Cormorant for editorial texture
- strong intro
- clear takeaway

## Components

### Top Navigation

- simple horizontal links
- transparent or cream background
- uppercase mono/small labels are optional
- avoid heavy nav chrome

### Hero Bust

- small centered image
- square or clean crop
- used only on home/about unless a page has a strong reason

### Fan Cards

- homepage-only navigation moment
- colored cards
- slight rotation
- mono subtitles
- large uppercase labels
- must remain readable on mobile by stacking

### Soft Cards

- white/glass background
- subtle border via inset highlight
- soft shadow
- generous radius
- used for repeated options, not for every section

### Workflow Chain

- mono chips connected with arrows
- communicates operating sequence
- should wrap on mobile

### Doc Strip

- compact links to markdown references
- mono
- light grey pill
- not primary navigation

### Template Hero

- gradient/glass article shell
- big Manrope title with green italic emphasis
- optional visual mark
- metadata pills
- use for guides, articles, field notes, and documentation pages

### Section Nav

- sticky table-of-contents card
- active item uses `--sidebar-active`
- short section labels only

### Terminal Window

- command/file/prompt snippet container
- uses terminal dot tokens
- mono content only

### Data Table

- wrapped in `.data-table-wrap`
- header uses `--table-head`
- for comparisons and references

### Note And Reference Group

- `.note` for callouts
- `.reference-group` for compact link collections

## CSS Organization

Keep a single `styles.css` for now, with these internal sections:

1. Tokens
2. Base
3. Navigation
4. Typography
5. Buttons
6. Hero
7. Layout
8. Cards
9. Workflow Components
10. Documentation Components
11. Template Components
12. Responsive

Split CSS only when the site becomes large enough to justify it.