Greda Design System

Getting started

Install

One stylesheet. No package to add, no build step to run.

Link it

The whole system, straight from this site.

<link rel="stylesheet" href="https://www.greda.design/v0.7.0/greda.css">

The versioned URL is immutable. Upgrade deliberately by changing the version in the path. Use /styles/greda.css only when you want the latest release automatically.

Or copy it

To stay standalone, or to pin a version.

styles/
├── greda.css      entry point, declares the layer order
├── tokens.css     colour, type, space, shape, motion
├── base.css       reset, base elements, utilities
├── components.css every component
└── fonts.css      optional, loads the typefaces

Copy the folder and link /styles/greda.css. A copy never changes under you; it also never picks up a fix, so note which version you took — greda.css carries it in its header.

Typefaces

Optional, and deliberately separate.

<link rel="stylesheet" href="https://www.greda.design/v0.7.0/fonts.css">

Greda declares the type stack but loads no fonts: a stylesheet should not call a third party unasked, and it would break under a strict font-src policy. Skip this and the stack falls back to Helvetica Neue and the platform mono.

Write markup

Every public class is prefixed gr-.

<button class="gr-button gr-button--primary">Save</button>

<label class="gr-field">
  <span class="gr-field__label">Email</span>
  <span class="gr-field__control">
    <input type="email">
  </span>
</label>

Block, __part, --variant. Tokens follow the same shape: --gr-color-text, --gr-space-4.

What it will not do

Two things worth knowing before you link it.

It will not fight your CSS

Everything lives in cascade layers, so any unlayered rule in your project wins without raising specificity and without !important.

It does reduce your animations

The prefers-reduced-motion rule is global, so it quiets the host page's own motion too. That is deliberate, and it is the one thing Greda imposes.

Criteria

Principles

The rules that let you decide before adding a component or a variant.

The scale rules

Spacing starts at 4px. Most internal relationships use 4, 8 or 12px; layout uses 16, 24, 32, 48 and 64px.

Deliberate density

Controls are 32px with a precise pointer and 44px on touch. A compact identity does not give up reach.

Quiet hierarchy

Type, space and alignment first. Borders only where they separate; shadows only where something genuinely floats.

Grow on evidence

A pattern enters the system after repeating itself in real products. Greda does not try to anticipate every possible interface.

Core styles

Foundations

Semantic tokens a project can consume without knowing the primitive values.

color.*

font.sans

Inter does the work.

space.1–8

radius.*

4px for controls · 8px for surfaces

motion.*

150 / 220 / 320ms · transform + opacity

layer.*

sticky 100 · toast 300 · skip 400; native overlays take no z-index

focus.*

2px of accent; offset 3px, or 1px hugging a control that already has a border

theme

Clay or Graphite × light or dark; components only consume semantic colour tokens

Semantic colour

Themes

A family changes the palette. A mode changes the light. Neither changes how a component is built.

Choose a family

Every family supplies the same semantic roles for canvas, surfaces, text, borders, actions and focus.

Future themes

New families will enter through the same contract: complete light and dark modes, every required semantic token, verified contrast and no changes to typography, spacing, shape, density or behavior. A theme may change Greda's temperature; it may not turn it into another design system.

The available families and their status live in themes.json.

From v0.7.0

Migration

Adopt theme families without rewriting component markup—and keep a clean path back to the immutable release.

v0.7.0 Stable

v0.8.0 Experimental

Load the experimental entry point

Clay is bundled by default. Load Graphite after greda.css only when that family is available to the user.
Separate family and mode

data-gr-theme becomes clay|graphite; data-gr-mode becomes light|dark.
Split persisted state

Store family and mode independently. Keep the current selection working even when storage is unavailable.
Test the complete matrix

Verify Clay and Graphite in light and dark, from 360px upward, with keyboard and reduced motion.

Before

<html data-gr-theme="dark">

After

<html data-gr-theme="clay"
      data-gr-mode="dark">

No component rewrite

Classes, markup and behavior stay compatible. The old light/dark attribute remains as a temporary alias, so rollback is mechanical.

Read the full guide

Adoption

Release notes

Versioned files stay unchanged. Read the changes before moving a project to a new release.

v0.7.0

29 July 2026

Added Search / Command Menu as an accessible dialog composition.
Added live filtering, active-result announcements and a complete empty state.
Added Arrow Up/Down and Enter behavior while focus remains in the search field.

v0.6.0

29 July 2026

Added Drawer as a native modal side panel.
Kept the title and actions visible around an independently scrolling body.
Added mobile, dark-theme and keyboard coverage to the component contract.

v0.5.0

28 July 2026

Added Cascader, Tree Select and Vertical Steps.
Added complete keyboard behavior for hierarchical selection.
Made exact Grid22 SVG geometry mandatory through automated validation.

v0.4.0

28 July 2026

Added a machine-readable registry for all documented components.
Added HTML, JavaScript and AI prompt views with a multi-action copy control.
Connected component search and source panels to the registry.

