---
name: Getstark
description: "A bold example of using a saturated, single-color hero to create a strong brand identity while maintaining high accessibility standards."
version: alpha

colors:
  background: "#381FD1"
  primary: "#000000"
  secondary: "#FFFFFF"
  tertiary: "#FEDB63"
  neutral: "#10284B"
  bg-soft: "#F6F6EB"
  bg-quiet: "#FAF5FF"
  line: "rgba(229, 231, 235, 1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 900
    letterSpacing: "-0.56px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "1.12px"

rounded:
  sm: 4px
  md: 6px
  lg: 20px
  pill: 999px

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

---

## Overview

An enterprise SaaS platform that automates digital accessibility compliance across the product lifecycle.

*An industrial-grade accessibility engine operating quietly in the background.*

## Colors

High-contrast purple and yellow signals energy and technical precision.

- **Background (`#381FD1`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#FFFFFF`)** — uses `ink-soft` token
- **Accent (`#FEDB63`)** — uses `accent` token
- **Muted (`#10284B`)** — uses `muted` token
- **Borders (`rgba(229, 231, 235, 1.0)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Multiples of 4 and 8 to ensure consistent alignment.

## Elevation & Depth

- 0 4px 12px rgba(0, 0, 0, 0.1)
- Borders: Thin 2px borders with dark blue or primary purple accents.

## Shapes

- `sm`: 4px
- `md`: 6px
- `lg`: 20px
- `pill`: 999px

## Components

- **button:** High-contrast solid blocks with slight rounded corners.
- **card:** Floating white containers with subtle borders for interface mocks.
- **chip:** Status labels using background colors and icon indicators.
- **input:** Simple rectangular fields with thin borders.
- **hero:** A bold, type-driven section that uses a deep purple backdrop to make text and yellow accents pop.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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