This guide documents the design system used across the Brandkit codebase and sets the HTML standards for building portal pages. It is intended as a working reference: an overview of how the component classes fit together, the markup patterns to follow, and the colours, badges, banners, and buttons available to use.
Use the examples as copy-paste starting points, and prefer the documented classes over ad-hoc styling so portal themes stay consistent and predictable.
How the class system works
Every component in this design system is built from up to three layers of class: a base class, a variant class, and optionally one or more modifier classes.
Base class
Sets the structural foundation — layout, spacing, transitions, and interactive states like hover and disabled.
Variant class
Defines the visual intent — colour, fill, and border. For example .button-outline gives a transparent background with a primary-coloured border, while .button-danger gives a semantic red fill.
Modifier class
Changes the shape or layout without affecting colour. .button-pill rounds a button into a pill shape and can be combined with any variant. .button-full-width stretches a button to fill its container.
Buttons have two base classes:
.button — the legacy base, used only for the primary action. Styled by the portal theme CSS.
.bk-button — used for all other variants. Isolated from existing theme overrides.
The pattern is always base + variant (+ optional modifier):
<!-- base + variant --> <a href="#" class="bk-button button-outline">Share</a>
The same base/variant/modifier pattern applies to badges: .badge is the base, .badge-danger is the variant, and .badge-pill or .badge-filled are modifiers.
Colours
The colour system is exposed as CSS custom properties on :root. Eight semantic families map to the status meanings used across badges, banners, and buttons, each with a base colour plus lighter, mid, and darker steps. The base step is the default; -light suits fills and backgrounds, -mid suits borders and muted accents, and -dark suits text and hover states. Reference them in theme CSS as var(--success), var(--success-light), and so on.
Success
Positive outcome, confirmation, completed states.
Swatch
Variable
Hex
--success-light
#eaf6ee
--success-mid
#28a745
--success
#198754
--success-dark
#0f5132
Warning
Caution, pending attention, non-blocking issues.
Swatch
Variable
Hex
--warning-light
#fff3eb
--warning-mid
#fea362
--warning
#e56910
--warning-dark
#a54800
Danger
Errors, destructive actions, expired or failed states.
Swatch
Variable
Hex
--danger-light
#ffeceb
--danger-mid
#f4a8a5
--danger
#c9372c
--danger-dark
#ae2e24
Info
Informational messages and neutral highlights.
Swatch
Variable
Hex
--info-light
#e9f2ff
--info-mid
#8ebeff
--info
#0969da
--info-dark
#0055cc
Neutral
Default UI text, borders, and muted backgrounds.
Swatch
Variable
Hex
--neutral-light
#f1f2f4
--neutral-mid
#bdc3c7
--neutral
#44546f
--neutral-dark
#374151
Primary
Brand primary (Brandkit black) for key actions and emphasis.
Swatch
Variable
Hex
--primary-light
#f8f8f8
--primary-mid
#646464
--primary
#000000
--primary-dark
#212121
Secondary
Brand secondary (Brandkit purple) for accents and secondary actions.
Swatch
Variable
Hex
--secondary-light
#eee7f4
--secondary-mid
#b388d1
--secondary
#8246af
--secondary-dark
#5c2d82
Accent
Brand accent (Brandkit yellow) for highlights and call-outs.
Swatch
Variable
Hex
--accent-light
#fff8dc
--accent
#ffd100
--accent-dark
#7a5c00
Badges
Inline status labels. Every badge uses the base badge class plus one colour class. Add modifier classes to change the shape (badge-pill) or fill style (badge-filled). Badges scale with their surrounding text size, so they sit naturally inside headings and body copy.
Colour variants
Eight colour variants are available. Each carries a semantic meaning — match the colour to the status you're communicating.
Variant
Meaning
badge-neutral
Default / no particular status
badge-success
Positive outcome, active, complete
badge-warning
Caution, needs attention
badge-danger
Error, expired, destructive state
badge-info
Informational note
badge-primary
Brand primary colour
badge-secondary
Brand secondary colour
badge-accent
Brand accent colour
Outline (default)
The eight colour variants in their default outline style.
Full-width message blocks for page-level feedback or notices. Apply the colour class directly to a <div>. Use <strong> inside to emphasise the message type.
Text banners
This is an info message. Something to be aware of.
This is a success message. Everything went well.
This is a warning message. Proceed with caution.
This is a danger message. Action required.
This is a neutral message. Something to note.
This is a primary message. Brandkit black.
This is a secondary message. Brandkit purple.
This is an accent message. Brandkit yellow.
<div class="info">This is an <strong>info</strong> message. Something to be aware of.</div> <div class="success">This is a <strong>success</strong> message. Everything went well.</div> <div class="warning">This is a <strong>warning</strong> message. Proceed with caution.</div> <div class="danger">This is a <strong>danger</strong> message. Action required.</div> <div class="neutral">This is a <strong>neutral</strong> message. Something to note.</div> <div class="primary">This is a <strong>primary</strong> message. Brandkit black.</div> <div class="secondary">This is a <strong>secondary</strong> message. Brandkit purple.</div> <div class="accent">This is an <strong>accent</strong> message. Brandkit yellow.</div>
Text colours
Utility classes for colouring inline or block text to match status meaning.
Buttons share a common base class plus one variant class. Primary actions use .button as their base; all other variants use .bk-button. To render a button as a link, use an <a href> element with the same classes.
All variants
The full set of button styles shown together. Pick the variant that matches the action's importance and intent.
