Cultivate design system

A system for clear decisions.

Precise structure, quiet surfaces and a distinct signal. These are the shared foundations and components used throughout Cultivate.

Colour and hierarchy

Plum provides structure. Wine identifies actions. Sea-glass supports information. Lavender draws attention to a selection or an experimental idea. Amber is reserved for keyboard focus and warnings.

Plum ink

--color-text

Mineral

--color-background

Porcelain

--color-surface

Wine

--color-primary

Lavender

--color-accent-light

Violet

--color-accent

Sea-glass

--color-ocean-light

Ocean

--color-ocean

Typography and space

Type specimen

Find what is worth building.

Use direct sentences, clear headings and a comfortable reading width. Numbers and identifiers use a fixed-width style when alignment matters.

P1-M1 · 01 / 06 · 12 October 2026

Small text still carries useful context.

Spacing scale

--space-14px

--space-28px

--space-312px

--space-416px

--space-524px

--space-632px

--space-748px

--space-864px

Actions and input

Use one primary action per decision. Links navigate; buttons act. Controls have a minimum 44px target. Try submitting the empty example, then enter a name and check it again.

Unavailable field

Explain why a field is unavailable in the surrounding content.

A selected surface

Use an accent surface when the context needs emphasis. Ordinary content cards stay neutral.

Explore capabilities

Notices

Evidence, tables and maps

Labels communicate evidence status; colour reinforces them. Research has a dashed boundary. Keep a text alternative beside an interactive graph.

VerifiedReportedPartialIn progressProposedResearch

Example evidence records
Record	State	Next step
`EX-01`	Verified	Link to the completed check.
`EX-02`	Proposed	Agree the evaluation baseline.
`EX-03`	Research	Define a testable question.

View capability map View Wardley Map

Interaction and accessibility

Keyboard focus uses an amber outline with a dark outer boundary. Hover changes colour without moving the layout. Reduced-motion preferences remove transitions. Mobile layouts wrap navigation and stack content; tables remain scrollable.

The system uses local font fallbacks and committed styles. It loads no external fonts or theme service.