Moss

v2 · published

A workshop on warm paper - one moss green for the action, a serif that speaks with an italic.

warmcraftedcalmeditorial

Built from the Lumen Bikes pages: a small workshop that sells electric bicycles and runs its week from an internal dashboard. Paper is the ground and ink is the text, warm on both ends instead of white and black. One moss green carries every action, so a button is never in doubt; clay marks what is late or needs care, and never asks to be clicked; honey titles the dark footer. Fraunces speaks in the headlines, with an italic for the one phrase that matters, and Inter does the work - tables, numbers and forms, with figures that line up. The same system has to hold a page that sells and a screen that runs the shop.

Fork it into your own →Open the playground →

Use in your project

Pull this design system into any project - it follows the system's tokens, recipes and rules. Run the commands yourself, or let your coding agent set it up and build.

Make Moss yours

Give it a name and it becomes a system in your account - with your dashboard, the checks your agent sends, and Autopilot. Then two commands bring it into your project.

Make Moss yours →

Or pull the gallery version as it is, without an account:

1 · Brings the system in

npx synthesisui@latest init --styles tailwind --ds moss

2 · Turns the check and the tools on

npx synthesisui@latest connect

2 · Turn the check and the tools on

npx synthesisui@latest connect

Ask your agent

Use the "Moss" design system (slug: moss) to: build the UI I describe next

First make sure it's installed: run `npx synthesisui add moss` if `_synthesisui/ds/moss/` isn't in the project yet.

Read these files first (highest authority first):
- _synthesisui/ds/moss/rules.md - project rules for this system (if present); obey them above everything else
- _synthesisui/ds/moss/philosophy.md - the mission, voice and principles (if present); let it shape every screen
- _synthesisui/ds/moss/v2/GUIDE.md - how to apply the system, the recipes and the token vocabulary

