··Pro preset

Supabase - Devtool - emerald on dark, IBM Plex

Same AniStyl engine, completely different system. Generated from tokens, typography, components and layout - MIT licensed output. Open in the builder and make it yours.

Design preview

Live rendered from generated tokens - not an image. These are real components with your brand applied.

SQL Editor

table	rows
users	12.4k
events	1.1M

Connected Supabase is live.

Tokens

Palette

primary #3ecf8esecondary #1a1a1awhiteblackgray-lightgray

Semantics: success #238b4e · warning #ba7908 · danger #c11f1f · info #1f6feb

Spacing & layout

Space scale 14 → 16px · Container 1600px · Grid 12 cols
Breakpoints: sm 320px · md 768px · lg 1024px · xl 1280px
Radius: soft · Shadows: normal · Motion: normal

Typography

Heading: IBM Plex Sans (600 · none)Body: IBM Plex Sans (400)Mono: 'SF Mono', Menlo, Consolas, monospace

Scale 1.125 → 1.2 · Base 14 → 15px · Line heights: tight 1.2, normal 1.4, relaxed 1.6

H1 HeadingIBM Plex Sans

H2 HeadingIBM Plex Sans

H3 HeadingIBM Plex Sans

Components

46 components in 6 groups - ship only what you need. This preset uses the full library.

ButtonsLinksBadgeChip / tag Keyboard keyIcons (Lucide set)Avatar Divider / separatorSpacerInputs & fields (switch, checkbox…)Joined inputs File upload / dropzone Search bar Calendar / date picker CardProse / article + 30 more

Sample

Card

Component rendered with this system’s tokens.

Forms

BadgeTag

Dark mode

Every system ships a dark theme generated from the same palette. Toggle data-theme="dark" on <html>.

SQL Editor

table	rows
users	12.4k
events	1.1M

Connected Supabase is live.

Dark variant inverts neutrals and lifts the primary for contrast on dark surfaces.

Code preview

CSS variables

:root {
 --my-colour-primary: #3ecf8e;
 --my-colour-secondary: #1a1a1a;
 --my-font-heading: IBM Plex Sans;
 --my-font-body: IBM Plex Sans;
 --my-radius: soft;
}

tokens.json (excerpt)

{
  "colors": {
    "primary": {
      "default": "#3ecf8e"
    },
    "secondary": {
      "default": "#1a1a1a"
    },
    "neutral": {
      "white": "#ffffff",
      "black": "#101010",
      "gray-light": "#f5f5f5",
      "gray": "#999999",
      "gray-dark": "#404040",
      "border": "#d5d5d5"
    }
  },
  "typography": {
    "headingFont": {
      "source": "google",
      "family": "IBM Plex Sans",
      "fallback": "sans-serif"
    },
    "bodyFont": {
      "source": "google",
      "family": "IBM Plex Sans",
      "fallback": "sans-serif"
    },
    "headingWeight": 600,
    "typeScale": [
      1.125,
      1.2
    ]
  },
  "layout": {
    "screenMin": 320,
    "screenMax": 1280,
    "containerMax": 1600,
    "breakpoints": {
      "sm": 320,
      "md": 768,
      "lg": 1024,
      "xl": 1280
    },
    "radius": "soft",
    "gridColumns": 12
  },
  "effects": {
    "shadows…

Create your own

Start from Supabase or build from scratch - your brand in, a bespoke system out. Free, MIT licensed.

Use Supabase - Open in builder Create yours - Free

Pro preset - unlock with Pro ($19 once) to download all 46 components

← Back to all 24 examples · Open this system in builder