v0.3.1

28 July 2026

Anchored Tooltip to the trigger's real width inside grid layouts.
Vertically centered the Code Snippet title with its copy action.

v0.3.0

28 July 2026

Added Icon Button with exact Grid22 icons, danger and disabled states.
Added Tooltip for hover and keyboard focus.
Added Dropdown Menu with native dismissal and roving focus.

v0.2.1

28 July 2026

Aligned icon sizing with Grid22's 16px scale.
Added Grid22 instructions for people and AI agents.
Enabled Grid22's versioned stylesheet in the site policy.

v0.2.0

27 July 2026

Added a versioned distribution path for safe external use.
Added Prose and Code snippet patterns.
Added searchable component documentation and functional tabs.
Added copy controls and a machine-readable llms.txt guide.

v0.1.0

24 July 2026

First public set of foundations, controls, surfaces, overlays, feedback and navigation components.

Compatibility

Browser support

Greda targets current stable browsers and keeps essential controls usable when newer CSS is unavailable.

Feature	Modern behavior	Fallback
Themes	`light-dark()`	Light palette
Select	Styled picker	Native picker
Popover	Anchored to its trigger	Browser placement
Motion	Transform and opacity	Reduced automatically

Test the exact browsers your product supports. Greda ships modern CSS without transpilation.

Machine-readable

Use with AI

Give an agent the system rules once, then copy the exact markup from any component.

AI context

Use Greda Design System v0.7.0.
Read https://www.greda.design/llms.txt before writing UI.
Use documented gr-* classes and --gr-* tokens.
Return semantic HTML and preserve native accessibility.

For the whole system: copy the AI context above or open llms.txt.

For agents and tools: consume the versioned components.json registry. Its JSON Schema documents the contract.

For one component: choose “View implementation” below, then copy its HTML, JavaScript, AI prompt or the complete bundle.

Quality contract

Component status

Maturity and required coverage generated from the same registry used by documentation and agents.

Latest executed QA

33/33 rendered across 8 theme, mode and viewport combinations.

Overflow failures: 0
Runtime errors: 0
Keyboard verified: 3/23

Open QA harness Read QA report

Stable: 33
Candidate: 0
Experimental: 0

Component	Maturity	States	Keyboard	Theme coverage	Minimum viewport
Button	Stable	5	Native	2 themes · 2 modes	360px
Icon Button	Stable	4	Native	2 themes · 2 modes	360px
Tooltip	Stable	4	Scripted	2 themes · 2 modes	360px
Link	Stable	4	Native	2 themes · 2 modes	360px
Field	Stable	3	Native	2 themes · 2 modes	360px
Textarea	Stable	3	Native	2 themes · 2 modes	360px
Select	Stable	3	Native	2 themes · 2 modes	360px
Cascader	Stable	4	Scripted	2 themes · 2 modes	360px
Tree Select	Stable	6	Scripted	2 themes · 2 modes	360px
Choice	Stable	3	Native	2 themes · 2 modes	360px
Switch	Stable	2	Native	2 themes · 2 modes	360px
States	Stable	4	Native	2 themes · 2 modes	360px
Card	Stable	1	Not applicable	2 themes · 2 modes	360px
Badge	Stable	4	Not applicable	2 themes · 2 modes	360px
Table	Stable	2	Not applicable	2 themes · 2 modes	360px
Prose + Code	Stable	1	Not applicable	2 themes · 2 modes	360px
Dialog	Stable	2	Scripted	2 themes · 2 modes	360px
Drawer	Stable	2	Native	2 themes · 2 modes	360px
Search / Command Menu	Stable	5	Scripted	2 themes · 2 modes	360px
Disclosure	Stable	2	Native	2 themes · 2 modes	360px
Tabs	Stable	2	Scripted	2 themes · 2 modes	360px
Vertical Steps	Stable	3	Native	2 themes · 2 modes	360px
Popover	Stable	2	Native	2 themes · 2 modes	360px
Dropdown Menu	Stable	5	Scripted	2 themes · 2 modes	360px
Callout	Stable	2	Not applicable	2 themes · 2 modes	360px
Toast	Stable	1	Not applicable	2 themes · 2 modes	360px
Spinner and Progress	Stable	2	Not applicable	2 themes · 2 modes	360px
Skeleton	Stable	1	Not applicable	2 themes · 2 modes	360px
Empty state	Stable	1	Not applicable	2 themes · 2 modes	360px
Breadcrumb	Stable	1	Native	2 themes · 2 modes	360px
Pagination	Stable	2	Native	2 themes · 2 modes	360px
Header, Nav and Footer	Stable	2	Not applicable	2 themes · 2 modes	360px
Skip link	Stable	2	Native	2 themes · 2 modes	360px

Candidate patterns stay in Recipes until they satisfy the promotion rule.

Primitives

Components

