---
name: Standards
description: "This site is a perfect example of a modern, typography-driven SaaS interface that uses restraint and a single bold accent to achieve a premium, authoritative feel."
version: alpha

colors:
  background: "#EAEAEA"
  primary: "#000000"
  tertiary: "#FF2E00"
  neutral: "#A1A1A1"
  bg-soft: "#F2F2F2"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 52px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.52px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 31px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "-0.14px"
  body:
    fontFamily: grotesque-sans
    fontSize: 20px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.45
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 0px
  md: 4px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A clean, typographic-first SaaS interface for managing dynamic brand guidelines.

*A digital design system tool that replaces static PDF guidelines with interactive, automated brand standards.*

## Colors

A strictly monochromatic palette (black, white, grey) punctuated by a single, high-chroma red accent used sparingly for branding and emphasis.

- **Background (`#EAEAEA`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#FF2E00`)** — uses `accent` token
- **Muted (`#A1A1A1`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** grotesque-sans

- Use weight 400 for all text
- Tighten letter-spacing on larger display sizes
- Maintain generous line-height for body copy

## Layout

A multi-column layout that shifts to a single column on mobile, featuring a prominent left-aligned hero and alternating content sections.

*Rhythm:* Generous whitespace with consistent 30px horizontal padding in containers, maintaining a clean and open layout.

## Elevation & Depth

- Borders: Subtle 1px borders and thin outlines are used to define card boundaries and interactive states, avoiding heavy shadows.

## Shapes

- `sm`: 0px
- `md`: 4px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Minimal text-based buttons and ghost buttons with simple hover states, sometimes paired with a red accent dot.
- **card:** Light grey rectangular containers with thin blue selection outlines in editing states, focusing on content over decoration.
- **chip:** Simple inline text elements or tags without heavy background fills.
- **input:** Clean, borderless text fields or standard form inputs that blend into the background.
- **hero:** A massive left-aligned typographic statement with a subtle red dot accent, followed by a visual preview of the product.

## Do's and Don'ts

**Don't:**
- Don't use heavy drop shadows or gradients — screenshot shows flat, matte surfaces with subtle borders.
- Don't use serif or script fonts — screenshot shows a consistent, neutral grotesque sans-serif system.
- Don't use multiple bright accent colors — screenshot shows a strict monochrome palette with only one high-chroma red (#FF2E00).
- Don't use rounded containers or cards — screenshot shows strict rectangular geometry with minimal or zero border-radius.
- Don't clutter the layout with dense text — screenshot shows generous whitespace and short, impactful copy.
- Don't use heavy, bold font weights for body text — screenshot shows a consistent weight of 400 across almost all elements.

---

## System Prompt (paste into AI agent)

```
Design a clean, confident SaaS interface for a design tool that emphasizes clarity and automation. Use a monochromatic palette with an off-white background (#EAEAEA), solid black text (#000000), and a single high-chroma red accent (#FF2E00) for branding. Utilize a neutral grotesque-sans font family at weight 400 with tight letter-spacing for large display sizes. The layout should be spacious, using generous whitespace and simple rectangular containers with minimal border-radius. Critical rules: Do not use drop shadows or gradients; do not use multiple accent colors; do not use serif or overly decorative fonts; do not clutter the interface with dense information; do not use heavy font weights for long-form text.
```