Marigold 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, 5 rounding levels, 4 spacing tokens, 4 components.

• 0 errors
• 3 warnings
• 1 info

• warningcontrast-ratio components.button-primary
  textColor (#fffdf8) on backgroundColor (#f4820a) has contrast ratio 2.57:1, below WCAG AA minimum of 4.5:1.
• warningorphaned-tokens colors.muted
  'muted' is defined but never referenced by any component.
• warningorphaned-tokens colors.surface-sunk
  'surface-sunk' 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: Marigold
description: A warm, high-energy commerce brand built on a single marigold accent and soft, rounded shapes.
colors:
  primary: "#F4820A"
  ink: "#2A1B10"
  muted: "#8A7A6B"
  surface: "#FFFDF8"
  surface-sunk: "#FBF3E6"
  berry: "#C2185B"
typography:
  display-lg:
    fontFamily: Fraunces
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: "-0.01em"
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  price-lg:
    fontFamily: Inter
    fontSize: 22px
    fontWeight: 700
    lineHeight: 1.1
  label-caps:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: "0.08em"
rounded:
  none: 0px
  sm: 8px
  md: 16px
  lg: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  base: 16px
  lg: 28px
components:
  product-card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 16px
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.full}"
    height: 48px
    padding: 0 24px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
  sale-badge:
    backgroundColor: "{colors.berry}"
    textColor: "{colors.surface}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.full}"
    padding: 4px 10px
---

## Overview

Marigold is a commerce brand with a warm, generous personality. The canvas is a
soft cream, text is a warm near-black, and a single marigold orange carries
every primary action. Shapes are rounded and friendly, so the storefront feels
approachable rather than clinical.

## Colors

- **primary (#F4820A):** marigold, the single accent and the primary action.
- **ink (#2A1B10):** warm near-black for headlines and body text.
- **surface (#FFFDF8):** warm cream page canvas.
- **berry (#C2185B):** sale and urgency only, used sparingly so it stays loud.

## Typography

Fraunces gives headlines a soft editorial warmth. Inter carries body copy,
prices, and uppercase labels so product information stays plain and scannable.

## Shapes

Rounding is the signature. Product cards use a 24px radius, pills and buttons
are fully rounded, and imagery inherits the card radius. Nothing in the system
uses a hard 0px corner except full-bleed hero imagery.

## Components

Product cards pair a soft cream surface with the card radius. The primary button
is a fully rounded marigold pill. Sale badges are the one place the berry color
appears, kept small so urgency reads without overwhelming the warm palette.

## Do's and Don'ts

- Do keep marigold for the single primary action per view.
- Do let the rounded shapes and cream surface set the friendly tone.
- Don't use berry for anything other than sale or urgency.
- Don't mix hard corners into the rounded system.

More files: all DESIGN.md examples and templates.