Utilities

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

Frequency-Based Extraction

extractedfrequency-based

Design tokens extracted from CSSOM frequency analysis without LLM interpretation.

10Colors
5Type styles
10Spacing
5Radii

Colors

Brand

color-1primary
Frequency rank #1 (2668 occurrences)
color-2secondary
Frequency rank #2 (889 occurrences)
color-3secondary
Frequency rank #3 (514 occurrences)

Text

color-4text
Frequency rank #4 (259 occurrences)
color-5text
Frequency rank #5 (165 occurrences)
color-6text
Frequency rank #6 (113 occurrences)
color-7text
Frequency rank #7 (68 occurrences)
color-8text
Frequency rank #8 (64 occurrences)
color-9text
Frequency rank #9 (40 occurrences)
color-10text
Frequency rank #10 (38 occurrences)

Typography

Frequency rank #4
The quick brown fox jumps
Mona Sans16px · 400 · 28px
Frequency rank #1
The quick brown fox jumps
Mona Sans14px · 400 · 28px
Frequency rank #3
The quick brown fox jumps
Mona Sans13px · 600 · 13px
Frequency rank #2
The quick brown fox jumps
Mona Sans12px · 400 · 16px
Frequency rank #5
The quick brown fox jumps
Mona Sans12px · 400 · normal

Spacing & Shape

Spacing

space-4
4px
space-6
5px
space-10
6px
space-1
8px
space-9
10px
space-2
12px
space-5
16px
space-3
20px
space-8
24px
space-7
266px

Border Radius

radius-18px
radius-24px
radius-312px
radius-42px
radius-56px
## Overview

Design tokens extracted from CSSOM frequency analysis without LLM interpretation.

## Colors
- **Color-1** (#0d0c22): Frequency rank #1 (2668 occurrences)
- **Color-2** (#9e9ea7): Frequency rank #2 (889 occurrences)
- **Color-3** (#ffffff): Frequency rank #3 (514 occurrences)
- **Color-4** (#060318): Frequency rank #4 (259 occurrences)
- **Color-5** (#3d3d4e): Frequency rank #5 (165 occurrences)
- **Color-6** (#212121): Frequency rank #6 (113 occurrences)
- **Color-7** (#524b63): Frequency rank #7 (68 occurrences)
- **Color-8** (#6e6d7a): Frequency rank #8 (64 occurrences)
- **Color-9** (#655c7a): Frequency rank #9 (40 occurrences)
- **Color-10** (#3a3546): Frequency rank #10 (38 occurrences)

## Typography

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

## Elevation

This design uses no shadows. Depth is conveyed through border contrast and surface color variation.

## Components

(none detected)

## Do's and Don'ts
- Do maintain consistent spacing using the base grid
- Do use the primary color only for the single most important action per screen
- Don't mix rounded and sharp corners in the same view
- Do maintain WCAG AA contrast ratios (4.5:1 for normal text)
Design Extractor

Turn any website into a structured design spec that AI coding agents can use to build pixel-perfect UI.

© 2026 Design Extractor. All rights reserved.

Dribbble - Discover the World’s Top Designers & Creative Professionals — Design Tokens & System | Design Extractor