Inkwell Design System
Tokens, palettes, motion, and patterns for the AI-native screenwriting IDE.
Built on DTCG tokens and oklch color science. Dark-first design with semantic layering that adapts across 5 theme presets and all accessibility modes. Every value is a CSS custom property — consumed by Tailwind v4, CVA variants, and component styles.
Token Architecture
Three tiers that separate raw values from mode-aware semantics from component scope. Each tier builds on the one below.
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/
Mode-aware mappings (:root, .dark, [data-theme]) referencing Tier 1 values. Hand-authored in globals.css for selector control.
packages/ui/src/styles/globals.css
CVA variants and component-level custom properties that consume Tier 2 tokens. Scoped to individual components.
packages/ui/src/components/ui/*.tsx
Explore
Brand Identity
Inkwell's visual identity — hue-tinted tonal foundation, glassmorphism, muted refinement, and the design principles that make Inkwell look and feel like Inkwell.
Colors
Core palettes with semantic mappings, theme presets, and domain-specific color tokens for editor, diff, skill, screenplay, and revision contexts.
Typography
Font families (sans, mono, screenplay), size steps, weights, and industry-standard Courier Prime formatting.
Spacing & Layout
Spacing scale, border radius, shadow elevation, z-index hierarchy, and border widths.
Motion
Duration steps, easing curves including spring, with full prefers-reduced-motion support.
Domain Tokens
Editor surface, diff viewer, skill execution, screenplay elements, and revision draft colors.
Patterns
Surface layering, interaction affordances, information hierarchy, and UI composition best practices.
Accessibility
WCAG 2.2 compliance: reduced-motion, high-contrast, forced-colors, print, and touch targets.
Design System Status
Aesthetic direction is decided — glassmorphic, muted refinement, dark-first, hue-tinted per preset. Token architecture and palette scales are production-quality. Final OKLCH values and typography selections are scaffolding pending ADR 0006 resolution. Components consume tokens (never hardcode values).
docs/research/design-language-direction.md · decisions/0006-design-system.md