Button, Icon Button, Tooltip, Link, Field, Textarea, Select, Cascader, Tree Select, Choice, Switch, Card, Badge, Table, Prose, Dialog, Drawer, Search / Command Menu, Disclosure, Tabs, Vertical Steps, Popover, Dropdown Menu, Callout, Toast, Spinner, Progress, Skeleton, Empty state, Breadcrumb, Pagination, Header, Nav, Footer and Skip link.

Find a component 33 documented examples

Button

Primary, secondary, quiet and disabled.

Icon Button

A square action with an accessible name and one exact Grid22 icon.

Link

The underline is always there; colour is never animated.

A default link, a quiet one and an accent one.

Field

Label, help text and visible focus.

Search components Search by name or category.

Textarea

The same control, aligned to the top and resizable.

Decision notes

Select

Native control; it only borrows the box.

Density

Cascader

Select one value by moving through related levels.

Team location

Tree Select

Select several values without losing their hierarchy.

Documentation sections

Choice

Checkbox and radio share everything but the shape.

What gets validated Local references Colours outside the tokens This page only The whole system

Switch

A physical state: the thumb travels, the track does not animate.

Reduce motion Force dark theme

States

Error, required, readonly and disabled.

Email The domain after the @ is missing. Prefix Build step

Card

A surface, not decoration.

Personal project

A surface grouped only when the content needs a boundary you can recognise.

Badge

A short label, in mono like everything technical.

v0.7.0 Stable API change

Table

Rules that separate; numbers in mono and to the right.

Control	Compact	Touch
Button	32px	44px
Field	32px	44px
Choice	20px	44px

Prose + Code

Long-form content and technical snippets with one reading rhythm.

Greda grows from evidence, not speculation. A pattern enters the system only after it repeats across real projects.

That keeps the stylesheet small enough to understand and makes each public class carry a clear responsibility.

Before a pattern enters

Complete interactive states, :focus-visible included.
Mobile behaviour from 360px up.
Tokens instead of repeated values.

The component should explain its purpose before its decoration.
Greda contribution principle

HTML

<link rel="stylesheet" href="/v0.7.0/greda.css">

<button class="gr-button gr-button--primary">Save</button>

Dialog

Native <dialog>: trapped focus and Escape for free.

Drawer

A modal side panel for focused tasks that should preserve the current page.

Search / Command Menu

Find and run a known action without leaving the keyboard.

Disclosure

<details>; the panel does not animate.

Why is there no build step?

Because a person should be able to copy the styles/ folder and keep working without installing anything.

When does a component get in?

Once it has shown up as a real pattern in more than one project.

Tabs

The styling lives here; keeping aria-selected in sync is the consumer's.

32px with a precise pointer, from 45rem up.

Vertical Steps

Show progress through a sequence without hiding what comes next.

Draft Content and component API complete. Completed
Review Accessibility and responsive behavior. Current step
Publish Create the immutable release. Not started

Callout

A message that stays on the page.

Breakpoints are a fixed scale

A media query cannot read a token, so sm, md and lg are written out.

The accent does not separate focus from error

Today danger resolves to the accent; separating them is one line in tokens.css.

Toast

Transient; it lives on the toast layer.

Tokens validated: 2 documents, 7 stylesheets.

In real use it sits inside .gr-toast-region, which pins it to the bottom and intercepts no clicks.

Spinner and Progress

Indeterminate and determinate; the second is <progress>.

Validating tokens…

The spinner never travels alone: prefers-reduced-motion freezes it, and a still circle says nothing. The label does.

Skeleton

Only opacity moves; the block keeps its size.

Empty state

Name what is missing and offer the way out.

No component matches

Try another name, or look at the full list of primitives.

View all

Pagination

44px targets, 32px with a precise pointer.

Header, Nav and Footer

This page's own; they no longer live in docs.css.

The top bar is .gr-header with .gr-nav, and it uses the sticky layer instead of an invented z-index. The footer is .gr-footer.

Greda Design System

Install

Link it

Or copy it

Typefaces

Write markup

What it will not do

Principles

The scale rules

Deliberate density

Quiet hierarchy

Grow on evidence

Foundations

Themes

Choose a family

Future themes

Migration

Load the experimental entry point

Separate family and mode

Split persisted state

Test the complete matrix

No component rewrite

Release notes

v0.7.0

v0.6.0

v0.5.0

v0.4.0

v0.3.1

v0.3.0

v0.2.1

v0.2.0

v0.1.0

Browser support

Use with AI

Component status

Components

Button

Icon Button

Tooltip

Link

Field

Textarea

Select

Cascader

Tree Select

Choice

Switch

States

Card

Personal project

Badge

Table

Prose + Code

Before a pattern enters

Dialog

Drawer

Search / Command Menu

Disclosure

Tabs

Vertical Steps

Popover

Dropdown Menu

Callout

Toast

Spinner and Progress

Skeleton

Empty state

Breadcrumb

Pagination

Header, Nav and Footer

Skip link