Introduction
Maple is a warm, editorial design system for web and mobile. Terracotta on stone in Light, gold on obsidian in Dark. Components are built with auto layout in Figma and mirrored here as React components that read from the same tokens.
What's inside
Everything on this site comes from the Maple Figma file.
| Tokens | 141 variables: primitives, semantic colour (Light + Dark), spacing and radius — plus 25 text styles and 7 effect styles. |
| Components | 42 designed in Figma · 42 live in code with docs and Storybook stories. |
| Icons | A 24px, 2px-stroke set that inherits currentColor. |
Using the tokens
All colour is semantic. Set data-theme on any element to switch the palette for that subtree.
import "maple/tokens.css";
import "maple/components.css";
<html data-theme="light"> // or "dark"
.my-panel {
background: var(--color-bg-surface);
color: var(--color-text-primary);
padding: var(--spacing-6);
border-radius: var(--radius-xl);
}Using components
Every component is a plain React component with typed props.
import { Button, Input, Alert } from "maple";
<Input type="search" placeholder="Search…" />
<Button variant="primary" icon="plus">New project</Button>
<Alert type="success" title="Saved">Your changes are live.</Alert>Principles
Warm, not loud
- One primary action per view.
- Let stone neutrals carry most of the surface.
- Use Fraunces for moments, DM Sans for reading.
Meaning beyond colour
- Status always pairs colour with an icon or label.
- Focus is always visible.
- Same structure in Light and Dark.