UOL Tech — a living style guide.
Not a PDF. Every token, component and motion curve on this page is real and interactive — click the swatches, break the form, replay the easing. This is how I hand a UI system to engineers.
Color tokens
Two-tone system pulled from the UOL Tech mark — deep navy carries structure, mustard carries action. Click any token to copy its hex.
Typography scale
Space Grotesk for headings — geometric, techy, matches the mark's monospaced soul. Hanken Grotesk for body. JetBrains Mono for data.
Spacing & radius
A 4px base grid. Radius is a token too — drag the slider and watch every card on this page follow it.
Spacing scale — 4 / 8 / 16 / 24 / 40
Radius token — live: 12px
Buttons
Three weights, one loading state. Press the primary — it runs the whole lifecycle: loading, done, reset.
Inputs
Focus ring in accent at 22% — visible on both themes. The email field validates as you type.
Chips & tabs
Chips toggle. The tab pill slides — one moving part, everything else stays still.
Overview shows the account at a glance — balance, activity, and what needs attention today.
Alerts
Fire them yourself. Toasts enter with a spring, self-dismiss at four seconds.
Cards & elevation
Flat at rest, one elevation on hover. Elevation means "you can act on me" — nothing floats without a reason.
Usage this month
4,208 API calls — 61% of plan. Renews on the 1st.
Latest deploy
v2.4.1 shipped 14 minutes ago. All checks green.
Team activity
3 pull requests waiting on review from you.
Motion lab
Three curves cover the whole product. Replay each — motion is a token, not a garnish.