DESIGN.md generator

---
name: My Product
description: Warm, approachable SaaS UI — cream surfaces, confident primary green, serif headlines, sans body, monospace for code.
colors:
  primary: "#386948"
  primary-dim: "#2b5d3c"
  on-primary: "#e8ffe9"
  primary-container: "#b9efc5"
  surface: "#f7faf4"
  surface-container-low: "#f0f5ee"
  on-surface: "#2c342e"
  text-dim: "#5e665f"
  tertiary: "#745c27"
  border-subtle: "#dfe5dc"
  error: "#a83836"
typography:
  display:
  fontFamily: "Literata, Georgia, serif"
  fontSize: "48px"
  fontWeight: "700"
  lineHeight: "56px"
  letterSpacing: "-0.03em"
  body:
  fontFamily: "Nunito Sans, ui-sans-serif, system-ui, sans-serif"
  fontSize: "16px"
  fontWeight: "400"
  lineHeight: "26px"
  code:
  fontFamily: "JetBrains Mono, ui-monospace, monospace"
  fontSize: "14px"
rounded:
  card: "16px"
  pill: "9999px"
spacing:
  page: "1200px"
  prose: "768px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.card}"
    padding: "12px 24px"
---

## Overview

Warm, approachable SaaS UI — cream surfaces, confident primary green, serif headlines, sans body, monospace for code. Implement tokens in your global CSS or theme file (for example Tailwind @theme or CSS variables). Marketing pages may use light motion; product and account surfaces stay task-focused.

## Colors

- **Primary** `#386948`: CTAs, links, emphasis in headlines.
- **Surfaces**: `#f7faf4` page background; stepped containers `#f0f5ee` for bands and cards.
- **Text**: `#2c342e` body; `#5e665f` secondary.
- **Accents**: tertiary `#745c27`; error `#a83836` for failures.
- **Borders**: `#dfe5dc` for cards and dividers.

## Typography

- **Headlines**: Literata, Georgia, serif, display sizes with tight tracking.
- **Body**: Nunito Sans, ui-sans-serif, system-ui, sans-serif, 16px, line-height ~1.5–1.6.
- **Code**: JetBrains Mono, ui-monospace, monospace for URLs, API keys, and Markdown previews.
- Prefer sentence case for section labels; avoid ALL CAPS eyebrows across the page.

## Elevation

Light borders over heavy shadows. Featured cards: subtle ring on primary. Hover: small translate lift on marketing cards only.

## Layout bands

- **Page background**: surface token on `body`.
- **Hero band**: full-width surface-container-low so the hero separates from the cream body.
- **Cards / panels**: surface-container-lowest with border-subtle.
- **Content width**: page max 1200px; long-form prose max 768px.

## Components

Primary buttons: filled primary background, on-primary text, rounded-card, 12px 24px padding, active scale 0.97. Secondary: surface border, on-surface text. Cards: surface-container-lowest, border-subtle, rounded-card.

## Motion

Marketing pages only: subtle gradient or shimmer on hero CTAs. Product/task UI stays static. Honor prefers-reduced-motion for all decorative animation.

## Accessibility

Target WCAG AA. Use text-dim only for supporting copy on cream surfaces (verify 4.5:1). Touch targets ≥44px on mobile. Focus-visible outlines on interactive elements.

## Do's and Don'ts

**Do**

- Use design tokens from your theme, not ad-hoc hex in components.
- Keep one clear `h1` per page; supporting copy in text-dim.
- Separate marketing hero with a distinct surface band.

**Don't**

- `transition-all` or bounce easing on task-focused UI.
- Decorative motion on converter, editor, or account flows.
- Generic purple gradients or default system-only stacks unless intentional.