Guide
Designing with warm neutrals
How Maple pairs terracotta with stone greys to keep interfaces calm but characterful.
Design system · v1.0
Maple.
A warm, editorial design system for web and mobile. Terracotta on stone in Light, gold on obsidian in Dark.
42 components100 icons141 variables25 text stylesLight + Dark
Live — go on, click things
NewShippedReviewBeta
Something you should knowA short, plain explanation and what to do next.
Two moods, one system
Flip the switch.
Every component reads from semantic tokens, so the whole palette swaps in one move. Try the toggle in the header.
Light
Terracotta on Stone
Warm neutrals with a confident clay accent. Calm, readable, a little bit crafted.
Dark
Gold on Obsidian
Deep ink-blue surfaces with a gilded accent. Same structure, different evening.
Foundations
Built on tokens.
Primitives, semantic colour, a 4px spacing scale, radii, shadows and a 25-style type ramp — straight from the Figma variables.
Typography See the ramp →
Aa Fraunces
DM Sans for everything you read and tap.
JetBrains Mono for code.Icons All 100 →
Components
Pick a piece.
All 42 components from the Figma file, live in code with docs, demos and Storybook stories.
Foundations
One token, two themes
Semantic colour roles resolve to terracotta or gold depending on the mode.
Build
React + Storybook
Every component ships with variants, states and stories you can poke at.
ButtonInputSelectCheckboxToggleBadgeCardAlertToastModalTabsBottom NavigationRadioTextareaForm FieldSliderSegmented ControlNumber InputDate PickerFile UploadChipAvatarAvatar GroupStat CardTableList ItemRatingDividerEmpty StateSpinnerProgressSkeletonBannerTooltipDropdown MenuDrawerAccordionPaginationNavigationSidebarBreadcrumbStepper