Organic design system

Organic is warm, rounded and a little playful: a cream-and-sand ground with a terracotta accent and a sage second accent, Caprasimo display headings over Figtree, 16px radii that grow into pills and soft circular shapes. Photographs are washed so they sit back into the warm page instead of on top of it.

How to use this

• Link the one stylesheet from every page — <link rel="stylesheet" href="styles.css"> (adjust the relative path) — and take every color, font, spacing, radius and shadow from its variables (var(--color-*), var(--font-*), var(--space-*), var(--radius-*), var(--shadow-*)). Never hard-code a hex, a font name or a px value the tokens already carry.
• Build with the classes below rather than inventing parallel ones; the component pages are plain HTML, so view source and copy the markup.
• templates/ holds starting points a consuming project can copy whole.
• The whole system was derived from theme.json. To change the look, edit the tokens at the top of styles.css — every page, the thumbnail and this guide read from them — and keep theme.json and the written guidance in step so they don't drift from what the CSS actually does.

Direction

Left-aligned, asymmetric layouts. Flush-left headings; content hugs the left edge with whitespace on the right. Lean into round shapes — over-rounded containers, pill buttons (border-radius: 999px), soft circular accents. Wrap hero and inline images in the .washed class — desaturated, lower-contrast and lifted, so they sit back into the page rather than on top of it.

Color

A light ground (--color-bg #f5ead8) with --color-text #201e1d and two accents — --color-accent #c67139 and --color-accent-2 #7a8a5e. Each role carries a 100–900 tonal ramp (--color-neutral-100 … --color-accent-2-900) generated in OKLCH on a shared perceptual lightness scale, so the same step of any ramp has the same visual weight. Use the light steps (100–300) for tinted fills, hovers and subtle borders, 500 as the role's base, and the dark steps (700–900) for text on tinted fills and for pressed states; prefer ramp steps over ad-hoc color-mix(). For elevation use --shadow-sm/md/lg (already tuned to the ground) rather than ad-hoc box-shadows.

Type

Caprasimo for headings over Figtree for body text, loaded as --font-heading / --font-body. Density 1.10× and radius 16px are already baked into the --space-* / --radius-* scales — use the variables, not raw numbers.

Icons

Use Lucide icons (https://lucide.dev), at stroke-width 2.75 for a rounder, heavier look throughout.

Interaction states

Interactive states are themed, never browser defaults: give every interactive element a :hover tint and a pressed state from the accent ramp (one step past the base — --color-accent-600 on a light ground, --color-accent-400 on a dark one, or a color-mix() tint for outlined/ghost variants), and style keyboard focus with :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } — never leave the default blue focus ring.

Components

States are built in: hovers and pressed states come from the accent ramp, keyboard focus is the 2px accent :focus-visible ring, ::selection is an accent tint, and disabled controls drop to 45% opacity. Don't restyle them per page. The accent-to-ground pair is tuned to at least 3:1 — enough for icons, large text and interface chrome, not for body copy — so for paragraph-size text in the accent use a deep ramp step (--color-accent-700 on this ground) rather than the accent itself.

Do

• Over-round: --radius-lg for containers, border-radius: 999px for buttons and inputs.
• Use soft shapes — circles and blobs — as decoration and imagery masks.
• Reach for the sage --color-accent-2-* ramp as a genuine second voice, not just a highlight.
• Wash photography with the .washed wrapper and keep its edges rounded.

Don't

• Do not draw sharp corners or hairline-only geometry.
• Do not desaturate the palette into greys — warmth is the point.
• Do not use condensed or geometric display faces; Caprasimo is the only display voice.
• Do not crowd elements; the rounded shapes need air to read as soft.

Files

• styles.css — the only stylesheet: the token sheet (:root variables, ramps, base type) plus the component layer. Link it from every page.
• readme.md — this guide.
• theme.json — the parameters these files were derived from (a machine-readable record of the theme).
• thumbnail.html — the project cover (brand mark + swatches).
• foundations/type.html — the type scale and the heading/body pairing at real sizes.
• foundations/color.html — color roles and the 100-900 tonal ramps, with usage notes.
• foundations/layout.html — the spacing scale, the grid and how edges are drawn.
• foundations/icons.html — the icon set at interface sizes, inline and in buttons.
• foundations/image.html — how photographs and figures are treated.
• components/buttons.html — buttons, icon buttons and tags in every variant and state.
• components/forms.html — text fields, radios and the segmented control on native elements.
• components/cards.html — content cards and the elevation steps.
• components/navigation.html — the header bar pattern.
• components/table.html — a data table with the themed header and row rules.
• components/dialog.html — a modal over its backdrop at the top elevation.
• theme.html — the theme's parameters rendered as a reference sheet.
• templates/landing/ — a starter page consuming the system the intended way (index.html, its ds-base.js loader, and the vendored image-slot.js its photograph mounts).
• assets/photo.jpg — the reference photograph the imagery page treats.