Design System

The Guild Butler system

Every color, typeface, space, and component the site is built from — defined once in design-system.css and consumed by every page.

8 pages

1 source of truth

3 typefaces

01 · Brand

Logo & wordmark

crest-full.png · hero lockup

Line mark

crest-line.png · nav, footer, favicon

Guild Butler

Wordmark · Cormorant Garamond · tracking .18em · gradient --gb-grad-wordmark

Organize · Fight · Earn · Together

Tagline · JetBrains Mono · tracking .12em

02 · Color

Palette

Gold on near-black, the whole way through. Gold is the only accent; everything else is a neutral or a status hue used sparingly.

Brand gold

Gold

var(--gb-gold) · --gb-gold

Gold bright

var(--gb-gold-bright) · --gb-gold-bright

Gold deep

var(--gb-gold-deep) · --gb-gold-deep

Gold ink

var(--gb-gold-ink) · --gb-gold-ink

Gradient

--gb-grad-gold

Surfaces

Background

var(--gb-bg) · --gb-bg

Panel

var(--gb-panel) · --gb-panel

Card top

var(--gb-card-top) · --gb-card-top

Inset

var(--gb-inset) · --gb-inset

Pro card

--gb-card-gold

Text

Ink

var(--gb-ink) · --gb-ink

Ink 2

var(--gb-ink-2) · --gb-ink-2

Muted

var(--gb-muted) · --gb-muted

Faint

var(--gb-faint) · --gb-faint

Dim

var(--gb-dim) · --gb-dim

Status

Discord

var(--gb-discord) · --gb-discord

Success

var(--gb-green) · --gb-green

Warning

var(--gb-gold-deep) · --gb-amber

Danger

var(--gb-red) · --gb-red

Info

var(--gb-blue) · --gb-blue

03 · Typography

Three typefaces, clear roles

Display · Cormorant Garamond · 600

Your guild, handled

Headlines · clamp 30–84px · tracking −.02em

Body · Manrope · 400–700

The Discord butler for Albion Online guilds. Members tracked and taxed, pugs paid in full, every coin accounted for.

Body · 14–18px · line-height 1.6

Mono · JetBrains Mono · 400–500

gross == pugs + repair + Σ member_nets + merchant + regear

Labels, eyebrows, numerics, code

04 · Spacing

4px base scale

--gb-2 · 8px

--gb-4 · 16px

--gb-6 · 24px

--gb-8 · 32px

--gb-12 · 48px

--gb-16 · 64px

--gb-24 · 96px

05 · Radii

Corners

--gb-r-sm · 8px · chips, inputs

--gb-r-md · 12px · buttons

--gb-r-xl · 16px · cards

--gb-r-pill · pills, badges

06 · Components

Repeatable elements

Base look is set inline so pages paint instantly; the design system owns interaction states. Hover any button to see the glow.

Buttons · .gbtn

Primary Ghost Discord .gbtn-primary · .gbtn-ghost · .gbtn-discord

Badges, chips & pills

Pro Quick call 5 roles White-label Operational

Input · .gb-input

Callout · .gb-callout — used for tips and notices in docs and legal, with a gold left rule.

Standard card

.gb-card with .gb-card--hover · lifts on hover.

Pro

Pro card

.gb-card--gold · for premium / white-label.

07 · Layout & grid

One container scale, every page

Content centers in one of four widths. Every page references these tokens, so a single edit reflows the whole site. The side gutter is a constant 28px (20px on phones).

Wide · 1180px

--gb-w-wide · sections, nav, footer, card grids

Read · 820px

--gb-w-read · prose, FAQ, changelog, status, legal

Narrow · 640px

--gb-w-narrow · centered CTAs, single forms

Docs · 1280px

--gb-w-docs · docs shell only (sidebar + content)

Gutter & rhythm

Side gutter --gb-gutter · 28px desktop, 20px ≤620px
Section vertical padding · 56–100px on the spacing scale
Wrappers carry [data-pad] for the gutter

Column grids

[data-grid2] · two columns → 1 at ≤620px
[data-grid3] · three → two → one
[data-split] · asymmetric two-up, stacks on tablet

08 · Shared shells

Two components, every page

The top navigation and footer are real shared components — SiteNav.dc.html and SiteFooter.dc.html — imported by all 8 pages, so an edit in one place updates the whole site. Each takes an active prop to highlight the current page. The section opener (eyebrow + heading) is a shared markup pattern.

Section header · eyebrow + display heading

Why guilds trust it

Every silver lands in one of five buckets

.gb-eyebrow (mono · .24em) + Cormorant heading · opens every section

Top navigation

Guild Butler

SiteNav.dc.html · sticky, blurs in on scroll · active prop highlights page

Footer

SiteFooter.dc.html · brand blurb + Product / Community columns + legal row