Case Study
Design systems pay for themselves in one quarter
What 74% adoption in a single engagement taught us about token discipline.
EH
Eduard Hambardzumyan
UI Kit
The building blocks of the PromptUX site — colors, type, buttons, and core components, documented for implementation. Font: Helvetica Neue.
01
Colors
Brand indigo with neutral ink and paper scales. Tint neutrals slightly toward the brand hue where possible.
Brand
Primary indigo and its tints/shades. #191F76 is the core brand color.
Indigo / dark sections
#0C0B2E
Brand (core)
#191F76 · brand
Brand 2 (hover)
#2D3491 · brand-2
Brand 3
#4A52B6 · brand-3
Brand 4
#9098D8 · brand-4
Brand light
#B6BCEA
Brand tint
#E8E9F3 · brand-tint
Ink (text)
Foreground / type colors, darkest to lightest.
Ink
#0F1115 · ink
Ink 2
#2A2D33 · ink-2
Ink 3
#5A5D63 · ink-3
Ink 4
#8B8E95 · ink-4
Paper (surfaces)
Backgrounds, lightest to slightly tinted.
Paper
#FFFFFF · paper
Card grey
#F8F8F8
Paper 2
#F5F5F6 · paper-2
Paper dim
#ECECEE · paper-dim
Line (borders)
Hairline dividers and borders.
Line
#E5E5E8 · line
Line 2
#D2D2D6 · line-2
02
Typography
Helvetica Neue throughout. Titles pair a bold lead with a regular-weight accent. Fluid sizing via clamp().
Weights
Aa
Regular
400
Aa
Medium
500
Aa
Semibold
600
Aa
Bold
700
Type scale
Display / Title — H1 & H2
clamp(40 → 80px) · Bold 700
Why Companies Choose Us.
Sub-section H3
22px · Semibold 600
Faster by design
Body large
18px · Regular 400
Expert-driven product, UX, and growth execution.
Body
16px · Regular 400
Most engagements start with a Sprint.
Label / Eyebrow
16px · Medium 500
How we start working together
Small
13px · Regular 400
Apr 2026 · 7 min read
Caption
12px · Regular 400
© 2026 PromptUX
04
Header
Floating pill, 1440px max-width, 20px inset. Two visual states; collapses to a hamburger below the medium breakpoint.
Standard — at rest over a dark hero
Scrolling — over content
Mobile — standard
promptux
Let's talk
Mobile — scrolling
promptux
Let's talk
Mobile — menu open
promptux
Let's talk
06
Thinking card
Used on the Thinking page and the home Notes section. Image with category chip, Helvetica meta, hover scales the image and tints the title; image avatar.
07
Explore cursor
On the Work grid and home Works bookshelf, the native cursor is hidden over the cards and this frosted badge follows the pointer on desktop.
Explore
96px circle · bg white/15 + backdrop-blur · border white/35 · follows cursor, scales 0.5 → 1 on hover.