Universal CodeBox
HomeDesign System

Design System & UI Kit

The shared visual language for Universal CodeBox — drawn straight from the brand mark. Toggle light/dark from the header to see every token adapt. Colours are driven by app.config.ts and assets/css/main.css.

Logo

Inline SVG — scales crisply and themes with the brand gradients. Wordmark optional.

Universal CodeBox
Universal CodeBox
Universal CodeBoxUniversal CodeBoxUniversal CodeBox
Universal CodeBox

Colour & emotion

Every hue is chosen for the feeling an education platform must earn — trust to enroll, energy to act, calm to learn, reward to finish.

Azure Blue#0f72cc

primary · brand

TrustTechnologyClarity

Primary actions, links, focus rings, the laptop in the mark.

Golden Orange#f7941d

secondary · zeal

EnergyMotivationZeal

CTAs, highlights, “enroll now”, the circuit lines.

Navy Ink#0e2a4a

neutral · power

PowerAuthorityFocus

Headings, wordmark, dark sections, strong body text.

Coral#fa9072

accent · coral

PlayfulWarmthAttraction

Friendly tags, illustrations, “new” highlights.

Sky Mint#0ea5e9

info · learning

CalmLearningSpace

Info banners, hints, soft learning surfaces.

Emerald#10b981

success · growth

GrowthSuccessReward

Confirmations, progress, “completed”, certificates.

Brand palettes

Full 50→950 scales. Each can back a Nuxt UI colour role.

Brand — azure blue (primary)

50
100
200
300
400
500
600
700
800
900
950

Zeal — golden orange (secondary)

50
100
200
300
400
500
600
700
800
900
950

Coral — salmon (accent)

50
100
200
300
400
500
600
700
800
900
950

Source palette

Raw colours sampled from the brand asset. The earthen tones (tan, brown, taupe) anchor photography & illustration rather than UI chrome.

Coral

#fa9072

Azure

#3e91be

Navy ink

#20242f

Mint

#e0f4f2

Tan

#d5a088

Slate

#5e6166

Brown

#8b5e44

Taupe

#b1a492

Gradients & glow

Echo the logo's energy. Helpers live in main.css — keep them for hero moments.

bg-gradient-brand
bg-gradient-zeal
Aa Brand
Aa Zeal
glow-brand
glow-zeal

Semantic colours

Roles every component understands via color="…".

primary

Primary (brand)

secondary

Secondary (zeal)

success

Success (emerald)

info

Info (sky)

warning

Warning (amber)

error

Error (rose)

neutral

Neutral (slate)

Surface tokens

Theme-aware backgrounds — prefer these over raw gray-*.

bg-default

Page background

bg-muted

Subtle / alt sections

bg-elevated

Cards & raised surfaces

Typography

Inter for UI · JetBrains Mono for code.

Heading 1 — Extrabold

Heading 2 — Bold

Heading 3 — Semibold

Heading 4 — Semibold

Body text uses text-default. The quick brown fox jumps over the lazy dog while learning to code at Universal CodeBox.

Muted text (text-muted) — for secondary, supporting copy.

Dimmed small text (text-dimmed) — for hints and captions.

const greeting = "Hello, CodeBox"; // monospace / code

Buttons

Variants

Colours (solid)

Sizes

Icons & states

Badges

primarysecondarysuccessinfowarningerrorneutral
solidoutlinesoftsubtle

Alerts

Enrollment confirmed
You're in! Check your email for the welcome kit.
New recording available
Last week's live class has been uploaded to your library.
Class starts soon
Your live session begins in 15 minutes.
Payment failed
We couldn't process your card. Please try again.

Cards

Course 1

8 weeks · Live + Recorded

A hands-on, project-based course with weekly live sessions and downloadable notes.

Open

Course 2

8 weeks · Live + Recorded

A hands-on, project-based course with weekly live sessions and downloadable notes.

Open

Course 3

8 weeks · Live + Recorded

A hands-on, project-based course with weekly live sessions and downloadable notes.

Open

Brand in action

Blue earns trust; orange drives the action.

Next cohort · Limited seats

Build real projects. Ship with confidence.

Live mentorship, recorded lessons, notes, and a verified certificate — all in one place.

Form elements

Required

Avatars & progress

AL
Course progress64%