Dribbble - Discover the World’s Top Designers & Creative Professionals

---
version: alpha
name: "Frequency-Based Extraction"
description: "Design tokens extracted from frequency analysis without LLM interpretation."
colors:
  primary: "#ffffff"
  text: "#0d0c22"
  text-2: "#beb9ca"
  text-3: "#060318"
  text-4: "#212121"
  text-5: "#524b63"
  text-6: "#6e6d7a"
  text-7: "#655c7a"
  local-accent: "#faf9fb"
  local-accent-2: "#ecebf0"
typography:
  type-1:
    fontFamily: "Mona Sans"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "28px"
  type-2:
    fontFamily: "Mona Sans"
    fontSize: "13px"
    fontWeight: "600"
    lineHeight: "13px"
  type-3:
    fontFamily: "Mona Sans"
    fontSize: "12px"
    fontWeight: "500"
    lineHeight: "12px"
  type-4:
    fontFamily: "Mona Sans"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "28px"
  type-5:
    fontFamily: "Mona Sans"
    fontSize: "12px"
    fontWeight: "400"
rounded:
  radius-1: "12px"
  radius-2: "4px"
  radius-3: "8px"
  radius-4: "2px"
  radius-5: "6px"
spacing:
  space-1: "8px"
  space-2: "12px"
  space-3: "16px"
  space-4: "4px"
  space-5: "5px"
  space-6: "6px"
  space-7: "24px"
  space-8: "10px"
  space-9: "22px"
  space-10: "32px"
---

## Overview

Design tokens extracted from frequency analysis without LLM interpretation.

**Signature traits:**
- Evidence was insufficient to extract distinctive signature traits for this system.

## Colors

The palette uses 10 validated color tokens across 1 theme profile. Semantic roles stay attached to observed usage so generation agents can choose accents without inventing new color meaning.

