Skip to content

Studio

Export Engine

Turn your choices into design tokens for CSS, SCSS, Tailwind, React and JSON.

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

8px
12px

Output

_theme.scss
// 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

    Edit
  • Effects

    Glass, neumorphism, shadow, inner shadow, glow, border and grain as .fx-* classes.

    Edit
  • Optimized SVG

    badge.svg · 1.3 KB → 543 B (−58%)

    Edit
  • Accessibility report

    Contrast 4/4 passing, plus vision, readability and touch targets.

    Edit