Noir-inspired - Luxury - monochrome, uppercase, sharp
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 Noirdesign system, and not affiliated with or endorsed by Noir.
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: sharp · 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: #141414;
--my-colour-secondary: #4b5563;
--my-font-heading: Montserrat;
--my-font-body: Inter;
--my-radius: sharp;
}{
"colors": {
"primary": {
"default": "#141414"
},
"secondary": {
"default": "#4b5563"
},
"neutral": {
"white": "#ffffff",
"black": "#101010",
"gray-light": "#f5f5f5",
"gray": "#999999",
"gray-dark": "#404040",
"border": "#d5d5d5"
}
},
"typography": {
"headingFont": {
"source": "google",
"family": "Montserrat",
"fallback": "sans-serif"
},
"bodyFont": {
"source": "google",
"family": "Inter",
"fallback": "sans-serif"
},
"headingWeight": 600,
"typeScale": [
1.125,
1.125
]
},
"layout": {
"screenMin": 320,
"screenMax": 1280,
"containerMax": 1600,
"breakpoints": {
"sm": 320,
"md": 768,
"lg": 1024,
"xl": 1280
},
"radius": "sharp",
"gridColumns": 12
},
"effects": {
"shadows": "norm…Create your own
Start from this Noir-inspired preset or build from scratch - your brand in, a bespoke system out. All 24 presets free, MIT licensed.