Updated 2 hours ago
Design System Release
Core tokens have been updated across all surfaces.
Secondary context and supporting details.
12 min read
·
By design team
Style Guide
Primary and secondary brand colors. Click any color to copy its HEX value.
Linear gradients used across surfaces.
from-primary-50
via-primary-0 via-60%
to-secondary-50
from-primary-50
to-white
from-secondary-50
to-white
from-primary-200
via-primary-50 via-60%
to-secondary-100
Primary Background
Gradient
Foreground color tokens used for text and icons.
text-fg-strong — Strong heading
text-fg — Default body text
text-fg-muted — Secondary / muted text
text-fg-subtle — Metadata / helper text
text-fg-disabled — Disabled text
text-fg-primary — Brand accent
text-fg-primary — Brand accent
text-fg-success
text-fg-warning
text-fg-danger
text-fg-info
text-fg-inverse-strong
text-fg-inverse
text-fg-inverse-muted
text-fg-inverse-subtle
text-fg-inverse-disabled
How text tokens compose a content card.
Core tokens have been updated across all surfaces.
Secondary context and supporting details.
Core tokens have been updated across all surfaces.
Secondary context and supporting details.
Common surface and container styles.
bg-surface / shadow-card
bg-surface
from-primary-50 to-white
>bg-surface
bg-surface-subtle / shadow-card
bg-surface-subtle
from-primary-50 to-white
from-secondary-50 to-white (to-br)
Common surface and container styles.
bg-surface / shadow-card
bg-surface
from-primary-50 to-white
>bg-surface
bg-surface-subtle / shadow-card
bg-surface-subtle
from-primary-50 to-white
from-secondary-50 to-white (to-br)
Containers placed on the gradient.
bg-surface / shadow-card
bg-surface
from-primary-50 to-white
>bg-surface
bg-surface-subtle / shadow-card
bg-surface-subtle
from-primary-50 to-white
from-secondary-50 to-white (to-br)
Surface tokens with translucency and backdrop blur.
Elevated glass surface for primary content.
Lightweight glass surface with minimal emphasis.
Elevated muted surface for secondary content.
Muted surface for supporting information.
Elevated subtle surface for low-emphasis content.
Subtle surface for background groupings.
Frosted gradient surface with primary accents.
Frosted gradient surface with secondary accents.
Status and feedback colors.
Success
bg-surface-success
Warning
bg-surface-warning
Danger
bg-surface-danger
Info
bg-surface-info
Border radius tokens from sharp to fully round.
Filled, frosted, capsule, ghost, and sizes.
Typography scales for headings and body.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Consistent spacing tokens for layout and components.
Cards with different content applying spacing and typography.
Oct 12, 10:00 AM - 11:00 AM
Senior Designer
john.doe@example.com
Everything you need to manage your team.
Manage how you receive alerts.
Email Alerts
Receive updates via email.
Push Notifications
Alerts on your mobile device.
Send an invitation to join your workspace.
Guidelines for shadows, spacing, and colors.
Dark, tight, drop shadows feel unnatural and heavy.
Soft, diffused, downward shadows (e.g. shadow-card) feel elevated.
Too tight or inconsistent spacing makes content hard to read.
Subtitle right below
Generous, consistent padding (e.g. p-6) and clear gaps (gap-4).
Clear separation
Low contrast text on backgrounds is unreadable.
Ensure high contrast (e.g. dark text on light bg).
Using the same font size/weight for titles and body creates a flat structure.
Article Title
This is the description of the article which looks exactly like the title.
Use font sizes and weights (e.g. bold vs normal) to separate content clearly.
Article Title
This is the description of the article which is visually distinct.
Using two primary buttons side-by-side confuses the user on what to do.
Use primary for the main action and ghost/secondary for secondary actions.
Adding padding inside a scroll wrapper cuts off items abruptly during scroll.
Apply padding inside the scrolling area (e.g. px-4) so items bleed to the edge.
Overusing intense colors (primary-900, secondary-900) makes the UI heavy and overwhelming.
Everything in this card screams for attention, tiring the user's eyes.
Use intense colors sparingly as accents or interactive elements on lighter surfaces.
The content is easy to read, with the primary color used only to guide action.