Colaberry Design System · v1.0

One system. Every Colaberry experience.

The single source of truth for the School of Data and AI — tokens, components, templates and rules that let a marketer, a developer, or an AI ship on-brand work in minutes.

Explore the system What's inside

245 tokens · 20 components · 26 templates · WCAG 2.2 AA

01What this is

Everything the brand
knows, in one place.

A design system is a brand's shared language — colors, type, components, motion and voice, packed into code that people and AI can read. This is Colaberry's. Everything below is live — go ahead and touch it.

Color

Three hues, one voice.

Click any swatch to copy its hex.

Type

Roboto carries every word; Roboto Mono carries the numbers. Quicksand is reserved for the logotype.

Tokens · 245

Every decision, named.

Components never hard-code a value — change a token, every surface follows.

--brand-accent --radius-pill ms--dur-base · 220ms

Theme

Dark mode, free.

Every token flips with data-theme — the cherry stays constant.

Try it — the whole page flips

Motion

Quick, gentle, purposeful.

140–360ms, ease-out in, spring only to confirm. Never showy.

enter · 360msstagger · 70mshover · 140ms

Components · 20

Live, accessible, token-fed.

EnrollingData Science

Email me about new cohorts

Course progress68%

Meet all twenty

Templates · 26

Start at 80% done.

certificateCertificate of Completion

resume · letter

deck · 16:9Q2 Investor Briefing

Social posts, decks, certificates, resumes, event pages, newsletters — pre-wired to the tokens. Pick one, swap the words, ship it.

See the template kit

AI-readable

Plain English is the API.

Claude reads the brand guide, tokens and components, then does the busywork — describe the artifact, download finished HTML.

Copy

"Using the Colaberry design system, create a [social post / flyer / slide] at [size] for [topic]. Headline: [your words] — give me 3 options."

returns →spring-cohort-post.html · 1080×1080

02How it works

From token
to artifact.

Scroll — one cherry-red decision travels from a variable, through components and templates, into a finished, shippable file.

Stop 01 · token

A decision gets a name.

/* tokens/color.css */
--brand-accent: #FB2832;

245 named decisions cover color, type, space and motion — the single source of truth.

Stop 02 · component

Twenty components inherit it.

background: var(--brand-accent)

Nothing hard-codes a value — edit one line and the whole kit restyles itself.

Stop 03 · template

Templates assemble them.

social · 1080×1080Your data career starts here.Apply now

26 starting points — posts, decks, certificates, pages — arrive 80% done.

Stop 04 · artifact

Anyone ships, on-brand.

spring-cohort-post.html on-brand · AA · dark-mode ready

Describe it in plain English — a person or Claude delivers the finished file in minutes.

03In practice

One system,
every medium.

Decks, posts, product, print — all drawn from the same tokens. Nothing custom, nothing off-brand. Drag through.

deck · title 16:9

Future-proof your career in data & AI

Investor briefingQ2 2026

deck · data slide

Graduate outcomes

5,000+ careers changed

social · 1:1

No degree.
No problem.

Free info session

story · 9:16

Spring cohort

12 weeks to job-ready.

Swipe up

web · sign-in

sign-in.html

Welcome back

web · dashboard, dark

dashboard.html

This week

68%Complete 4.9Avg. score

SQL fundamentals90%

Dashboards55%

social · 1:1

Scholarships

Veterans: full-tuition scholarships open.

Apply now

print · brochure A4

Why Colaberry

Instructor-led classes 1:1 mentorship A year of job support

Spring cohort

The school this system serves

2012teaching data & AI since

0careers changed

0countries reached

AAWCAG 2.2 — the floor

04Principles

Five beliefs
that break ties.

When a design decision is ambiguous, these settle it — in order.

Inclusive by default

Accessibility, plain language and generous touch targets are requirements, not extras. If everyone can't use it, it isn't done.

44px targets · AA contrast · plain words

Warm, not loud

Soft shapes, gentle motion, friendly copy — confidence without hype.

soft radii · 140–360ms motion · no shouting

Clarity over decoration

We teach data, so content and numbers lead. Ornament earns its place.

numbers first · ornament earns its place

One system, many makers

Semantic tokens and reusable components let a marketer, a developer and an AI produce the same brand.

245 tokens · 20 components · one voice

Consistent & constant

The cherry accent never changes; foreground inverts with the background. Trust is built by repetition.

the cherry never changes

05Start here

Three ways in.

Pick your lane — plain English, the living docs, or two lines of code.

Marketing & everyone

Describe it, download it.

Attach this project in a Claude chat.
Say what you need — format, size, your words.
Preview, tweak in plain English, download.

Copy "Using the Colaberry design system, create a [social post] at [1080×1080] for [the spring cohort]…"

Designers

The living reference.

Tokens with contrast ratios, logo and clear-space rules, the full WCAG audit, motion recipes, and every component in light and dark — interactive, not a PDF.

Open the docs

Developers

Two files, fully wired.

Link the stylesheet for tokens and fonts, load the bundle for components, reference semantic vars — dark mode comes free.