Inkwell Design System
The visual language for Inkwell \u2014 an AI-native screenwriting IDE. Built on DTCG tokens, oklch color science, dark-first design, and semantic layering that adapts across 5 theme presets and all accessibility modes.
Token Architecture
Tier 1 \u2014 Core Palette
Raw color values, spacing scale, typography, shadows, motion, z-index. Built by Style Dictionary into CSS custom properties and TypeScript constants.
packages/design-tokens/src/tokens/core/
Tier 2 \u2014 Semantic Tokens
Mode-aware mappings (:root, .dark, [data-theme]) that reference Tier 1 values. Hand-authored in globals.css for selector control Style Dictionary cannot provide.
packages/ui/src/styles/globals.css
Tier 3 \u2014 Component Tokens
CVA variants and component-level custom properties that consume Tier 2 tokens. Scoped to individual components.
packages/ui/src/components/ui/*.tsx
Colors
Core palettes with semantic mappings for light and dark modes, theme presets, and domain-specific color tokens for editor, diff, skill, screenplay, and revision contexts.
core/color.tokens.json
Typography
Font families (sans, mono, screenplay), size steps, weights, and screenplay-specific formatting with industry-standard Courier Prime.
core/typography.tokens.json
Spacing & Layout
Spacing scale, border radius values, shadow elevation tiers, semantic z-index hierarchy, and border width options.
core/spacing.tokens.json
Motion
Duration steps from instant (0ms) to slower (500ms), easing curves including spring, with full prefers-reduced-motion support.
core/motion.tokens.json
Domain Tokens
Editor surface, diff viewer, skill execution, screenplay elements, and revision draft colors — all with light, dark, and preset variants.
inkwell/*.tokens.json
Accessibility
WCAG 2.2 compliance: prefers-reduced-motion, prefers-contrast, prefers-reduced-transparency, forced-colors (Windows HCM), print styles, and touch targets.
core/accessibility.tokens.json
Provisional Tokens
The tokens in this design system are scaffolding, not a finished design. A dedicated design research phase is required before these values are final. Components should consume tokens (never hardcode values), but aesthetic judgment calls should not be based on provisional values. See Inkwell_UI_System.md \u00a72.