Sustainable growth
A flexible container for grouping related content and a clear primary action.
New
Anh DS — Source Pages
Design System
A token-driven design system built from semantic color, type, spacing, radius, elevation and motion — anchored by a #E10D17 primary. Choose a source page below.
Foundations
Color →
11-step primary ramp, neutrals and semantic roles.
Aa
Foundations
Typography →
Inter + JetBrains Mono, a modular type scale and weights.
Foundations
Spacing & Shape →
Spacing scale, radius, elevation and motion tokens.
PrimarySecondary
Components
Buttons →
Six roles, three sizes, states and attached groups.
BrandActive
Components
Badges →
Compact status and metadata labels.
you@example.com
Components
Forms →
Inputs, toggles and selection controls.
Components
Cards →
Elevated surfaces composing media, content and actions.
InfoError
Components
Feedback →
Inline alerts for status and system messages.
Color
An 11-step primary ramp generated from #E10D17, full Neutral and Grey scales, Dark & Light alpha ramps, and semantic roles. Click any swatch to copy its value.
Primary ramp
Neutral
Grey
Dark Alpha
Light Alpha
Semantic roles
Typography
Our fully tokenized typographic system uses defined scales, styles, and weights to create hierarchy and guide users through products and experiences.
Responsive
Adjusts across screen sizes using token-based scaling
Tokens
Use provided JSON code to quickly generate Figma styles
Variables
Modify every detail of the text styles using linked variables
Typeface
Inter
Type scale
Display
Page heading
Section heading
Subsection title
Card heading
Lead paragraph text
Body copy — the default reading size for content.
Secondary and supporting text
CAPTION / LABEL / TOKEN
Weights
Aa
Regular · 400
Aa
Medium · 500
Aa
Semibold · 600
Aa
Bold · 700
Aa
Extrabold · 800
Spacing & Shape
A 4px base unit drives spacing rhythm. Radius, elevation and motion tokens give every surface consistent shape and behavior.
Spacing scale
Radius
xs
4px
sm
6px
md
10px
lg
14px
xl
22px
full
999px
Elevation
xs
sm
md
lg
xl
Motion
Fast — 120ms
Base — 200ms
Slow — 320ms
Buttons
Reusable action primitives built from semantic color, spacing, type, radius, elevation and motion tokens.
Variants
Primary
Secondary
Accent
Ghost
Danger
Success
Sizes
Small · 36px
Medium · 44px
Large · 52px
Full width
States
Default
With icon
Loading
Disabled
Icon only
Attached group
Accessibility
✓
Visible focusA 3px
--ring appears on :focus-visible.✓
Icon labelsIcon-only buttons require an
aria-label.✓
Stable layoutLoading swaps content in place — size never shifts.
✓
ContrastText on every variant meets WCAG AA.
Badges
Compact status and metadata labels in semantic roles, each pairing a tinted background with an accessible foreground.
Roles
Brand
Neutral
Active
Pending
Error
Info
Forms
Inputs, toggles and selection controls share the focus ring, semantic states and consistent sizing.
Text inputs
We'll never share your address.
Use letters, numbers and dashes only.
Toggles & selection
Cards
Elevated surfaces that compose media, content and actions. They lift on hover using motion and elevation tokens.
Examples
Team activity
Recent collaborators on this project this week.
AL
JS
MK
+4
72% of weekly goal
Feedback
Inline alerts communicate status with a semantic color, icon and message — for confirmations, info, warnings and errors.
Alerts
Changes saved
Your design tokens were published successfully.
New version available
Anh DS v1.1 introduces data-viz tokens.
Approaching limit
You've used 90% of your monthly export quota.
Couldn't connect
Check your network and try again.