# Standards · Design system migration spec

> Source: https://standards.site  ·  Curated by OpenDesign  ·  en

> 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.

## 1. Identity DNA

Standards is a design system tool that replaces static PDF guidelines with interactive, automated brand standards. It functions as a digital source of truth, where brand rules become living, operational code rather than dormant documents. The interface itself is a study in restraint, a monochromatic framework that lets the content—and the single, sharp accent—do all the talking.

**One-liner:** A clean, typographic-first SaaS interface for managing dynamic brand guidelines.
**Keywords:** standards · brand guidelines · modern · automation · clarity
**Analogy:** A digital design system tool that replaces static PDF guidelines with interactive, automated brand standards.

## 2. Color

The color system is defined by what it excludes. A strictly monochromatic palette of off-white, black, and grey provides a clean, neutral canvas, establishing hierarchy through value alone. A single, high-chroma red accent punctuates this field, used sparingly for critical branding moments and interactive emphasis.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#EAEAEA` | main background |
| `--bg-soft` | `#F2F2F2` | card background |
| `--ink` | `#000000` | body text |
| `--muted` | `#A1A1A1` | placeholder |
| `--accent` | `#FF2E00` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

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

The governing principle is one of absolute restraint: the palette gains its power not from addition, but from the disciplined subtraction of color.

## 3. Typography

Typography is the primary voice of the interface, set in a neutral grotesque sans-serif to maintain clarity and objectivity. A consistent weight of 400 across all elements creates a uniform, technical texture, while scale and spacing—not weight—establish the information hierarchy.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 52px | 1.2 | 400 | -0.52px | Main hero headline |
| heading | 31px | 1.15 | 400 | -0.14px | Section titles |
| body | 20px | 1.5 | 400 | 0 | Paragraph text |
| caption | 14px | 1.45 | 400 | 0 | Small helper text |

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

## 4. Spacing

The rhythm of the layout is measured in generous whitespace and consistent horizontal padding, creating a clean, open field for content. This spatial generosity prevents visual clutter and allows each element to breathe, reinforcing the system's emphasis on clarity and automation.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace with consistent 30px horizontal padding in containers, maintaining a clean and open layout.

## 5. Surfaces

Surface treatment is deliberately flat, avoiding shadows and gradients in favor of subtle, 1px borders. These thin outlines define card boundaries and interactive states, maintaining a clean, matte aesthetic where depth is communicated through layering and spacing, not simulated light.

- **Radius:** sm 0px · md 4px · lg 0px · pill 999px
- **Borders:** Subtle 1px borders and thin outlines are used to define card boundaries and interactive states, avoiding heavy shadows.

## 6. Layout

The skeletal structure is a multi-column grid that collapses gracefully to a single column on mobile. A prominent, left-aligned hero statement establishes immediate visual authority, followed by alternating content sections that create a clear, logical progression through the system's features.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is employed as a functional whisper, not a spectacle. Transitions are smooth and consistent, typically over 0.2 seconds, using subtle shifts in opacity and border color to confirm interactions and guide focus without becoming the focus itself.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle opacity transitions for hover states
  - Smooth border color changes on focus
  - Transform movements for interactive elements

- **Hover:** Changes in text color to muted grey or subtle shifts in background/opacity.
- **Click:** Immediate response with cursor state changes and focus ring activations.
- **Transition:** Smooth transitions on borders, opacity, and transforms, typically over 0.2s.
- **Keyboard:** Standard focus ring behavior for accessibility, utilizing the browser's default outlines or subtle custom rings.

## 8. Voice & Don'ts

The editorial voice is confident, direct, and authoritative, using short, punchy statements that challenge outdated practices. This tone avoids corporate jargon and vague promises, favoring action-oriented language that mirrors the interface's own clarity and purpose.

- **Tone:** Confident, direct, and authoritative.
- **Headline style:** Short, punchy statements that challenge the status quo (e.g., 'Static guidelines are outdated.').
- **CTA style:** Action-oriented and simple (e.g., 'Try free', 'Learn more').
- **Avoid:** Overly corporate jargon / Complex sentence structures / Excessive use of exclamation points / Vague promises

### Don'ts
- ❌ 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.

What Standards deliberately omits is as defining as what it includes: no drop shadows, no serif fonts, no multiple accents, and no cluttered layouts.

## System Prompt (paste into AI tool)

```
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.
```