### Primary Brand
- **Primary** (#ffffff): Frequency rank #2 (802 occurrences); token importance brandCandidate: action-centric usage with area share 15.9%. Role: primary. {authored: rgb(255, 255, 255), space: rgb, alpha: 0}

### Text Scale
- **Text** (#0d0c22): Frequency rank #1 (5338 occurrences); token importance textCandidate: repeated text-role usage (5338 hits). Role: text. {authored: rgb(13, 12, 34), space: rgb}
- **Text-2** (#beb9ca): Frequency rank #3 (768 occurrences); token importance textCandidate: repeated text-role usage (768 hits). Role: text. {authored: rgb(190, 185, 202), space: rgb}
- **Text-3** (#060318): Frequency rank #4 (248 occurrences); token importance textCandidate: repeated text-role usage (248 hits). Role: text. {authored: rgb(6, 3, 24), space: rgb}
- **Text-4** (#212121): Frequency rank #5 (113 occurrences); token importance textCandidate: repeated text-role usage (113 hits). Role: text. {authored: rgb(33, 33, 33), space: rgb}
- **Text-5** (#524b63): Frequency rank #6 (110 occurrences); token importance textCandidate: repeated text-role usage (110 hits). Role: text. {authored: rgb(82, 75, 99), space: rgb}
- **Text-6** (#6e6d7a): Frequency rank #8 (64 occurrences); token importance textCandidate: repeated text-role usage (64 hits). Role: text. {authored: rgb(110, 109, 122), space: rgb}
- **Text-7** (#655c7a): Frequency rank #10 (38 occurrences); token importance textCandidate: repeated text-role usage (38 hits). Role: text. {authored: rgb(101, 92, 122), space: rgb}

### Interactive
- **Local-accent** (#faf9fb): Frequency rank #7 (81 occurrences); token importance localAccent: localized usage with limited global footprint. Role: border. {authored: rgb(250, 249, 251), space: rgb}
- **Local-accent-2** (#ecebf0): Frequency rank #9 (48 occurrences); token importance localAccent: localized usage with limited global footprint. Role: border. {authored: rgb(236, 235, 240), space: rgb}

## Typography

Typography uses Mona Sans across extracted hierarchy roles. Keep hierarchy mapped to these token rows before adding decorative type styles.

Uses Mona Sans throughout for a uniform feel. Weight range spans regular, semi-bold, medium. Sizes range from 12px to 16px.

### Type Scale Evidence
| Role | Font | Size | Weight | Line Height | Letter Spacing | Stack / Features | Notes |
|------|------|------|--------|-------------|----------------|------------------|-------|
| Frequency rank #1 | Mona Sans | 14px | 400 | 28px | normal | Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif; features: "ss01" | Extracted token |
| Frequency rank #2 | Mona Sans | 13px | 600 | 13px | normal | Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif; features: "ss01" | Extracted token |
| Frequency rank #3 | Mona Sans | 12px | 500 | 12px | normal | Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif; features: "ss01" | Extracted token |
| Frequency rank #4 | Mona Sans | 16px | 400 | 28px | normal | Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif; features: "ss01" | Extracted token |
| Frequency rank #5 | Mona Sans | 12px | 400 | normal | normal | Mona Sans, Helvetica Neue, Helvetica, Arial, sans-serif | Extracted token |

## Layout

Layout rhythm is inferred from spacing tokens and responsive breakpoint evidence.

### Spacing System
| Token | Value | Px | Notes |
|------|-------|----|-------|
| space-4 | 4px | 4 | Extracted spacing token |
| space-5 | 5px | 5 | Extracted spacing token |
| space-6 | 6px | 6 | Extracted spacing token |
| space-1 | 8px | 8 | Extracted spacing token |
| space-8 | 10px | 10 | Extracted spacing token |
| space-2 | 12px | 12 | Extracted spacing token |
| space-3 | 16px | 16 | Extracted spacing token |
| space-9 | 22px | 22 | Extracted spacing token |
| space-7 | 24px | 24 | Extracted spacing token |
| space-10 | 32px | 32 | Extracted spacing token |

## Elevation & Depth

Keep depth flat unless validated shadow or interaction evidence appears in the extraction payload. Do not invent shadows beyond this evidence boundary.

### Shadow Evidence
| Shadow Token | Layers | Details |
|--------------|--------|---------|
| n/a | 0 | No validated shadow payload |

### Interaction Signals
| Theme | Signal | Evidence |
|-------|--------|----------|
| Light | outline-style | solid |
| Light | outline-color | rgb(13, 12, 34) ; rgb(190, 185, 202) ; rgb(255, 255, 255) |
| Light | outline-width | 3px ; 0px |
| Light | outline-offset | 0px ; -3px |
| Light | transform | matrix(1, 0, 0, 1, 0, 0) ; matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00333333, 0, 0, 0, 1) ; matrix(1, 0, 0, 1, 1, 0) |

## Shapes

Shape language maps directly to rounded tokens. Keep component corners consistent with the role mapping below before introducing bespoke geometry.

### Radius Roles
| Token | Value | Px | Role Mapping |
|------|-------|----|--------------|
| radius-4 | 2px | 2 | Hairline corner |
| radius-2 | 4px | 4 | Subtle corner |
| radius-5 | 6px | 6 | Subtle corner |
| radius-3 | 8px | 8 | Control corner |
| radius-1 | 12px | 12 | Control corner |

### Geometry Evidence
| Radius Token | Shape | Units |
|--------------|-------|-------|
| radius-1 | 12px | px |
| radius-2 | 4px | px |
| radius-3 | 8px | px |
| radius-4 | 2px | px |
| radius-5 | 6px | px |

## Components

(none detected)

## Do's and Don'ts

Guardrails tie generation choices back to validated tokens, component patterns, and evidence-backed hierarchy.

| Do | Don't |
|----|---------|
| Do maintain consistent spacing using the base grid | Don't make unsupported claims about absent visual features |
| Do maintain WCAG AA contrast ratios (4.5:1 for normal text) | Don't mix rounded and sharp corners in the same view |
| Do use the primary color only for the single most important action per screen |  |
| Do verify evidence before writing new design-system guidance |  |

## Responsive Evidence

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <= 352px | (max-width: 352px) |
| Mobile | <= 425px | (max-width: 425px) |
| Mobile | <= 440px | (max-width: 440px) |
| Mobile | <= 500px | (max-width: 500px) |
| Mobile | <= 576px | (max-width: 576px) |
| Breakpoint 6 | <= 768px | (max-width: 768px) |
| Breakpoint 7 | <= 845px | (max-width: 845px) |
| Mobile | >= 576px | (min-width: 576px) and (max-height: 660px) |
| Breakpoint 9 | Unknown | (hover: hover) |

## Agent Prompt Guide

### Example Component Prompts
- Create button component using validated primary color role and spacing tokens.
- Create card component with mapped radius role and evidence-backed elevation.
- Create form input component using inferred typography hierarchy and border roles.

### Iteration Guide
1. Start with extracted palette and typography roles only.
2. Map spacing and radius directly from token tables before visual polish.
3. Apply component patterns one section at a time and compare against source intent.
4. Keep elevation claims tied to explicit evidence in output.
5. Iterate with smallest diffs and re-check section hierarchy after each change.