Ember-inspired - Restaurant - warm red, punchy grotesque
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 Emberdesign system, and not affiliated with or endorsed by Ember.
Design preview
Live rendered from generated tokens - not an image. These are real components with your brand applied.
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>.
Dark variant inverts neutrals and lifts the primary for contrast on dark surfaces.
Code preview
:root {
--my-colour-primary: #b91c1c;
--my-colour-secondary: #713f12;
--my-font-heading: Bricolage Grotesque;
--my-font-body: Figtree;
--my-radius: soft;
}{
"colors": {
"primary": {
"default": "#b91c1c"
},
"secondary": {
"default": "#713f12"
},
"neutral": {
"white": "#ffffff",
"black": "#101010",
"gray-light": "#f5f5f5",
"gray": "#999999",
"gray-dark": "#404040",
"border": "#d5d5d5"
}
},
"typography": {
"headingFont": {
"source": "google",
"family": "Bricolage Grotesque",
"fallback": "sans-serif"
},
"bodyFont": {
"source": "google",
"family": "Figtree",
"fallback": "sans-serif"
},
"headingWeight": 800,
"typeScale": [
1.2,
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 Ember-inspired preset or build from scratch - your brand in, a bespoke system out. All 24 presets free, MIT licensed.