# Greda Design System Official documentation: https://www.greda.design/ Current immutable release: v0.2.0 License: MIT Greda is a dependency-free CSS design system for compact, accessible interfaces. Use semantic HTML first. Add public `gr-*` classes for layout and appearance. Do not invent Greda classes or duplicate token values. ## Install Add the immutable stylesheet: Optional fonts: Use https://www.greda.design/styles/greda.css only when automatic updates are intended. ## Core rules - All public classes start with `gr-`. - All public custom properties start with `--gr-`. - Greda uses the cascade layers `greda.tokens`, `greda.reset`, `greda.base`, `greda.utilities`, and `greda.components`. - Unlayered product CSS overrides Greda without higher specificity. - Use the spacing tokens. The base scale is 4px. - Controls are 32px with a precise pointer and 44px on touch. - Keep native semantics, labels, keyboard behavior, and `aria-*` relationships. - Preserve visible `:focus-visible` states. - Do not use color alone to communicate state. - Greda follows the system color scheme by default. Force a theme only when the product needs an explicit choice: ## Common tokens Color: `--gr-color-canvas`, `--gr-color-surface`, `--gr-color-surface-muted`, `--gr-color-text`, `--gr-color-text-muted`, `--gr-color-border`, `--gr-color-accent` Spacing: `--gr-space-1`, `--gr-space-2`, `--gr-space-3`, `--gr-space-4`, `--gr-space-6`, `--gr-space-8`, `--gr-space-12`, `--gr-space-16` Type: `--gr-font-sans`, `--gr-font-mono`, `--gr-text-xs`, `--gr-text-sm`, `--gr-text-md`, `--gr-text-lg` Shape and motion: `--gr-radius-control`, `--gr-radius-surface`, `--gr-duration-fast`, `--gr-duration-base`, `--gr-duration-slow` ## Layout utilities - `.gr-container`: centered page container - `.gr-stack`: vertical flow - `.gr-cluster`: wrapping horizontal group - `.gr-grid`: responsive twelve-column grid - `.gr-span-2`, `.gr-span-3`, `.gr-span-4`, `.gr-span-6`, `.gr-span-8`, `.gr-span-12`: grid spans - `.gr-visually-hidden`: accessible text hidden visually ## Component patterns Button: Field: Select: Card:

Project name

Short supporting text.

Callout:

Check this setting

Explain what happened and what to do next.

Dialog:

Confirm action

Explain the consequence.

 Tabs require JavaScript to keep `aria-selected`, `tabindex`, and panel visibility in sync. Dialogs and popovers use native browser primitives. Code snippet copy buttons use `.gr-code-snippet__copy`; connect their action to the Clipboard API in the product script. ## Available components Button, Link, Field, Textarea, Select, Choice, Switch, Fieldset, Card, Badge, Table, Prose, Code snippet, Divider, Dialog, Disclosure, Tabs, Popover, Callout, Toast, Spinner, Progress, Skeleton, Empty state, Breadcrumb, Pagination, Header, Nav, Footer, Section head, Skip link, and icon slot. ## Agent checklist Before returning UI: 1. Link the immutable release. 2. Use only documented classes and tokens. 3. Keep labels and native elements. 4. Include focus, disabled, error, loading, and empty states when relevant. 5. Verify the layout from 360px upward. 6. Respect reduced motion. 7. Keep product overrides unlayered. Exact component markup is available on https://www.greda.design/ under “View and copy markup”.