Design System
What this section does
Section titled “What this section does”The Design System holds the shared visual settings every Bran component uses: colors, typography, spacing, borders, shadows, and button styles. Change a value here and every component that uses it updates — including pages that are already live.
Think of it as your brand settings for Bran, separate from your theme’s own settings.
How to set it up
Section titled “How to set it up”- Open Design System.
- On the Presets tab, start from your theme or from a preset:
- Your theme detects your active theme’s colors, fonts, and radius and creates a style from them.
- The other preset cards give you a designed starting point such as Minimal, Luxury, Editorial, Modern, Playful, High contrast, Soft rounded, or Sharp & clean, along with presets tuned to popular Shopify themes. Each card previews its heading font, body text, and button, and shows how many settings differ from your current style.
- Adjust individual settings in the Style tab.
- Name your style, then select Save & activate to apply it to your storefront immediately. Save style saves it as a draft without going live.
The active style is the one your components use.
Style profiles
Section titled “Style profiles”You can keep several named styles and switch between them.
- Active style — the one currently applied to all your components.
- Duplicate — copy an existing style before experimenting, so the original stays intact.
- Activate — make a different style live.
- Delete — remove a style you no longer need.
Only one style is active at a time.
Settings reference
Section titled “Settings reference”Colors
Section titled “Colors”| Setting | What it affects |
|---|---|
| Primary color | Primary buttons and key branded highlights |
| Secondary color | Labels, category tags, and secondary accents |
| Accent color | Star ratings, icons, and decorative highlights |
| Background | Card and section background fill |
| Text color | Body copy and paragraph text |
| Heading color | Headings, product names, and titles |
Typography
Section titled “Typography”| Setting | What it affects |
|---|---|
| Heading font | Headings and product names. Accepts Google Font names |
| Body font | Body copy, captions, and prices. Accepts a Google Font name or a CSS font family |
| Base font size | The root text size. Headings and captions scale relative to it |
| Heading weight | How bold headings appear: 400 regular, 600 semibold, 700 bold |
Borders and shadows
Section titled “Borders and shadows”| Setting | What it affects |
|---|---|
| Border color | Card edges, dividers, and form outlines |
| Border radius | Corner rounding on cards, images, buttons, and containers |
| Shadow | Depth on cards and containers. Set to none for a flat, minimalist look |
Layout
Section titled “Layout”| Setting | What it affects |
|---|---|
| Base spacing | Gaps between elements inside components — cards, grids, and content rows |
| Section padding | Top and bottom padding on full-width page sections |
Buttons
Section titled “Buttons”Buttons are styled in three tiers — Primary, Secondary, and Tertiary — and each tier has its own background and text color, border width and color, corner radius, vertical and horizontal padding, shadow, and width behavior.
Live preview
Section titled “Live preview”The Design System page previews your settings on real component layouts so you can judge a change before committing to it. Switch the preview between a hero card, carousel, product grid, testimonial, value pillars, banner, type scale, and buttons.
How changes reach your live pages
Section titled “How changes reach your live pages”The Design System is applied to your published pages when they load, so a style change reaches live pages without republishing each one. Allow a few minutes for the change to appear everywhere, and refresh with a clear cache if you are checking immediately after saving.
- Start with Match your theme, then refine. It gets you 80% of the way in one step.
- Duplicate the active style before a big experiment. Activating a duplicate is instant, and so is switching back.
- Change values here before overriding them on individual components. Per-component overrides are useful for exceptions, but too many make a site look inconsistent.
- If you use a Google Font, type its exact name. A misspelled name falls back to a default font.
Does this change my theme?
Section titled “Does this change my theme?”No. The Design System only affects Bran components. Your theme’s own settings, header, footer, and other sections are untouched.
I changed a color but one component still looks different.
Section titled “I changed a color but one component still looks different.”That component probably has a per-component override. Select it, open the Style tab in the inspector, and reset the overridden value.
Can I use a font that is not a Google Font?
Section titled “Can I use a font that is not a Google Font?”You can enter any CSS font family value. Fonts that are not loaded by your store or by Google Fonts may not render for visitors, so test on the storefront.
Why did my live page not update immediately?
Section titled “Why did my live page not update immediately?”Styles are cached briefly for performance. Wait a few minutes and refresh.
Related guides
Section titled “Related guides”Need help?
Section titled “Need help?”If you still need help, contact support via the Contact page.