Verdigris DESIGN.md Example

What this file renders to

Computed from the file below when this page is built. Open it in the viewer for the full guideline with navigation and diagnostics.

Lint summary

The same checks as the DESIGN.md linter, run on this file at build time. Design system defines 6 colors, 4 typography scales, 4 rounding levels, 5 spacing tokens, 3 components.

• 0 errors
• 1 warning
• 1 info

• warningorphaned-tokens colors.muted
  'muted' is defined but never referenced by any component.

Copy it, edit it, and use it as a starting point for your own file. Nothing is uploaded.

---
version: alpha
name: Verdigris
description: A calm, accessible wellness system built on sage greens with high-contrast text and generous space.
colors:
  primary: "#2F6E5B"
  ink: "#14231D"
  muted: "#5E6F68"
  surface: "#F4F7F4"
  surface-raised: "#FFFFFF"
  focus: "#0A7C66"
typography:
  headline-lg:
    fontFamily: Newsreader
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.15
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.7
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
  label-md:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: "0.02em"
rounded:
  none: 0px
  sm: 6px
  md: 12px
  lg: 20px
spacing:
  xs: 4px
  sm: 8px
  base: 16px
  lg: 24px
  xl: 40px
components:
  card:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface-raised}"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    height: 48px
    padding: 0 22px
  button-primary-hover:
    backgroundColor: "{colors.focus}"
---

## Overview

Verdigris is a wellness and care system designed to feel calm and legible. The
palette is a set of restful sage greens, text sits at high contrast for
comfortable reading, and spacing is generous so nothing feels rushed.

## Colors

- **primary (#2F6E5B):** verdigris green, the brand and the primary action.
- **ink (#14231D):** deep green-black for text, above 7:1 contrast on surface.
- **surface (#F4F7F4):** soft sage-tinted page canvas.
- **focus (#0A7C66):** focus rings and links, distinct from the primary fill.

## Typography

Newsreader gives headings a warm, readable serif voice. Inter carries body copy
at a comfortable 18px with 1.7 line-height, tuned for long-form reading.

## Layout

Content sits in a single narrow column with generous 40px section spacing.
Cards group related information with 24px internal padding, so each block has
room to breathe.

## Accessibility

Body text holds a contrast ratio above 7:1 against the surface, exceeding WCAG
AAA for normal text. Focus states use a dedicated focus color rather than
relying on the primary fill, so keyboard focus is always visible. Tap targets
are at least 48px tall.

## Do's and Don'ts

- Do keep body text above a 7:1 contrast ratio on the sage surface.
- Do preserve the generous spacing; it is part of the calm tone.
- Don't drop below 16px for body copy.
- Don't remove visible focus states to tidy the design.

More files: all DESIGN.md examples and templates.