The design system

One system, built around four pillars.

The visual and product language behind Wired CIO — the brand, the marketing website, and the internal tools our clients touch. Everything is anchored to how we talk about the business: grow, protect, automate, and align.

Grow Protect Automate Align

Live pages

Marketing homepage The full public site — hero, four pillars, explorer, proof, and assessment. Open Service page Per-service page template (Managed IT example), pillar-themed. Open Case studies Index of real client engagements. Open Case study A single case study (GruntWorx), pillar-themed. Open Team Leadership and the people behind Wired CIO. Open Discovery questionnaire Client-facing product UI — forms, autosave, sections. Open Estimator Internal scope + pricing builder. Open Admin dashboard Sessions table, drawer, status — internal tooling. Open

Foundations & components

Start Here

The direction — one system, four pillars How Wired CIO's brand, website, and product tools fit together

Brand & Identity

Logo lockups Horizontal · vertical · icon, on light & dark The Four Pillars — sub-brand system Per-pillar icon + palette, harmonized with the brand green Pillar accents — wayfinding, not repaint Where pillar color appears vs. where green stays fixed Background system Mint gradients · teal waves · topographic contours Brand gradients From the background system

Color

Brand core The three brand-book swatches Emerald scale Primary brand ramp · 50 → 900 Ink / teal scale Dark neutrals, teal-biased · 50 → 900 Cool neutrals & status UI grays + semantic status colors

Typography

Display — Rubik Headings & hero · Rubik 700–900 Body — Work Sans Paragraphs & UI · Work Sans 400–700 Eyebrow & weights Uppercase kicker + weight ladder

Spacing & Elevation

Spacing scale 4px base grid Radii & shadows Corner radii + teal-tinted elevation

Components

Brand — logo, outcomes, service cards, stats Logo, OUTCOME chips, ServiceCard, Stat Core — buttons, inputs, controls Buttons, badges, inputs, toggles, tabs, alerts Forms — fields, inputs, density Field / Input / Textarea / RadioGroup at comfortable + compact scales

Website

Case studies index All Wired CIO case studies Case study (article) Single case study — challenge, approach, outcome Marketing site — full page Hero, services, four pillars, proof, assessment form Service page Single service — overview, what's included, related case study Wired CIO Team page Leadership, pod structure, values

Product UI · Foundation

Product-UI tokens (light + carbon) Dense app surfaces, ink, brand, status, and the carbon dark theme

Product UI · Forms

Form controls (product scale) Input, Textarea, Select, Checkbox, Radio, Segmented, MultiSelect, FileDrop, WhyTooltip

Product UI · Feedback

Status, progress, save, pills, chips, banners StatusBadge, ProgressBar, SaveStatus, Pill, Chip, Banner

Product UI · Structure

App shell — top bar, tabs, stats, table AppTopBar, AppTabs, StatCard, Toolbar, DataTable, StatusBadge, ProgressBar, Drawer

Product UI · Screens

Questionnaire — client discovery Progress, Accordion sections, AppInput/Select/Radio/Textarea, WhyTooltip, SaveStatus, name-gate AppModal Estimator — scope builder AppTopBar, summary StatCards, AppTabs, Accordion, SegmentedControl, MultiSelect, SaveStatus Admin — sessions dashboard AppTopBar, AppTabs, StatCard, Toolbar, DataTable, Drawer, StatusBadge — composed