Styling Context is a set of instructions that automatically apply to every design created with your Design System. Think of it as a default prompt. Define it once, and every design follows your brand rules.
If you are familiar with other AI tools, you can think of this as “rules,” “default prompts,” or “skills” that is applied to the context of all designs.
Example Styling Context
Upload your brand guidelines to ChatGPT and ask it to create Styling Context
for Magic Patterns!
You are designing for the Acme Inc company.
Acme Inc makes B2B SaaS and has users that do XYZ.
## Brand
Voice: Professional but approachable
## Colors
Primary: #4F46E5
Background: #FAFAFA
Text: #1F2937
## Typography
Headings: Inter, semi-bold
Body: Inter, regular, 14px
## Visual Rules
- Border radius: 8px
- Shadows: subtle (0 1px 3px rgba(0,0,0,0.1))
- Spacing: 16px between sections
- Style: Clean, minimal, lots of whitespace
What’s Next?
You can add custom fonts to your Design System, to ensure Typography is consistent across your designs.
