Color intelligence
Semantic roles, primitives, usage frequency, gradients, and states.
Website in. Design-system evidence out.
See the system behind any interface.
Analyze a public website and turn its visual language into structured colors, typography, spacing, components, and exportable design tokens.
Try an example:
Free to try · no account · nothing stored
Analysis preview
Acme design system
5
pages
42
colors
8pt
grid
Semantic colors
12 tokens
primary
signal
warning
error
Typography
Aa
Geist Sans · 7 styles
Spacing
Tokens StudioW3C JSONCSS variables
A report you can use
From visual clues to shared language.
Basic Designs separates observed evidence from inferred structure, so designers and developers can explore the same system without treating automation as design authority.
Typography
Font families, hierarchy, sizes, weights, line heights, and roles.
Spacing & structure
Spacing scales, radii, shadows, containers, grids, and breakpoints.
Ready-to-use exports
Tokens Studio, W3C DTCG JSON, and CSS custom properties.
How it works
One input. A navigable design-system report.
- 01Analyze representative pages
The crawler reads up to five same-domain pages and records rendered interface evidence.
- 02Structure the findings
Observed values become primitives, semantic roles, components, and confidence signals.
- 03Inspect and export
Review the evidence, copy values, and continue in Figma or code with interoperable exports.