01 THE PROBLEM & MOTIVATION
Why we had to
build this.
Canvas is an editorial-first design system architecture and token engine. It unifies Figma tokens, CSS custom properties, and Tailwind CSS v4 `@theme` definitions, delivering accessible, typography-focused interfaces with zero runtime overhead.
The Core Problem:
Most modern design systems look identical, drowning in corporate gray gradients and bloated dependencies. Canvas celebrates thoughtful editorial typography, disciplined spacing, and human readability while maintaining strict WCAG 2.1 AA accessibility.
Who it is built for:
- Product designers building expressive, distinctive brand interfaces
- Frontend engineers wanting rock-solid accessible component primitives
- Open-source teams standardizing multiple web properties under one design language
02 SYSTEM ARCHITECTURE
How the pieces
fit together.
JSON design tokens compile deterministically into Figma variables, Tailwind v4 theme configurations, and TypeScript style contracts.
Token Core
Design token JSON source of truth with semantic alias layering
Compiler
Transforms tokens into Tailwind v4 inline themes and CSS variables
Accessible Primitives
Keyboard-navigable, screen-reader verified React components
Storybook Docs
Interactive component playground and accessibility auditor
03 CORE CAPABILITIES
Designed for
real production.
Automatic Dark/Light Contrast Calibration
APCA-validated color pairs ensure legible contrast ratios across all display brightness modes.
@import "@abeta.dev/react-libs/src/styles/theme.css";
:root { --paper: #f5f3ee; --ink: #171717; }Editorial Typography Hierarchy
Precision typographic scales pairing clean sans-serif bodies with timeless editorial serifs.
Zero-Runtime CSS Footprint
Fully compiled into static utility classes using Tailwind CSS v4 engine.
Lighthouse & Axe clean
Turborepo cached
Radix & Base UI powered
Across 12 countries
04 PUBLIC ROADMAP
What's shipped and
what is next.
Tailwind v4 @theme native compiler
Direct compilation without postcss legacy config.
Fluid Type & Spacing Calculator
Viewport-scaled clamp() tokens with visual curve editor.
Figma Variables Live Sync Plugin
Bi-directional push/pull between code repository and Figma.
05 JOIN THE LAB
Contribute to
Canvas.
Whether you want to file an issue, submit a design example, optimize an edge route, or write documentation, all contributions are welcomed and credited.