Notion-inspired - Warm minimal - serif headings, soft
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 Notiondesign system, and not affiliated with or endorsed by Notion.
Design preview
Live rendered from generated tokens - not an image. These are real components with your brand applied.
Write less, but better.
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>.
Write less, but better.
Dark variant inverts neutrals and lifts the primary for contrast on dark surfaces.
Code preview
:root {
--my-colour-primary: #000000;
--my-colour-secondary: #e9e5dc;
--my-font-heading: Lora;
--my-font-body: Inter;
--my-radius: soft;
}{
"colors": {
"primary": {
"default": "#000000"
},
"secondary": {
"default": "#e9e5dc"
},
"neutral": {
"white": "#ffffff",
"black": "#101010",
"gray-light": "#f5f5f5",
"gray": "#999999",
"gray-dark": "#404040",
"border": "#d5d5d5"
}
},
"typography": {
"headingFont": {
"source": "google",
"family": "Lora",
"fallback": "serif"
},
"bodyFont": {
"source": "google",
"family": "Inter",
"fallback": "sans-serif"
},
"headingWeight": 700,
"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": "normal",
"moti…Create your own
Start from this Notion-inspired preset or build from scratch - your brand in, a bespoke system out. All 24 presets free, MIT licensed.