Techniques
May 18, 2026
UX Tools / System Reference
Design System
Every token, text style, component, and mark used across UX Tools — collected on one page for reference. If it isn’t here, it isn’t in the system.
01 / Color Tokens
Colors
Grayscale
Gray 1
RGB 18 18 18
Gray 2
RGB 65 65 65
Gray 3
RGB 113 113 113
Gray 4
RGB 160 160 160
Gray 5
RGB 208 208 208
Gray 6
RGB 237 237 237
Secondary Colors
Orange
Light / Base / Dark
Brown
Light / Base / Dark
Yellow
Light / Base / Dark
Lime
Light / Base / Dark
Green
Light / Base / Dark
Blue
Light / Base / Dark
Indigo
Light / Base / Dark
Pink
Light / Base / Dark
Plum
Light / Base / Dark
02 / Text Styles
Typography
Heading 1
KMR Apparat 375
The strongest signal in design tools
Page Title
KMR Apparat 300
Design tool intel in your inbox
Featured Headline
KMR Apparat 375
How prototyping has changed
Heading 3
KMR Apparat 375
Pages are becoming teammates
Body
Söhne 400
Insider leaks. Early access to tools. Deep dives on where design is going, and what’s worth your attention.
Body Small
Söhne 400
Industry intel. Tool breakdowns. Honest takes on what’s working and what’s just hype.
Eyebrow
PP Fraktion Mono 600
New Releases
Article Meta
PP Fraktion Mono 400
May 18, 2026 — Techniques
Primary Button Dark
PP Fraktion Mono 700
Subscribe
03 / Components
Buttons & Controls
04 / Components
Cards & Modules
Home Feed Card
Article teaser
Home Section Title
Section header
Insight Card
Survey stat
Newsletter Form
Email capture
05 / Identity
Marks & Accents
UX Tools Logo
Wordmark
Plus
Corner marker
Dot
Accent dot
Blinking Cursor
Dark On
05 — Text Systems
Links & Inline Styles
Explore the full survey results in depth.
Link
Global preset
Links inside article bodies use this underlined treatment instead.
Article inline link
Article bodies
Use auto-layout for responsive frames.
Inline Code
Code style preset
May 18, 2026 · 8 min read
Article Meta
Dates & bylines
06 — Data Visualization
Charts & Data
Bar Chart
Survey rankings
Block Chart
Demographic splits
3D Chart
Hero data moments
Figma
UI Design
87%
(4,214 votes)
Chart Tooltip
Hover detail
07 — Content Listings
Feed & List Patterns
Article Feed Card
Blog index
Archive Article Item
Archive rows
List Link
Default / Active
Design Tool List Item
Tools directory
08 — Social Proof
Testimonials
Testimonial Quote
Slider content
"A brilliant snapshot of where design tooling is heading."
Priya Natarajan
Staff Product Designer
Testimonial Item
Compact quote
Testimonial Avatar
Default / Active
09 — Wayfinding
Navigation Patterns
TOC Link
Survey navigation
Sort by:
Most used
Highest rated
Sort Dropdown
Toggle & item
How is the survey data collected?
Responses are gathered from thousands of designers worldwide each year.
Accordion
FAQ disclosure
Nav Dropdown Item
Main navigation
10 — Audio
Podcast Module
Podcast Card
Episode teaser
Guest Avatar
Guest ticker
Platform Card
Listen links
11 — Layers
Tooltips & Overlays
Tooltip
Hover detail
Avatar w Tooltip
Hover reveal
rgba(0, 0, 0, 0.8)
Overlay Backdrop
Dimming layer
Inverted content sits on this surface
Dark Surface
Inverted sections