Follow this contract (target framework: next):
- First check whether this refers to UI that already exists in the project. If it does, modify only what's needed and keep the rest intact and on-system. If it doesn't, build it new.
- Scope the markup with `data-ds="moss"` (or rely on it at the app root).
- Style with the design system only: reuse the `.ds-*` recipe classes and the DS-backed Tailwind utilities (`bg-primary`, `text-foreground`, `p-md`, `rounded-lg`, `font-display`…). Never use raw hex/px outside the system's scale.
- Make sure `tokens.css` + `theme.css` are imported in the global CSS (see the GUIDE's "How to apply").
- Implement the behavior yourself (open/close, focus, routing) - the system ships the looks, not the JS.

Composition (make it look composed, not just correct):
- Cap page content with a max-width container and center it - this DS ships `max-w-app` for dashboards/wide UI and `max-w-prose` for text columns. Don't stretch content edge-to-edge.
- Give the page a complete, intentional layout: clear vertical rhythm, sensible density and grouped sections. Never leave a single thin row floating on an empty screen.

Deliver senior-level, production-quality code: clean structure, accessible (ARIA + keyboard), and responsive.

Paste into Claude Code, Cursor or any coding agent. From your project you can also run npx synthesisui use moss "…".

Dependencies

What to install or load so the system renders at full fidelity - it ships token names and recipes, not the assets.

Web fonts - Fraunces, Inter, JetBrains Mono
The system ships token names, not the fonts. Load them (Google Fonts, next/font or Fontsource) or type falls back to a generic family and loses the system's identity.
Icons - Lucidenpm i lucide-react
Components reference Lucide icon names. Install it (or swap in your own icon set) to render them.

Color

Primitives and roles.

Named scales forged by the synthesis; semantic roles only ever point at them.

color.sky

375#8ebee6

400#4a97d6

500#3d8fd4

700#2874b4

color.clay

100#f8e4d8

300#eba98a

400#b25a33

500#93431f

700#93431f

color.moss

50#eef5f1

100#d5e7dd

200#96c2ac

300#7fb59a

400#4f9475

500#2f7a5a

600#1e6a4f

700#1b4d3a

color.sand

50#fffdf9

100#f7f3ec

200#efe9df

300#e9e2d6

400#e4dccf

500#8f8273

600#6b6157

700#4a4138

800#2a241d

900#1a1612

color.veil

500#1a1612b3

color.honey

300#f6dfb0

400#ecc77f

500#e3b062

700#8a5a12

color.semantic - resolved live via CSS variables

info

{color.sky.700}

faint

{color.sand.500}

muted

{color.sand.600}

scrim

{color.veil.500}

accent

{color.honey.700}

border

{color.sand.400}

canvas

{color.sand.100}

danger

{color.clay.500}

raised

{color.sand.50}

overlay

{color.sand.200}

primary

{color.moss.600}

success

{color.moss.700}

surface

{color.sand.50}

warning

{color.honey.700}

foreground

{color.sand.800}

color.series - categorical data-viz palette (bg-series-*)

series-1

series-2

series-3

series-4

series-5

series-6

series-7

series-8

Foundations

Shape & depth.

Corner radius, spacing rhythm and elevation - the physical feel of the system.

radius

full

spacing

3xs0.25rem

2xs0.5rem

xs0.75rem

sm1rem

md1.5rem

lg2rem

xl3rem

2xl4rem

3xl6rem

shadow

focus

Typography

The voice of the system.

Display: Fraunces · Body: Inter · Mono: JetBrains Mono

xsDesign, set free0.75rem / 1rem

smDesign, set free0.875rem / 1.43

baseDesign, set free1rem / 1.5

lgDesign, set free1.25rem / 1.4

xlDesign, set free1.375rem / 1.3

2xlDesign, set free1.75rem / 1.2

displayDesign, set free3rem / 1.04

Motion

How it breathes.

Every keyframe runs live below, dressed in the system's own colors - durations, easing curves and the interactions they power.

keyframes - 6 live

pop

rise

float

fade-in

shimmer

bounce-in

easings

smoothcubic-bezier(0.2, 0, 0, 1)

standardease

durations

base · 200msfast · 100msslow · 300msambient · 3s

interaction patterns

loopmap-pin

Map price pins float gently to feel alive.

enterbadge-in

'Guest favorite' tags bounce in once a card settles.

enterentrance

Cards rise gently into place as they appear.

pressfavorite

The wishlist heart pops when toggled - the signature delight.

loopskeleton

Image placeholders shimmer while photos load.

hoverhover-lift

Cards float a little higher on hover.

Components · 9

Blueprints, rendered live.

Every value below is a token reference resolved by the renderer - hover, toggle and switch tabs to feel the states. Bespoke components are rendered from their anatomy hint.

search-pill

bespoke · field

The hero search field - fully rounded, softly lifted.

card

bespoke · surface

Soft card on paper - rounded corners, the lightest resting shadow, floats on hover.

padding

A card wearing this system.

emphasis

A card wearing this system.

chip

bespoke · pill

Compact entity/filter token - a pill holding an avatar/icon, a label and an optional ds-chip-remove. Set data-active="true" for a selected filter (tints the primary); use a <button> or add ds-chip-remove for a dismissible chip.

active

MAMaya AndersenMAMaya Andersen

badge

bespoke · surface

Floating pill label - the 'Guest favorite' tag. White, softly shadowed, fully rounded.

intent

PillPillPillPillPillPill

input

bespoke · surface

Pill-shaped search field - the centerpiece. Rounded all the way, lifts a dark focus ring.

avatar

bespoke · indicator

Identity token - sized circle with initials or image.

size

MAMAMA

button

bespoke · surface

Pill-shaped action. Primary carries the lone moss green; the rest stay quiet on paper.

intent

select

bespoke · field

Field trigger that reveals a focus ring on interaction.

Choose an option

empty-state

bespoke · surface

Zero-data placeholder. Compose ds-empty-state with ds-empty-state-icon, ds-empty-state-title and ds-empty-state-description.

✦

No projects yet

Create your first project to get started.

Icons · lucide

A consistent icon set.

Icons inherit the system: color via currentColor, a standardized stroke, sizing on the scale. Lucide by default; more libraries can be enabled per system.