Creative brief design: design system constraints and how to brief inside an existing system

The template

The structure to copy and adapt

Design system referenceRequired
The design system version + URL. 'Per Orbital DS v4.2 (Figma library URL).' The brief inherits all tokens, components, and patterns from the system unless explicitly overridden. Reference, don't restate.
Project + deliverableRequired
What's being designed. 'Marketing site landing page for Aurora launch.' Single deliverable, scoped tight - design system briefs work best when each brief targets one surface.
System fit + extensionsRequired
Which existing tokens, components, and patterns this design uses. Which (if any) need to be extended. 'Uses existing button, card, hero patterns. Extends color tokens with one new accent-warm.' Extensions get their own ticket; the brief flags them.
Brand DNA + design intentRequired
1 paragraph DNA + 1 paragraph design intent. DNA is brand-level (inherited from brand book). Design intent is project-specific - what this surface has to communicate that other surfaces don't.
Audience + use contextRequired
Who and where. Same depth as a general creative brief. 'Paid-traffic visitors from launch campaign ads. Mostly mobile, cold to brand.' Use context drives token + component choices.
Accessibility + performance constraintsRequired
WCAG level, contrast minimums, LCP / CLS targets, supported browser matrix, motion-reduce behavior. Constraints inherited from the design system; brief project-specific overrides.
Content + asset inventoryRequired
What's net new vs from library. Copy, photography, video, illustrations. System briefs often reuse asset library; brief what's new explicitly.
Design do-notsRequired
5-7 exclusions specific to this brief. 'No carousels. No modal popups in first 30s. No custom illustrations - use the existing illustration library. No off-system color.'
Review + handoff
Design review milestones, dev handoff format (Figma dev mode, Storybook entries, design tokens JSON), QA checklist reference.

Filled-in examples

See the template in use

Marketing landing page (within an existing DS) · B2B SaaS

Design system referencePer Orbital DS v4.2 (Figma library URL). Component library, token system, content patterns all inherited. Storybook URL for live component reference.
Project + deliverableMarketing landing page for the Q3 platform launch. Single page. Standalone URL (orbital.com/platform-q3).
System fit + extensionsUses existing: hero variant 02, feature triplet, comparison table, customer logo wall, footer. Extensions needed: one new 'stat block' variant (3 stats with eyebrow + value + footnote). Extension ticket to DS team filed separately.
Brand DNA + design intentDNA: operational confidence, builder-leaning, anti-corporate. Design intent: this page has to land the 'platform' positioning - not just feature list. Heavier on hierarchy + density than a typical product page; comparison table is the load-bearing module.
Audience + use contextVPs of RevOps at $5M-50M ARR SaaS. Mostly desktop (LinkedIn-driven traffic). Reading the page during evaluation, often alongside 2-3 competitor tabs.
Accessibility + performance constraintsWCAG 2.2 AA per DS baseline. Contrast minimums per system tokens. LCP under 1.8s on 4G. CLS under 0.1. Supports Chrome / Safari / Firefox / Edge current + 2 prior. Motion-reduce respected per system pattern.
Content + asset inventoryNet new copy: hero + feature triplet + 4 comparison rows + 1 customer quote. From library: 6 customer logos, 1 platform diagram (existing). Net new photography: none.
Design do-notsNo carousels. No modal popups in first 30s. No custom illustrations - use illustration library. No off-system color. No 'industry-leading' boilerplate. No more than 1 primary CTA above the fold.

Shuttergen

Shuttergen is for ad briefs - design system work stays human.

Design system work is judgment-heavy - tokens, components, accessibility tradeoffs, system entropy management. Shuttergen doesn't generate design system briefs. For the paid social and search briefs that distribute your design-system-built surfaces, it is the right tool.

Generate ad briefs free Try the live builder →

Why design-system briefs are different

A design system brief inherits a lot of decisions. Tokens, components, patterns, accessibility baselines, performance targets - all set by the system. The brief's job is to declare what's reused, what's extended, and where this project diverges from system defaults. That's a different problem than a from-scratch design brief.

Reference the system, don't restate it. Briefs that re-list every color token and every component drift from the source the moment the system updates. Reference the system version ('per Orbital DS v4.2') and link the Figma library / Storybook URL. The system is the source of truth; the brief points at it.

