Studio
Export Engine
Turn your choices into design tokens for CSS, SCSS, Tailwind, React and JSON.
- Tokens87
- Colors
- TypographyNot included
- Spacing · Radius12 steps · 7 radii
Live preview
Acme
Tokens, rendered.
Every value on this card comes from the tokens below: colors, fonts, the fluid scale, spacing and radii. Change anything in the studios and this updates instantly.
Primary actionSecondaryNew
Settings
Output
// Acme - design tokens generated by DesignHub (https://github.com/yakew7/DesignHub)
// Angular Material theme. The palette keys 50 to 900 come from the brand's shades;
// the accent tones A100 to A700 stand in for the same palette's 200, 300, 400 and
// 500 shades (Angular's own accent palettes also raise chroma, which plain shades
// cannot express). Contrast picks white or black, whichever reads on the tone.
@use "@angular/material" as mat;
$acme-primary: mat.define-palette((
50: #f1f6ff,
100: #e2e9ff,
200: #ccd5ff,
300: #b1bdff,
400: #8e9aff,
500: #757bff,
600: #6366f1,
700: #5050cd,
800: #3e3da6,
900: #2f2e83,
A100: #ccd5ff,
A200: #b1bdff,
A400: #8e9aff,
A700: #757bff,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #000000,
500: #000000,
600: #000000,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000,
),
));
$acme-accent: mat.define-palette((
50: #fff0f9,
100: #ffdef2,
200: #ffc3e5,
300: #ff9dd2,
400: #f472b6,
500: #dc4c9c,
600: #c03184,
700: #a21f6d,
800: #821356,
900: #680e44,
A100: #ffc3e5,
A200: #ff9dd2,
A400: #f472b6,
A700: #dc4c9c,
contrast: (
50: #000000,
100: #000000,
200: #000000,
300: #000000,
400: #000000,
500: #000000,
600: #ffffff,
700: #ffffff,
800: #ffffff,
900: #ffffff,
A100: #000000,
A200: #000000,
A400: #000000,
A700: #000000,
),
));
$acme-theme: mat.define-light-theme((
color: (primary: $acme-primary, accent: $acme-accent),
));
$acme-dark-theme: mat.define-dark-theme((
color: (primary: $acme-primary, accent: $acme-accent),
));
Assets
Ready-made files from the other studios, always in sync.
Background
waves · seed 1337 · 1600×900
Effects
Glass, neumorphism, shadow, inner shadow, glow, border and grain as .fx-* classes.
Optimized SVG
badge.svg · 1.3 KB → 543 B (−58%)
Accessibility report
Contrast 4/4 passing, plus vision, readability and touch targets.