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)