Atelier - 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.
Design preview
Live rendered from generated tokens - not an image. These are real components with your brand applied.
On craft, patience, and why the best interfaces are the ones you stop noticing.
Tokens
Breakpoints: sm 320px · md 768px · lg 1024px · xl 1280px
Radius: soft · Shadows: normal · Motion: normal
Typography
Components
46 components in 6 groups - ship only what you need. This preset uses the full library.
Dark mode
Every system ships a dark theme generated from the same palette. Toggle data-theme="dark" on <html>.
On craft, patience, and why the best interfaces are the ones you stop noticing.
Dark variant inverts neutrals and lifts the primary for contrast on dark surfaces.
Code preview
:root {
--my-colour-primary: #201d1a;
--my-colour-secondary: #9a3412;
--my-font-heading: Libre Baskerville;
--my-font-body: Work Sans;
--my-radius: soft;
}{
"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 Atelier or build from scratch - your brand in, a bespoke system out. Free, MIT licensed.