Black
#070707
Hubstic design system
A shared visual and interaction language for building clear, recognizable, and carefully crafted Hubstic experiences.
Color
Six colors cover every approved background, text, and emphasis role.
White
#FFFFFF
Orange
#FF5200
Dark gray
#131313
Gray
#696969
Light gray
#FAFAFA
Typography
Wanted Sans uses medium headings and normal body copy across a compact fluid scale.
Display
Distinct by design
Heading large
Ideas made tangible
Heading
Build with clarity
Subheading
A useful hierarchy
Body large
Long-form introductions and supporting copy.
Body
Readable content for interfaces and articles.
Small
Secondary information and metadata.
Spacing
A short fluid scale keeps layouts consistent without fixed device jumps.
Fluid scale
2xs
xs
sm
md
lg
xl
2xl
Radii
Three shapes, no shadows, and no decorative strokes.
Small
0.5rem
Main
1rem
Full
100vw
Cards
Cards group one idea through surface contrast and a clear content hierarchy.
Content cards
Article
Editorial card
A title and short summary create a clear entry point.
Read article →
Case study
Outcome-led card
Lead with the result, then invite exploration.
View work →
Metric
42% faster
Isolate one meaningful measure and explain it.
Icons
Icons clarify familiar actions and remain secondary to language.
Core icons
Motion
Movement explains change, responds immediately, and respects reduced-motion preferences.
Motion preference: full concept
Content
Write for the next decision with specific verbs and useful recovery.
Clear
Save your changes?
Your draft will remain available if you leave now.
Vague
Are you sure?
Click OK to continue or cancel to cancel.