Extensions need their own ticket. When a brief identifies a needed extension (new token, new component variant, new pattern), it doesn't bury that in the brief - it files a separate ticket with the design system team. The brief flags the extension as a dependency; the extension ticket tracks it as a discrete piece of work.

Shuttergen is for ad briefs - design system work stays human. Design system work is judgment-heavy - tokens, components, accessibility tradeoffs, system entropy management. Shuttergen doesn't generate design system briefs. For the paid social and search briefs that distribute your design-system-built surfaces, it is the right tool.

Generate ad briefs free

The system fit + extensions field

This is the field unique to design-system briefs. It declares which existing tokens, components, and patterns the design uses, and which (if any) need to be extended. Without it, every project quietly extends the system in inconsistent ways - and the system entropy grows until the next rebuild.

Default to reuse. If the design can be built with existing system primitives, build it that way. Extensions cost the design system team time and create maintenance debt across the product. Brief the extension only when reuse genuinely can't solve the problem.

Extension format matters. New token: name, value, semantic role, dark/light variants. New component variant: extends which existing component, what changes, what stays the same. New pattern: documented in DS pattern library as part of delivery, not as an afterthought.

How brand DNA fits inside a design system

Brand DNA lives in the brand book; design intent lives in the brief. Brand DNA is system-level - the 3-5 attributes that define the brand. Design intent is project-level - what this specific surface has to communicate that other surfaces don't. The brief should reference the DNA (one line) and spend more time on the intent (one paragraph).

Design intent is what drives tradeoff decisions inside the system. Two pages can both inherit from the same DS and feel different because of design intent. A platform landing page has different intent than a customer story page; both use the same components, but the hierarchy + density + token choices differ. Intent shapes those choices.

Without design intent, system briefs produce same-y output. Briefs that say 'use the DS' and stop there produce pages that look identical to every other page in the system. That's a failure mode - the system should enable variety within consistency, not enforce uniformity. The intent field is what creates the variety.

Internal: creative brief design, design creative brief, creative design brief.

FAQ

Frequently asked

What is a creative brief in the context of design systems?

A 1-2 page document that scopes a design project working inside an existing design system. References the system version, declares which tokens / components / patterns are reused, flags any extensions needed, and adds project-specific design intent on top of inherited brand DNA.

How is a design-system brief different from a general design brief?

It inherits more decisions and adds the 'system fit + extensions' field. Tokens, components, patterns, accessibility baselines, and performance targets are all set by the system. The brief's job is to declare reuse, extensions, and project-specific intent on top of those defaults.

When should I extend the design system vs work within it?

Default to reuse. Extend only when reuse genuinely can't solve the problem. Extensions cost DS team time, create maintenance debt across the product, and risk inconsistency. The brief should flag extensions explicitly so the trade-off is visible to stakeholders.

What's the difference between brand DNA and design intent?

Brand DNA is system-level - 3-5 attributes that define the brand (inherited from the brand book). Design intent is project-level - what this specific surface has to communicate that other surfaces don't. Brief the DNA in one line; spend a paragraph on the intent.

Should the brief specify every token used in the design?

No - reference the design system and let the designer pull tokens from the source. The brief should specify the system version, declare any project-specific token overrides, and let the rest of the token usage live in the design files themselves.

How does accessibility get briefed inside a design system?

Reference the system accessibility baseline (WCAG level, contrast minimums, motion-reduce behavior). Brief project-specific overrides only - for example, an OOH placement might have higher contrast minimums than the web baseline.

What's the most common failure mode in design-system briefs?

Skipping the system fit + extensions field. Without it, designers quietly extend the system in inconsistent ways and system entropy grows. Brief reuse vs extensions explicitly; file extension tickets separately.

Keep reading

Resource

Creative design brief

Output-first design brief lens.

Resource

Design creative brief

Brand-identity-first design brief lens.

Resource

Creative brief graphic design

Design-team-as-receiver workflow lens.

Resource

Graphic design creative brief

Graphic-design-specific variant.

Research

Creative Brief Builder

The Shuttergen brief workflow.

Shuttergen is for ad briefs - design system work stays human.

Generate ad briefs free Try the live builder →