# Ink — Construction Instructions & AI Prompting Guide
> Version 1.0 · Complete decision framework for building with the Ink system
---
## Table of Contents
1. [Design Philosophy & Core Rules](#1-design-philosophy--core-rules)
2. [The Two-Serif Law](#2-the-two-serif-law)
3. [Color Application Rules](#3-color-application-rules)
4. [Border Radius Decision Framework](#4-border-radius-decision-framework)
5. [Background & Surface Rules](#5-background--surface-rules)
6. [Shadow & Elevation Rules](#6-shadow--elevation-rules)
7. [The Slate Blue Accent — When and How](#7-the-slate-blue-accent--when-and-how)
8. [Typography Application Rules](#8-typography-application-rules)
9. [Spacing Construction Rules](#9-spacing-construction-rules)
10. [Component Construction Guides](#10-component-construction-guides)
11. [Interactive States — Full Decision Guide](#11-interactive-states--full-decision-guide)
12. [Layout Construction Rules](#12-layout-construction-rules)
13. [Animation Rules](#13-animation-rules)
14. [What Never to Do — Anti-Pattern List](#14-what-never-to-do--anti-pattern-list)
15. [AI Prompting Instructions](#15-ai-prompting-instructions)
16. [New Project Checklist](#16-new-project-checklist)
17. [Component Pattern Library](#17-component-pattern-library)
18. [Responsive Construction Rules](#18-responsive-construction-rules)
19. [Accessibility Guidelines](#19-accessibility-guidelines)
20. [Common Scenarios — Decision Trees](#20-common-scenarios--decision-trees)
---
## 1. Design Philosophy & Core Rules
### The Fundamental Premise
The Ink system is built on a single conviction: **darkness can be literary, not just technical.** Most dark-mode systems borrow their visual language from developer tools — sharp corners, neon accents, monospace type. Ink rejects that entirely. It is dark mode for readers: deep near-black backgrounds that evoke ink on night paper, two considered serif typefaces, and a single calm slate-blue accent that never shouts.
This is the aesthetic language of a well-designed night-mode reading app, a literary magazine's dark theme, or a newsroom CMS built by people who care about typography. Every choice — the moderate 6px radius, the desaturated semantic colors, the generous line-height — says: *this product respects your attention and your eyes.*
---
### The 10 Commandments of This System
**1. Two serifs, zero sans-serif.**
Libre Baskerville handles structure (headings, buttons, labels, badges, table headers). Crimson Pro handles reading (body copy, descriptions, italic subheads). There is no sans-serif or monospace font anywhere in this system.
**2. The background is ink, not grey.**
`#111213` is a near-black with the faintest warmth — never a cool slate-grey, never pure `#000000`. This subtle warmth is what separates "editorial dark mode" from "generic dashboard dark mode."
**3. Slate blue is the only accent, and it never shouts.**
`#7c99b8` is deliberately desaturated — a dusty, bookish blue, not an electric brand blue. It should never feel like a UI framework default; it should feel chosen.
**4. Semantic colors are always muted.**
Success is olive-green (`#6aad80`), not lime. Error is dusty rose (`#c08080`), not fire-engine red. Warning is warm ochre (`#b09060`), not traffic-cone orange. This desaturation is a core rule, not a stylistic accident.
**5. Radius is moderate — 6px, never sharp, never a full pill on structural elements.**
Buttons, inputs, and cards all sit at `6px`. This is soft enough to feel considered, restrained enough to stay serious. Only the toggle switch and radio buttons are fully rounded.
**6. Badges always carry a border.**
Unlike Mono or Capsule, Ink's tinted badges include a matching `rgba(color, 0.30)` border in addition to their tinted fill — a small but consistent signature detail that adds definition against the near-black background.
**7. Italic is a first-class typographic tool.**
Crimson Pro's italic is used deliberately for subheads, pull-quotes, and modal descriptions — never as an afterthought. It signals "this is prose, read it," in contrast to the upright Libre Baskerville used for structural UI text.
**8. Shadows are deep, not subtle.**
Because the base background is already near-black, shadows must be unusually strong (`rgba(0,0,0,0.60)`–`rgba(0,0,0,0.80)`) to register as elevation at all. This is the deepest shadow system in the collection.
**9. Focus states combine border and ring.**
Inputs get both a border-color change to slate blue and a soft `rgba(124,153,184,0.12)` focus ring — a more tactile, book-like affordance than Mono's border-only focus.
**10. Motion is unhurried.**
Transitions run at the standard `200ms`, modal entry at `350ms`. Nothing about this system should feel rushed — it is built for readers, not operators watching a live feed.
---
## 2. The Two-Serif Law
Every piece of text belongs to exactly one of two categories. Both are serif; the distinction is structural role, not typeface family contrast.
### Category 1: Structure — Libre Baskerville
**Assignment question: Is this text a heading, button, label, badge, table header, or eyebrow?**
If yes → Libre Baskerville, weight 400 or 700.
- Page title / H1: YES → Libre Baskerville 700
- Modal title: YES → Libre Baskerville 700
- Button text: YES → Libre Baskerville 700
- Field label: YES → Libre Baskerville 700
- Section title (uppercase divider): YES → Libre Baskerville 400
- Badge text: YES → Libre Baskerville 700
- Table header: YES → Libre Baskerville 700
- Article headline (even inside a table row): YES → Libre Baskerville 400
---
### Category 2: Reading — Crimson Pro
**Assignment question: Is this text a paragraph, description, subhead, or anything meant to be read at length?**
If yes → Crimson Pro, often italic for subheads and descriptions.
- Body paragraph: YES → Crimson Pro 400
- Modal description: YES → Crimson Pro 400 italic
- Subhead under a title: YES → Crimson Pro 400 italic, colored slate blue
- Input text / placeholder: YES → Crimson Pro 400
- Table cell (non-title data): YES → Crimson Pro 400
- Dropdown item text: YES → Crimson Pro 400
- Pull-quote: YES → Crimson Pro 400 italic, larger size
---
### Font Decision Flowchart
```
Is it a heading, button, label, badge, or table header? ──YES──► Libre Baskerville
│ NO
▼
Is it a paragraph, description, or subhead meant to be read? ──YES──► Crimson Pro (italic for subheads/descriptions)
│ NO
▼
Default to Crimson Pro
```
---
## 3. Color Application Rules
### 3.1 Background Selection Rules
| Surface | Color | Why |
|---------|-------|-----|
| Page body | `#111213` | The "ink" — deepest, warmest-black layer |
| Cards / panels | `#18191b` | Surface layer, one step up |
| Hover fill / active row | `#1e1f21` | Elevated layer |
| Inputs | `#111213` | Same as page base — inputs are inset, not raised |
| Modal | `#18191b` | Surface level, elevated by the deepest shadow in the collection |
| Pull-quote / inset block | `#0c0d0e` | Sunken — deeper than the page itself |
**Rule:** you have four tonal layers: sunken → base → surface → elevated. Never invent a fifth. Modals share the surface color with cards; their elevation comes from shadow depth, not a lighter fill.
---
### 3.2 Slate Blue Usage Rules
Slate blue is the interactive and editorial-emphasis signal. Use it in exactly these contexts:
1. **Primary button background** — `#7c99b8` fill with `#111213` text
2. **Input focus** — `border-color: #7c99b8` + `box-shadow: 0 0 0 3px rgba(124,153,184,0.12)`
3. **Outline button** — `color: #7c99b8` + `border: 1.5px solid #7c99b8`
4. **Wordmark accent** — the single colored word inside a page title (e.g. "The **Ink** System")
5. **Featured / info badge** — `background: rgba(124,153,184,0.20)` + `color: #7c99b8`
6. **Subhead color** — italic subheads under a title use slate blue to connect them visually to the title's accent word
**Never:**
- Slate blue as a card, page, or modal background fill
- Slate blue for standard body copy text
- A second accent hue introduced alongside slate blue
- Saturated/bright blue substituted for the desaturated `#7c99b8` — the muted quality is the point
---
### 3.3 Text Color Assignment
| Priority | Color | Examples |
|----------|-------|---------|
| Highest — primary content | `#c8ccd0` | Headlines, byline names, strong values |
| High — supporting structure | `#9ca0a6` | Sub-headings, control labels |
| Medium — reading content | `#8a8e95` | Body paragraph copy |
| Low — metadata | `#5a5d62` | Field labels, captions, timestamps |
| Lowest — structural only | `#3d3f42` | Section titles, table dates |
| On accent (slate button) | `#111213` | Dark text on slate-blue button only |
**Rule:** body copy uses the "medium" tier (`#8a8e95`), not the highest tier — reserve `#c8ccd0` for headlines and named values. This restraint is what keeps long articles readable without fatigue.
---
### 3.4 Semantic Color Rules — The Desaturation Law
For success, warning, error, and info states, always use the muted variant, never the saturated one:
- Background: `rgba(color, 0.20)` tinted
- Border: `rgba(color, 0.30)` matching tint — **mandatory in this system**, unlike Mono/Capsule where badge borders are optional
- Text: the desaturated hex value (`#6aad80`, `#b09060`, `#c08080`, `#7c99b8`) — never a bright equivalent
---
## 4. Border Radius Decision Framework
The rule: **6px is the default for nearly everything.** This is neither sharp nor pill-shaped — it is the deliberate middle ground of a system built around considered, unhurried reading.
### Is this element a button, input, or card?
→ `border-radius: 6px` — the system default.
### Is this a modal?
→ `border-radius: 10px` — slightly more generous, since modals are larger, more prominent surfaces.
### Is this a badge or tag?
→ `border-radius: 5px` — marginally tighter than the 6px default, keeping small chips visually crisp.
### Is this a toggle track or radio button?
→ `border-radius: 9999px` — the only fully rounded elements in the system.
### Is this a table cell?
→ `border-radius: 0px` — always flat.
---
### Quick Reference Table
| Element | Radius |
|---------|--------|
| Button (all variants) | 6px |
| Text input / textarea | 6px |
| Select / dropdown trigger | 6px |
| Dropdown panel | `0 0 6px 6px` |
| Badge / tag | 5px |
| Checkbox | 4px |
| Radio | 9999px |
| Toggle track | 9999px |
| Card / surface | 6px |
| Modal | 10px |
| Table container | 6px |
| Table cell | 0px |
---
## 5. Background & Surface Rules
### 5.1 The Dark Layering Model
```
Layer 4 (highest): Modals → #18191b (surface) + deepest shadow
Layer 3: Dropdowns → #18191b (surface) + shadow
Layer 2: Cards, Panels → #18191b (surface)
Layer 1: Hover / Active → #1e1f21 (elevated)
Layer 0 (lowest): Page Background → #111213 (base)
Sunken: Pull-quotes → #0c0d0e
```
**Key insight:** modals and cards share the exact same `#18191b` background. Modals feel elevated purely because of their much stronger shadow (`0 24px 64px rgba(0,0,0,0.80)`) — never because of a lighter fill.
---
### 5.2 Input Background Rule
Inputs share the page base color (`#111213`), the same convention used across the collection's dark systems — inputs recess below the surrounding card, and the focus ring provides the primary affordance change.
---
### 5.3 No Bright or Saturated Surfaces
Nothing in this system is saturated. Even the accent color is desaturated by design. If a color choice feels "vivid" or "punchy," it does not belong in Ink — mute it first.
---
## 6. Shadow & Elevation Rules
### 6.1 The Deep Night Shadow Rule
Shadows in Ink are the strongest in the entire collection because the base background offers so little natural contrast to work with:
```css
rgba(0, 0, 0, [opacity]) /* opacity ranges 0.30–0.80, higher than any other system */
```
### 6.2 Elevation and Shadow Pairing
| What You're Building | Shadow to Use |
|---------------------|---------------|
| Card on page | none — border only |
| Dropdown panel | `--shadow-dropdown` (12px 32px, 60% opacity) |
| Modal / dialog | `--shadow-modal` (24px 64px, 80% opacity) — mandatory, deepest in the collection |
| Input focus | `--shadow-focus` (soft 3px slate-blue ring, 12% opacity) |
| Tooltip | `--shadow-xs` |
### 6.3 Cards Never Get a Shadow
Cards rely exclusively on `border: 1px solid #2c2d2f`. Applying a shadow to a card in this system looks muddy against the already-dark background — reserve shadow entirely for modals, dropdowns, and tooltips that need to visually separate from the page.
---
## 7. The Slate Blue Accent — When and How
### When to Use Slate Blue
| Use It | Don't Use It |
|--------|--------------|
| Primary button background | Card or modal backgrounds |
| Input focus border + ring | Section backgrounds |
| Outline button text/border | Standard body copy |
| Title wordmark accent | Table row fills |
| Featured/info badge | Success/warning/error badges |
| Italic subhead color | Decorative elements |
**Rule:** slate blue marks "this is interactive, active, or editorially featured." Nothing purely decorative should carry it.
### How to Apply Focus
```css
.input:focus {
border-color: #7c99b8;
box-shadow: 0 0 0 3px rgba(124, 153, 184, 0.12);
}
```
Both parts — border and ring — must appear together. This dual signal is more tactile than a border-only focus and fits Ink's "considered" personality.
---
## 8. Typography Application Rules
### 8.1 The Eyebrow → Title → Subtitle Pattern
```
Theme 08 · Ink ← eyebrow, Libre Baskerville 10px, uppercase, tracking 0.14em, #3d3f42
The Ink System ← title, Libre Baskerville 700, clamp(28-52px), #c8ccd0, accent word in #7c99b8
Radius 6px · Libre Baskerville ← subtitle, Crimson Pro italic 16px, #5a5d62
+ Crimson Pro · Deep night
```
This three-tier header pattern, followed by a `border-bottom: 1px solid #2c2d2f` and `padding-bottom: 24px`, is the standard page-header construction for this system.
### 8.2 The Section Title Pattern
```
Typography ← Libre Baskerville 400, 11px, uppercase, #3d3f42, tracking 0.10em
───────────────────────────── ← 1px border-bottom #1e1f21, padding-bottom 8px
← 20–28px gap before first content
[Section content begins]
```
Note the border-bottom here uses the **hairline** border (`#1e1f21`), not the medium border — a subtler divider than the input/card border weight.
### 8.3 Weight as Hierarchy
Because Libre Baskerville only has two usable weights, hierarchy leans on **size, color, and italic/upright contrast** rather than a wide weight range:
| Hierarchy Level | Weight | Style | Color |
|-----------------|--------|-------|-------|
| Hero / Display | 700 | upright | `#c8ccd0` |
| H2/H3 | 400–700 | upright | `#c8ccd0` / `#9ca0a6` |
| Subhead | 400 | italic (Crimson Pro) | `#7c99b8` |
| Body | 400 | upright (Crimson Pro) | `#8a8e95` |
| Label / Badge | 700 | upright (Libre Baskerville) | `#5a5d62` or semantic |
| Section title / Caption | 400 | upright (Libre Baskerville) | `#3d3f42` |
### 8.4 Italic Usage Rules
Use italic (always Crimson Pro) for:
- Subheads directly under a title
- Modal descriptions
- Pull-quotes
- Editorial taglines ("Radius 6px · ... · Deep night")
Never use italic for:
- Buttons, labels, or badges (these are always upright Libre Baskerville)
- Table data
- Form input values
---
## 9. Spacing Construction Rules
### 9.1 The Padding Budget for Components
| Component | Padding |
|-----------|---------|
| Badge | 3px vertical, 9px horizontal |
| Input | 10px vertical, 14px horizontal |
| Button | 10px vertical, 20px horizontal |
| Card | 24px all sides |
| Modal | 32px all sides |
| Table header cell | 10px vertical, 14px horizontal |
| Table body cell | 12px vertical, 14px horizontal |
---
### 9.2 Vertical Rhythm in Forms
```
[Field Label — Libre Baskerville, bold, 11px]
↕ 6px
[Input — #111213 bg, #2c2d2f border, Crimson Pro text]
↕ 16px (between field groups)
[Next Field Label]
```
---
### 9.3 Header Sequence
```
[Eyebrow]
↕ 10px
[Title — Libre Baskerville, accent word in slate blue]
↕ 8px
[Subtitle — Crimson Pro italic]
↕ 24px (padding-bottom on the header block)
[border-bottom: 1px solid #2c2d2f]
↕ 40px (margin-bottom before first section)
[First section]
```
---
## 10. Component Construction Guides
### 10.1 How to Build a Modal — Step by Step
**Step 1: Overlay** — `rgba(0,0,0,0.75)`, no blur required (the deep shadow does the work)
**Step 2: Modal container** — `#18191b` background, `1px solid #2c2d2f` border, `border-radius: 10px`, `padding: 32px`, `max-width: 480px`, `box-shadow: 0 24px 64px rgba(0,0,0,0.80)`
**Step 3: Title** — Libre Baskerville 700, 22px, `#c8ccd0`, margin-bottom `6px`
**Step 4: Description** — Crimson Pro 400 (often italic), 15px, `#5a5d62`, line-height 1.7, margin-bottom `20px`
**Step 5: Input (if applicable)** — same as standard input, margin-bottom `12px`
**Step 6: Button row** — flex, gap `10px`, justify-content `flex-end`. Cancel uses secondary style; confirm uses primary or destructive style.
---
### 10.2 How to Build a Card — Step by Step
**Step 1: Container** — `#18191b` background, `1px solid #2c2d2f` border, `border-radius: 6px`, `padding: 24px`. No shadow.
**Step 2: Section title** — Libre Baskerville 400, 11px, uppercase, `#3d3f42`, tracking `0.10em`, border-bottom `1px solid #1e1f21`, padding-bottom `8px`, margin-bottom `20px`.
**Step 3: Content** — body text Crimson Pro 400, 14–16px, `#8a8e95`. Titles/names within the card use Libre Baskerville, `#c8ccd0`.
---
### 10.3 How to Build a Status/Tag Badge — Step by Step
**Step 1: Shell** — `border-radius: 5px`, `padding: 3px 9px`, `display: inline-flex`, `border: 1px solid` matching tint
**Step 2: Pick the semantic color** — Live/Success → `#6aad80` / Draft/Warning → `#b09060` / Removed/Error → `#c08080` / Featured/Info → `#7c99b8` / Archive/Neutral → `#5a5d62`
**Step 3: Apply the transparency rule** — background `rgba([color],0.20)`, border `rgba([color],0.30)`, text at full desaturated opacity
**Step 4: Typography** — Libre Baskerville 700, 11px, letter-spacing `0.04em`, no uppercase transform required (unlike Mono/Capsule, Ink badges may stay in title case, e.g. "Published", "Draft")
---
### 10.4 How to Build a Data Table — Step by Step
**Step 1: Wrapper** — no forced border-radius on the table itself; it typically lives inside a card that already carries the `6px` radius
**Step 2: Header row** — Libre Baskerville 700, 11px, uppercase, tracking `0.07em`, color `#5a5d62`, border-bottom `1px solid #2c2d2f`
**Step 3: Body rows** — Crimson Pro 400, 14px, color `#8a8e95`, border-bottom `1px solid #1e1f21`
**Step 4: Title columns** — switch to Libre Baskerville 400, 15px, `#c8ccd0` for any cell functioning as an entity name/headline
**Step 5: Hover** — `background: #1e1f21`
---
## 11. Interactive States — Full Decision Guide
### 11.1 Button States
**Primary (slate blue):**
- Default: `background: #7c99b8`, `color: #111213`
- Hover: `background: #9db5cc`
- Active: `transform: scale(0.98)`
- Disabled: `opacity: 0.35`
**Secondary (dark):**
- Default: `background: #1e1f21`, `border: 1.5px solid #2c2d2f`
- Hover: `background: #2c2d2f`
**Outline (slate ghost):**
- Default: `background: transparent`, `border: 1.5px solid #7c99b8`, `color: #7c99b8`
- Hover: `background: rgba(124,153,184,0.10)`
**Destructive (muted red):**
- Default: `background: #8b4040`, `color: #e8d0d0`
- Hover: `background: #a04a4a`
### 11.2 Input Focus
```css
.input:focus {
border-color: #7c99b8;
box-shadow: 0 0 0 3px rgba(124,153,184,0.12);
}
```
### 11.3 Table Row Hover
```css
tr:hover td { background: #1e1f21; }
```
### 11.4 Dropdown Item Hover
```css
.dropdown-item:hover {
background: #1e1f21;
color: #7c99b8;
}
```
---
## 12. Layout Construction Rules
### 12.1 Page Layout Model
```css
.page-content {
max-width: 1200px;
margin: 0 auto;
padding: 40px 24px;
}
```
### 12.2 Dashboard Grid Pattern
```css
.layout-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.layout-wide-narrow { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
```
### 12.3 Page Header Layout
```css
.page-header {
margin-bottom: 40px;
padding-bottom: 24px;
border-bottom: 1px solid var(--color-border-medium);
}
```
Unlike Capsule's horizontal flex header (title left, badges right), Ink's header is a **vertical stack** — eyebrow, title, subtitle — closer to a magazine masthead than a dashboard toolbar.
---
## 13. Animation Rules
### 13.1 What Can Animate
| Element | Property | Duration | Easing |
|---------|----------|----------|--------|
| Button hover | `background` | 200ms | ease-out |
| Button press | `transform: scale(0.98)` | 100ms | linear |
| Input focus | `border-color`, `box-shadow` | 200ms | ease-out |
| Toggle thumb | `transform` | 200ms | ease-out |
| Dropdown open | `opacity` | 150ms | ease-out |
| Modal entry | `opacity`, `transform` | 350ms | ease-standard |
### 13.2 What Should Not Animate
- Card appearance on load
- Section title opacity
- Badge color changes (instant only)
- Table row reordering
---
## 14. What Never to Do — Anti-Pattern List
### Typography Anti-Patterns
| ❌ Never | ✅ Instead |
|---------|----------|
| Use a sans-serif or monospace font anywhere | This system is two serifs only: Libre Baskerville + Crimson Pro |
| Use Crimson Pro for buttons or labels | Structure text is always Libre Baskerville |
| Use Libre Baskerville for long body paragraphs | Reading text is always Crimson Pro |
| Skip the italic on subheads/descriptions | Italic is a required signal for reading-tier text |
### Color Anti-Patterns
| ❌ Never | ✅ Instead |
|---------|----------|
| Use saturated/bright semantic colors | All semantic colors are muted/desaturated |
| Use a bright, saturated blue for the accent | Slate blue (`#7c99b8`) is deliberately dusty |
| Use solid-fill badges without a border | Badges always carry a matching `rgba` border |
| Use pure black (`#000000`) for the background | Background is `#111213` — near-black with warmth |
### Border Radius Anti-Patterns
| ❌ Never | ✅ Instead |
|---------|----------|
| Use `border-radius: 9999px` on buttons | Buttons are `6px` |
| Use `0px` sharp corners on cards or modals | Cards are `6px`, modals are `10px` |
| Make the toggle track square | Toggle track is always fully rounded (`9999px`) |
### Structural Anti-Patterns
| ❌ Never | ✅ Instead |
|---------|----------|
| Add a shadow to a flat card | Cards use border only, never a shadow |
| Use a weak modal shadow | Modal shadow must be `0 24px 64px rgba(0,0,0,0.80)` — the deepest in the collection |
| Use a border-only input focus (no ring) | Always pair border-color change with the soft focus ring |
| Rush transitions below 150ms | Standard duration is 200ms; nothing in this system should feel abrupt |
---
## 15. AI Prompting Instructions
**System prompt to include:**
> Build this UI using the Ink design system.
>
> Core rules:
> — Dark mode only. Background: `#111213` (near-black, warm, not pure black). Cards/panels: `#18191b`. Hover fills: `#1e1f21`.
> — Border-radius: `6px` for buttons, inputs, and cards. `10px` for modals. `5px` for badges. Only toggles and radios are fully rounded (`9999px`).
> — Primary accent: `#7c99b8` (desaturated slate blue). Use for: primary button fill, input focus border + ring, outline button, title accent words, featured badges.
> — Fonts: Libre Baskerville for all structure (headings, buttons, labels, badges, table headers). Crimson Pro for all reading content (body, descriptions, subheads) — subheads and descriptions are often italic.
> — Semantic colors are always muted/desaturated: success `#6aad80`, warning `#b09060`, error `#c08080`, info `#7c99b8`. Every badge uses `rgba(color, 0.20)` background + `rgba(color, 0.30)` border + full-opacity text.
> — Shadows are deep: modal shadow is `0 24px 64px rgba(0,0,0,0.80)`. Cards use border only, never a shadow.
> — Input focus combines a border-color change AND a soft `0 0 0 3px rgba(124,153,184,0.12)` ring.
> — Text hierarchy: `#c8ccd0` (primary) → `#9ca0a6` (secondary) → `#8a8e95` (body) → `#5a5d62` (labels/metadata) → `#3d3f42` (section titles).
---
## 16. New Project Checklist
**Fonts:**
- [ ] Libre Baskerville imported (weights 400, 700)
- [ ] Crimson Pro imported (weight 400, italic)
- [ ] `font-family: 'Crimson Pro', serif` set as base `body` font
**Colors:**
- [ ] `--color-bg-base: #111213` on root/container
- [ ] `--color-bg-surface: #18191b` for cards
- [ ] `--color-slate-400: #7c99b8` as primary accent
**Radius:**
- [ ] Buttons, inputs, cards at `border-radius: 6px`
- [ ] Modals at `border-radius: 10px`
- [ ] Badges at `border-radius: 5px`
- [ ] Toggle track and radios at `9999px`
**Shadows:**
- [ ] Cards use border only, no shadow
- [ ] Modal shadow is `0 24px 64px rgba(0,0,0,0.80)`
- [ ] Input focus has both border-color change and soft ring
**Structure:**
- [ ] No sans-serif or monospace font anywhere
- [ ] All semantic colors are the muted/desaturated variants
- [ ] Badges always include a matching tinted border
---
## 17. Component Pattern Library
### Pattern: Page Header (Masthead)
```html
Theme 08 · Ink
The Ink System
Radius 6px · Libre Baskerville + Crimson Pro · Deep night
```
### Pattern: Article Row
```html
The Architecture of Silence
Live
12,400
22 May
```
### Pattern: Confirm Modal
```html
Publish Article
Confirm dispatch to all print and digital subscribers.
```
---
## 18. Responsive Construction Rules
**Below 480px:**
- Modal padding reduces from 32px to 20px
- Two-column layouts collapse to single column
- Table scrolls horizontally within its card container
- Hero title reduces from 52px to ~30px via clamp()
**480px–1023px:**
- Two-column layouts remain where space allows, else collapse to single column
- Card padding reduces from 24px to 18px
**1024px+:**
- Full system at designed specifications
- 2fr + 1fr layouts enabled
---
## 19. Accessibility Guidelines
### 19.1 Color Contrast Requirements
| Pairing | Contrast | WCAG Level |
|---------|----------|-----------|
| `#c8ccd0` on `#111213` | 13.1:1 | AAA ✓ |
| `#9ca0a6` on `#111213` | 8.6:1 | AAA ✓ |
| `#8a8e95` on `#111213` | 7.4:1 | AAA ✓ |
| `#7c99b8` on `#111213` | 6.1:1 | AA ✓ |
| `#111213` on `#7c99b8` | 6.1:1 | AA ✓ |
| `#5a5d62` on `#111213` | 3.9:1 | AA (large text only) |
| `#3d3f42` on `#111213` | 2.2:1 | ✗ Structural/decorative only |
**Rules:**
- `--color-text-faint` (`#3d3f42`) is acceptable only for section titles and secondary table metadata — never for content the user must read to complete a task.
- `--color-text-muted` (`#5a5d62`) is acceptable for labels and captions but should not carry critical instructions.
### 19.2 Focus Management
- All interactive elements need a visible `:focus-visible` state: `outline: 2px solid #7c99b8; outline-offset: 2px;`
- Input focus uses the combined border + ring signal — never remove either half
- Modal opening must trap focus within the modal; closing returns focus to the trigger
---
## 20. Common Scenarios — Decision Trees
### Scenario: "Which font do I use?"
```
Is it a heading, button, label, badge, or table header? ──YES──► Libre Baskerville
│ NO
▼
Is it body copy, a description, or a subhead? ──YES──► Crimson Pro (italic if subhead/description)
│ NO
▼
Default: Crimson Pro
```
### Scenario: "Should this text be italic?"
```
Is it a subhead directly under a title? ──YES──► Italic, Crimson Pro, slate blue
│ NO
▼
Is it a modal description or pull-quote? ──YES──► Italic, Crimson Pro
│ NO
▼
Is it a button, label, or badge? ──YES──► Never italic — always upright Libre Baskerville
│ NO
▼
Default: upright
```
### Scenario: "Which shadow level should I use?"
```
Is the element a modal or dialog? ──YES──► 0 24px 64px rgba(0,0,0,0.80) — mandatory
Is the element a dropdown panel? ──YES──► 0 12px 32px rgba(0,0,0,0.60)
Is the element a flat card? ──YES──► No shadow — border only
Is the element a tooltip? ──YES──► 0 2px 8px rgba(0,0,0,0.30)
```
### Scenario: "Should this badge have a border?"
```
Is this the Ink system? ──YES──► Always add a matching rgba(color, 0.30) border. No exceptions.
```
---
*End of Instructions — Ink v1.0*
*Design System Document: ink-design-system.md*
*Instructions Document: ink-instructions.md*