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.

Warning

Caution, pending attention, non-blocking issues.

Danger

Errors, destructive actions, expired or failed states.

Info

Informational messages and neutral highlights.

Neutral

Default UI text, borders, and muted backgrounds.

Primary

Brand primary (Brandkit black) for key actions and emphasis.

Secondary

Brand secondary (Brandkit purple) for accents and secondary actions.

Accent

Brand accent (Brandkit yellow) for highlights and call-outs.

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.

Outline (default)

The eight colour variants in their default outline style.

<span class="badge badge-neutral">Neutral</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-accent">Accent</span>

Pill

Add badge-pill for fully rounded corners.

<span class="badge badge-success badge-pill">Success</span>

Filled

Add badge-filled for a solid background instead of an outline. Combine with badge-pill for filled pills.

<span class="badge badge-success badge-filled">Success</span>
<span class="badge badge-success badge-filled badge-pill">Success</span>

Scaling with text size

Badges inherit the font size of their context, so they pair cleanly with headings and body text.

<h1>Heading 1 <span class="badge badge-primary badge-pill">New</span></h1>
<p>Paragraph <span class="badge badge-danger">Expired</span></p>

Dot badges

A minimal status indicator — a coloured dot with no label. Use badge-dot plus a colour class, which can be followed by descriptive text.

<span class="badge-dot badge-success"></span> Success
<span class="badge-dot badge-danger"></span> Danger

Banners

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

<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.

<p class="text-success">text-success</p>
<p class="text-info">text-info</p>
<p class="text-warning">text-warning</p>
<p class="text-danger">text-danger</p>

These can be combined with banners — for example, in these trial banner examples.

<div class="info trial-banner text-info">Your trial ends in 7 days. <a href="#">Upgrade now</a></div>
<div class="danger trial-banner text-danger">Your trial has expired. <a href="#">Upgrade now</a></div>

Buttons

Buttons share a common base class plus one variant class. Primary actions use .button as their base; all other variants use .bk-button. Buttons are rendered as <a href> link elements with the component classes applied.

All variants

The full set of button styles shown together. Pick the variant that matches the action's importance and intent.

<!-- legacy -->
<a href="#" class="button normal-button">Normal</a>
<a href="#" class="bk-button button-primary">Primary</a>
<a href="#" class="bk-button button-outline">Outline</a>
<a href="#" class="bk-button button-secondary">Secondary</a>
<a href="#" class="bk-button button-cancel">Cancel</a>
<a href="#" class="bk-button button-danger">Danger</a>
<a href="#" class="bk-button button-link">Link</a>

When to use each variant

Disabled

Add the disabled attribute to any button.

<a href="#" class="button normal-button" disabled aria-disabled="true">Normal</a>
<a href="#" class="bk-button button-outline" disabled aria-disabled="true">Outline</a>

Full width

Add the button-full-width modifier to stretch a button to its container's width.

<a href="#" class="button normal-button button-full-width">Full width</a>
<a href="#" class="bk-button button-outline button-full-width">Full width outline</a>

Pill buttons

The button-pill modifier combines with any base + variant pairing. The pattern is always bk-button + variant class + button-pill.

<!-- Outline pill (most common) -->
<a href="#" class="bk-button button-outline button-pill">Edit profile</a>

<!-- Danger pill -->
<a href="#" class="bk-button button-danger button-pill">Remove</a>

<!-- Primary pill -->
<a href="#" class="bk-button button-primary button-pill">Download</a>