OpenAI-inspired - AI - teal accent, minimal, 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 OpenAIdesign system, and not affiliated with or endorsed by OpenAI.
Design preview
Live rendered from generated tokens - not an image. These are real components with your brand applied.
Start a chat - your design system is the context.
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>.
Start a chat - your design system is the context.
Dark variant inverts neutrals and lifts the primary for contrast on dark surfaces.
Code preview
:root {
--my-colour-primary: #10a37f;
--my-colour-secondary: #202123;
--my-font-heading: Inter;
--my-font-body: Inter;
--my-radius: soft;
}{
"colors": {
"primary": {
"default": "#10a37f"
},
"secondary": {
"default": "#202123"
},
"neutral": {
"white": "#ffffff",
"black": "#101010",
"gray-light": "#f5f5f5",
"gray": "#999999",
"gray-dark": "#404040",
"border": "#d5d5d5"
}
},
"typography": {
"headingFont": {
"source": "google",
"family": "Inter",
"fallback": "sans-serif"
},
"bodyFont": {
"source": "google",
"family": "Inter",
"fallback": "sans-serif"
},
"headingWeight": 600,
"typeScale": [
1.125,
1.2
]
},
"layout": {
"screenMin": 320,
"screenMax": 1280,
"containerMax": 1600,
"breakpoints": {
"sm": 320,
"md": 768,
"lg": 1024,
"xl": 1280
},
"radius": "soft",
"gridColumns": 12
},
"effects": {
"shadows": "normal",
…Create your own
Start from this OpenAI-inspired preset or build from scratch - your brand in, a bespoke system out. All 24 presets free, MIT licensed.