# Getstark · Design system migration spec

> Source: https://www.getstark.co  ·  Curated by OpenDesign  ·  en

> A bold example of using a saturated, single-color hero to create a strong brand identity while maintaining high accessibility standards.

## 1. Identity DNA

The design system for Getstark is built like an industrial-grade engine: robust, precise, and operating reliably in the background. Its identity is forged from the core principles of **accessibility**, **compliance**, and **automation**, manifesting as a clear, authoritative presence that trusts its function over ornamentation.

**One-liner:** An enterprise SaaS platform that automates digital accessibility compliance across the product lifecycle.
**Keywords:** accessibility · compliance · automation · design-to-code · infrastructure
**Analogy:** An industrial-grade accessibility engine operating quietly in the background.

## 2. Color

The color system is a high-contrast dialogue between a saturated deep purple and a vibrant, single accent yellow. This pairing delivers immediate visual energy while maintaining the technical precision required for its compliance-focused purpose.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#381FD1` | main background |
| `--bg-soft` | `#F6F6EB` | card background |
| `--bg-quiet` | `#FAF5FF` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#FFFFFF` | secondary text |
| `--muted` | `#10284B` | placeholder |
| `--accent` | `#FEDB63` | single accent |
| `--line` | `rgba(229, 231, 235, 1.0)` | divider |

**Color principle:** High-contrast purple and yellow signals energy and technical precision.

The guiding principle is unambiguous contrast, using a limited, potent palette to signal technical confidence and maintain accessibility standards.

## 3. Typography

Typography is the system's primary voice, employing an extreme **bold grotesque-sans** at weight 900 to create undeniable hierarchy. The choices prioritize direct communication and structural impact over decorative flair.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.1 | 900 | -0.56px | Impactful headlines that drive the value proposition. |
| body | 16px | 1.5 | 400 | 0px | Primary reading text. |
| caption | 14px | 1.4 | 400 | 1.12px | Navigation links and UI labels. |

**Type rules:**
- Use tight tracking for large display weights to maintain visual cohesion.
- Utilize extreme font weights to create hierarchy on limited backgrounds.

## 4. Spacing

Layout rhythm is governed by a strict grid of **multiples of 4 and 8**, creating a consistent and predictable scaffold for all interface elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Multiples of 4 and 8 to ensure consistent alignment.

## 5. Surfaces

Surfaces are defined by subtle depth and clear articulation. White containers float with precise shadows, and thin borders use color accents to delineate functional areas without visual noise.

- **Radius:** sm 4px · md 6px · lg 20px · pill 999px
- **Shadows:**
  - 0 4px 12px rgba(0, 0, 0, 0.1)
- **Borders:** Thin 2px borders with dark blue or primary purple accents.

## 6. Layout

The foundational layout skeleton is a centered-column hero, designed to present a bold value proposition head-on. This core is flanked by left-aligned data points and floating, right-aligned status indicators, creating a balanced, information-rich composition.

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

**Skeleton:** Centered column hero with left-aligned data points and floating right-aligned status indicators.

## 7. Motion & Interaction

Motion philosophy is one of quiet, responsive feedback. The system uses brief transitions and state changes to affirm user interaction, avoiding any animation that would distract from the task or the data being presented.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Opacity and color transitions on interactive elements for a smooth, responsive feel.

- **Hover:** Subtle color shifts on buttons and links.
- **Click:** No heavy bounce or scale; relies on visual state changes.
- **Transition:** Quick 150-200ms transitions for UI responsiveness.
- **Keyboard:** Standard focus states expected for accessibility.

## 8. Voice & Don'ts

The editorial voice is **authoritative, technical, and reassuring**, mirroring the system's own clarity. Copy is direct and benefit-oriented, avoiding ambiguity or casualness to maintain trust in a regulated domain.

- **Tone:** Authoritative, technical, and reassuring.
- **Headline style:** Direct, benefit-oriented statements that emphasize automation.
- **CTA style:** Clear, action-oriented phrases like 'Sign up for free' or 'Get started'.
- **Avoid:** Avoid ambiguous language; be direct about compliance. / Avoid overly casual slang; maintain a professional enterprise tone. / Avoid complex jargon that isn't directly related to accessibility.

### Don'ts
- ❌ don't use muted or pastel palettes — the screenshot shows a deep, saturated purple (#381FD1) as the primary hero background.
- ❌ don't use low font weights for headlines — the screenshot shows an extremely bold, black weight (900) for the main display type.
- ❌ don't use wide tracking for headlines — the screenshot shows negative letter-spacing (-0.56px) for a dense, high-impact look.
- ❌ don't use multi-colored accent systems — the screenshot shows a single, high-chroma yellow (#FEDB63) as the dominant accent.
- ❌ don't use sharp, 0px border-radius on all elements — the screenshot shows rounded buttons and cards, with some pill-shaped chips.
- ❌ don't rely on icon-heavy navigation — the screenshot shows text-heavy top-level navigation with simple dropdown arrows.

The system deliberately forgoes decorative flourishes, complex jargon, and ambiguous language, focusing its communication strictly on function and compliance.

## System Prompt (paste into AI tool)

```
This site is a professional SaaS platform for digital accessibility compliance. It uses a vibrant, high-contrast palette of deep purple (#381FD1) and bright yellow (#FEDB63) on a clean off-white background (#F6F6EB). The typography is a bold grotesque-sans at an extreme weight (900) for headlines, paired with a standard weight for body text. Key critical don'ts: do not use thin headline weights, do not use multiple high-chroma accent colors, and do not use wide letter-spacing in headers.
```