··Free preset - all 24 free

Atelier-inspired - Editorial - ink & rust, baskerville

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

AniStyl’s own interpretation, built from publicly visible brand cues. Not the Atelierdesign system, and not affiliated with or endorsed by Atelier.

Design preview

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

Issue 14 - Autumn
The slow issue

On craft, patience, and why the best interfaces are the ones you stop noticing.

Ch. 1The unhurried grid
Ch. 2Ink & margins

Tokens

Palette
primary #201d1asecondary #9a3412whiteblackgray-lightgray
Semantics: success #238b4e · warning #ba7908 · danger #c11f1f · info #1f6feb
Spacing & layout
Space scale 18 → 22px · Container 1600px · Grid 12 cols
Breakpoints: sm 320px · md 768px · lg 1024px · xl 1280px
Radius: soft · Shadows: normal · Motion: normal

Typography

Heading: Libre Baskerville (700 · none)Body: Work Sans (400)Mono: 'SF Mono', Menlo, Consolas, monospace
Scale 1.25 → 1.333 · Base 16 → 18px · Line heights: tight 1.2, normal 1.4, relaxed 1.6
H1 HeadingLibre Baskerville
H2 HeadingLibre Baskerville
H3 HeadingLibre Baskerville

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>.

Issue 14 - Autumn
The slow issue

On craft, patience, and why the best interfaces are the ones you stop noticing.

Ch. 1The unhurried grid
Ch. 2Ink & margins

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

Code preview

CSS variables
:root {
 --my-colour-primary: #201d1a;
 --my-colour-secondary: #9a3412;
 --my-font-heading: Libre Baskerville;
 --my-font-body: Work Sans;
 --my-radius: soft;
}
tokens.json (excerpt)
{
  "colors": {
    "primary": {
      "default": "#201d1a"
    },
    "secondary": {
      "default": "#9a3412"
    },
    "neutral": {
      "white": "#ffffff",
      "black": "#101010",
      "gray-light": "#f5f5f5",
      "gray": "#999999",
      "gray-dark": "#404040",
      "border": "#d5d5d5"
    }
  },
  "typography": {
    "headingFont": {
      "source": "google",
      "family": "Libre Baskerville",
      "fallback": "serif"
    },
    "bodyFont": {
      "source": "google",
      "family": "Work Sans",
      "fallback": "sans-serif"
    },
    "headingWeight": 700,
    "typeScale": [
      1.25,
      1.333
    ]
  },
  "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 this Atelier-inspired preset or build from scratch - your brand in, a bespoke system out. All 24 presets free, MIT licensed.

Open in builder (free)Create yours - Free
Free preset - download instantly, all 24 free

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