Components · CtrlChain Hub

Colour tokens

Raw palette from ds/colors_and_type.css. Components reference these via the semantic token layer rather than raw hex.

Brand — green

--color-green-50#f6fbe9

--color-green-300#b7d47f

--color-green-600#6f8f2f

--color-green-800#4b6615

Neutrals

neutrals-100#fafafa

neutrals-300#d9d9d9

neutrals-600#717171

neutrals-900#333333

NewCold / accents

newCold-500#10152e

blue-500#2a628f

orange-600#eb8900

red-500#b91c1c

Buttons

Primary and secondary. Use for the CTAs on the hero, release notes, and helpful-links sections.

Primary

.btn.primary

<button class="btn primary">Get started</button>

Secondary

.btn.secondary

<button class="btn secondary">Search everything</button>

Filter chips

Pill-shaped toggles used to filter the tools grid. One chip should be in the .active state at a time.

Chips

.chip / .chip.active

<div class="filter-chips">
  <button class="chip active">All <span class="count">8</span></button>
  <button class="chip">Plan & Design</button>
</div>

Segmented toggle

Two-or-more options where one is always selected. Used for the Cards / List view switcher and the Tweaks panel.

View toggle

.view-toggle

<div class="view-toggle">
  <button class="on">Cards</button>
  <button>List</button>
</div>

Tweak segment

.tw-seg

<div class="tw-seg">
  <button class="on">Light</button>
  <button>Dark</button>
</div>

Avatar

Initials on a brand-green gradient. Used in the top nav.

Avatar

.avatar

AM JD CC

<span class="avatar">AM</span>

Keyboard key

Use inside the command-palette trigger, palette footer, and any shortcut hint.

Key cap

.kbd-key

⌘ K ↵ ESC

<span class="kbd-key">⌘</span><span class="kbd-key">K</span>

Status dot

Inline operational indicator used in tool-card footers. Default (no modifier) is "Operational".

Status variants

.status-dot / .warn / .bad / .info

Operational Degraded Down Info

<span class="status-dot">Operational</span>
<span class="status-dot warn">Degraded</span>
<span class="status-dot bad">Down</span>

Section header

Use at the top of every content section: title, subtitle, and optional "see all" link.

Section head

.section-head

Tools & documentation

Every internal surface in one place.

View all →

<div class="section-head">
  <div>
    <h2>Tools & documentation</h2>
    <div class="sub">Every internal surface in one place.</div>
  </div>
  <a href="#" class="see-all">View all →</a>
</div>

Tool card

Primary grid element. Rendered from TOOLS in assets/js/tools-data.js on the home page, but the markup below is copy-paste-ready.

Card

.tool-card

Tool · Ship

↗

Tool

Release Manager

Cut, promote and roll back releases across every service.

Platform Operational Open →

Dashboard · Measure

≡

Dashboard

Metrics

Team and department metrics in one place — ops, finance, product, eng.

Data Platform Degraded Open →

Docs

¶

Docs

User Manual

End-user guide for the CtrlChain platform. How-tos and flows for every module.

Product Operational Open →

<div class="tool-card">
  <div class="tc-kind"><span>Tool · Ship</span></div>
  <div class="tc-head">
    <div class="tc-icon" style="background:#6f8f2f">↗</div>
    <div class="tc-title-wrap">
      <h3 class="tc-title">Release Manager</h3>
    </div>
  </div>
  <div class="tc-desc">Short description.</div>
  <div class="tc-foot">
    <span class="tc-owner">Platform</span>
    <span class="status-dot">Operational</span>
    <span class="tc-open">Open →</span>
  </div>
</div>

Role card

Four coloured variants. Use for onboarding paths, top-level category pickers, or any coloured callout.

Variants

.role-card.r-blue / .r-green / .r-orange / .r-dark

Engineering

Repos, pipelines, release management, runbooks and metrics.

Explore →

Design

Figma libraries, design system docs, component guidelines.

Explore →

Product & Ops

Roadmap, feedback, release notes, team metrics and KPIs.

Explore →

Everyone

User manual, collaboration docs, how we work across teams.

Explore →

<div class="role-card r-blue">
  <div class="ro-ico">…svg…</div>
  <h3>Engineering</h3>
  <p>Short description.</p>
  <a href="#" class="ro-link">Explore →</a>
</div>

Pinned strip

Horizontal list of compact chips used at the top of the tools section to surface a user's pins.

Strip

.pinned-strip / .ps-chip

Pinned ↗Release Manager ▲Azure DevOps ◆Figma

<div class="pinned-strip">
  <span class="ps-label">Pinned</span>
  <a class="ps-chip" href="#">
    <span class="ps-ico" style="background:#6f8f2f">↗</span>Release Manager
  </a>
</div>

Release item

Stacked changelog entries with a top-border separator. Used in the release-notes section.

Item

.release-item

Unified command bar

Hit ⌘K from anywhere on the hub to fuzzy-search across every tool and doc.

Pin your favourites

Click the pin on any card to keep it one click away, right at the top of the hub.

<div class="release-item">
  <h4>Unified command bar</h4>
  <p>Description.</p>
</div>

Helpful select

Dropdown-styled row. Use for quick-access link lists at the foot of a page.

Select row

.helpful-select

New starter checklist

Request access to a tool

<div class="helpful-select">
  <span>New starter checklist</span>
  <svg …chevron…></svg>
</div>

Hero visual card

Large dark-mode card with headline, sub-stats and optional floating tiles. Home-page only.

Stats section

.hc-stats / .hc-stat

Tools

8

Online

8all green

Your pins

3

<div class="hc-stat">
  <div class="sl">Tools</div>
  <div class="sv">8</div>
</div>

Float tile

.float-tile

◧

Design System

Docs

▲

Azure DevOps

Tool

<div class="float-tile">
  <div class="ft-ico" style="background:#6f8f2f">◧</div>
  <div><div class="ft-title">Design System</div><div class="ft-kind">Docs</div></div>
</div>

Empty state

Dashed-border panel shown when a grid or list has no results.

Empty

.empty

No matches for "release".
Request a new tool →

<div class="empty">
  No matches for <b>"release"</b>. <br>
  <a href="#">Request a new tool →</a>
</div>