Informational alert — native Bricks alert element.
Design System
Style Guide
A living reference for typography, spacing, colour, grid and the core interface components — built on a fluid Utopia type and space scale.
Typography
Fluid type scale
Ten fluid steps from --step--2 to --step-7. Each clamps smoothly between the 474px and 1480px viewport; the sample renders the live value.
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
Typography
Headings
Recommended mapping of HTML heading levels onto the type scale. Set these on your Bricks theme styles so every h1–h6 inherits them.
h1 · --step-5
Heading level 1
h2 · --step-4
Heading level 2
h3 · --step-3
Heading level 3
h4 · --step-2
Heading level 4
h5 · --step-1
Heading level 5
h6 · --step-0
Heading level 6
Typography
Body & prose
Default running text, lead paragraphs, quotes, links and fine print.
Lead paragraph — set at --step-1 to introduce a block of content with a little more presence than the body copy.
Body copy runs at –step-0 with a relaxed 1.7 line height for comfortable reading. Measure is capped at 65ch so lines never grow too long. Inline emphasis such as bold and italic inherits the same scale.
Blockquotes lean on the accent colour and an italic --step-1 size to stand apart from the surrounding prose.This is a text link
Fine print and captions use --step--1 in the muted colour.
Spacing
Single stepsSpacing scale
Fluid space tokens for padding, gaps and margins. One-up pairs interpolate between two steps for larger, more expressive jumps.
--space-3xs5px
--space-2xs9px → 10px
--space-xs14px → 15px
--space-s18px → 20px
--space-m27px → 30px
--space-l36px → 40px
--space-xl54px → 60px
--space-2xl72px → 80px
--space-3xl108px → 120px
--space-3xs-2xs5px → 10px
--space-2xs-xs9px → 15px
--space-xs-s14px → 20px
--space-s-m18px → 30px
--space-m-l27px → 40px
--space-l-xl36px → 60px
--space-xl-2xl54px → 80px
--space-2xl-3xl72px → 120px
--space-s-l18px → 40px (custom)
Layout
12-column grid
A fluid 12-column grid using your --grid-* tokens. Children span columns with span modifiers; the gutter scales with the viewport.
1
2
3
4
5
6
7
8
9
10
11
12
span 6
span 6
span 4
span 4
span 4
span 3
span 3
span 3
span 3
Container max-width var(--grid-max-width) = 92.5rem (~1480px) · gutter var(--grid-gutter) = var(--space-s-l) · 12 columns.
Colour
Palette
Placeholder neutral + accent tokens (--sg-*) added as global variables. Replace the hex values to match your brand.
Ink / text--sg-ink · #1a1d24
Surface--sg-surface · #ffffff
Subtle--sg-subtle · #f4f5f7
Line / border--sg-line · #e2e5ea
Muted text--sg-muted · #5b6472
Accent--sg-accent · #3b5bdb
Accent strong--sg-accent-strong · #2f49b0
Components
AlertsCore components
Native Bricks elements — alerts, cards and dividers — styled with the same tokens for a consistent look.
Success alert — something went right.
Warning alert — proceed with care.
Danger alert — something needs attention.
Card title
Cards use the surface colour, a 1px line border, soft shadow and --space-m padding.
Card title
Drop them into any grid; the auto-fit layout keeps them tidy across breakpoints.
Card title
Radius, shadow and padding all reference the shared scale.
Forms
Form & fields
The native Bricks form element with text, email, phone, select, textarea, checkbox and radio fields. Field styling is token-driven and scoped to the sg-form class.
Forms
Input states
Visual reference for the default, focus, error and disabled states. These are static representations using BEM modifiers; the live fields live in the form above.
Default
Placeholder text
Helper text sits here.Focus
Typing…
Accent border + focus ring.Error
Invalid value
This field is required.Disabled
Disabled
Not editable.Content
Lists
Unordered, ordered and description lists built from ul/ol/dl-tagged elements with BEM item classes, all consuming the spacing and type tokens.
Unordered
- First unordered item
- Second unordered item
- Third unordered item
Ordered
- First ordered item
- Second ordered item
- Third ordered item
Description
- Term one
- Definition for the first term.
- Term two
- Definition for the second term.
Components
Badges & pills
Compact status labels composed from a text element, using the pill radius token and the semantic colour tokens (--sg-success / --sg-warning / --sg-danger).
NeutralAccentSuccessWarningDanger
Components
Accordion
The native accordion-nested element. Structural wrappers are preserved; BEM classes handle the borders, title and panel typography.
What is this style guide for?
It documents the design tokens and core components so the team builds consistently.
Are these native Bricks elements?
Yes — the accordion uses the native accordion-nested element with BEM classes layered on top.
Can I restyle it?
Edit the sg-accordion classes or the underlying tokens and every instance updates.
Components
Tabs
The native tabs-nested element. Tab titles, the active state and pane padding are styled with tokens scoped to the sg-tabs class.
Overview pane — the active tab is highlighted with the accent colour.
Details pane — switch tabs by clicking the titles above.
Usage pane — built on the native tabs-nested element with BEM styling.
Foundations
Size scaleSample setIcons
Native icon element (Themify library). The size scale ties icon dimensions to the type steps; colour is driven by the tokens via the sg-icon class.
Foundations
Elevation / shadow
Three elevation tokens (--sg-shadow-1…3) added as global variables. Each step uses layered shadows for a softer, more natural depth.
--sg-shadow-1
--sg-shadow-2
--sg-shadow-3
Foundations
Border radius
Four corner-radius tokens (--sg-radius-sm/md/lg/full) added as global variables for consistent rounding across cards, inputs, badges and buttons.
--sg-radius-sm · 6px
--sg-radius-md · 12px
--sg-radius-lg · 20px
--sg-radius-full · pill