Style guide

Framework3 design system

A living reference for the site: colours, type, buttons, backgrounds, the layout grid and the native content elements — each shown with a live example and the exact markup. Every specimen renders with the real framework CSS, so the guide can never drift from the site.

How the site is built

  • Native elements only — every block is a Contao text, image or element group. No bespoke modules.
  • Layout is the framework — row on a group, col-1-2 / col-1-3 / col-2-3… on the children. See the Framework Reference for the full grid.
  • Style by tag inside a component class — the editor strips classes from inner tags, so rules read #header .logo, #footer a, never a class on the inner tag.
  • Tokens set the brand once — colours, type and spacing live in website.css / framework_v3.css as custom properties; use var(--…), never a raw value.

Foundations

Colour

The brand and neutral tokens from website.css. Reach for these names in every rule — never a raw hex.

Brand

Prime — headings, links, dark surfacesvar(--prime)#001078
Second — CTA fill, accents, hoversvar(--second)#E02200
Prime light — derived shadevar(--prime-light)#001ede

Neutrals

Blackvar(--black)#000000
Whitevar(--white)#ffffff
Text (→ black)var(--text)#000000
Stroke — hairlinesvar(--stroke)#333333
Grey darkvar(--grey-dark)#404040
Grey light — soft bandsvar(--grey-light)#ededed
Background (→ white)var(--background)#ffffff
TokenValue / role
--prime#001078 — primary brand
--second#E02200 — secondary / accent
--stroke#333 — a colour only; each site supplies its own width/style
--backgroundvar(--white) — the page background, wired to #container
--textvar(--black) — default body colour

Foundations

Heading gradient

Display headings can carry the navy blue-green text gradient defined by the two --heading-gradient-* tokens.

--heading-gradient-from → --heading-gradient-tolinear-gradient(to left, #032A42 0%, #2C647A 100%)#032A42 → #2C647A

Foundations

Backgrounds & bands

A full-width band is an element with a background helper; bleed-* lets a block break out of the content column to the viewport edge.

Light band

class="bg-light".

bg-light
<div class="bg-light" style="padding:24px;width:100%">bg-light</div>

Dark band

class="bg-dark" — copy flips to on-dark.

bg-dark
<div class="bg-dark" style="padding:24px;width:100%;color:#fff">bg-dark</div>

Prime band

class="bg-prime".

bg-prime
<div class="bg-prime" style="padding:24px;width:100%;color:#fff">bg-prime</div>

Full bleed

class="band bleed-full" — breaks out to the full viewport width; bleed-x bleeds horizontally only.

A band uses bleed-full / bleed-x to escape the content column.
<div class="bg-light" style="padding:24px;width:100%">A band uses <code>bleed-full</code> / <code>bleed-x</code> to escape the content column.</div>

Foundations

Layout grid

Columns come from the framework: row on a group, a col-* fraction on each child, and a gap-* for the gutter. The Framework Reference covers every width and breakpoint.

Three columns

class="row gap-24" with three col-1-3 children.

col-1-3
col-1-3
col-1-3
<div class="row gap-24" style="width:100%"><div class="col-1-3"><div class="sg-gridcell">col-1-3</div></div><div class="col-1-3"><div class="sg-gridcell">col-1-3</div></div><div class="col-1-3"><div class="sg-gridcell">col-1-3</div></div></div>

Two-thirds + one-third

col-2-3 beside col-1-3.

col-2-3
col-1-3
<div class="row gap-24" style="width:100%"><div class="col-2-3"><div class="sg-gridcell">col-2-3</div></div><div class="col-1-3"><div class="sg-gridcell">col-1-3</div></div></div>

Foundations

Spacing scale

Fluid spacing tokens (clamp() between phone and desktop) plus fixed steps, from framework_v3.css. Use these for vertical rhythm and gaps — never a raw px.

TokenValue
--space-sectionclamp(32px, 6vw, 96px) — between major sections
--space-80clamp(40px, 7vw, 80px)
--space-60clamp(32px, 5vw, 60px)
--space-40clamp(24px, 3vw, 40px)
--space-24 / --space-16 / --space-12 / --space-8fixed steps
--space-00

Foundations

Borders & rules

One hairline colour token, --stroke. Each usage site supplies its own width and style.

Hairline

A 1px --stroke rule — the framework’s border colour.

1px solid var(--stroke)
<div style="border:1px solid var(--stroke);padding:20px;width:100%">1px solid var(--stroke)</div>