DESIGN SYSTEM
CHANN3L Style Guide
Comprehensive color system, typography, component reference, and usage guidelines for the CHANN3L website.
Logos
Primary wordmark and variations. The “3” is always rendered in the accent color.
ON LIGHT BACKGROUND
ON DARK BACKGROUND
NAV BAR (INLINE)
WITH ASTERISK (SIDEBAR)
Usage Rules
- • Always use all-caps: CHANN3L, never “Chann3l” or “chann3l”
- • The “3” is always Electric green (
#A1FF62) regardless of context - • Minimum clear space: 1x the height of the “3” character on all sides
- • On dark backgrounds, remaining letters are white; on light, they are Ink (
#201D1D)
Brand Colors
Core palette used across the site. Three-color accent system: Blaze (action), Signal (premium), Ink (content).
Cloud
background
Surface
surface
Border
border
Ink
foreground
Muted
muted
Electric
accent
Purple
purple
Nav
nav-bg
Nav Edge
nav-border
Surface Colors
Background and surface variations for cards, overlays, and tinted states.
Card
card
Card Inner
card-inner
Card Hover
card-hover
Electric Muted
accent-muted
Purple Muted
purple-muted
Typography
Three type roles: Display (headings), Body (content), Mono (tags/labels). All use Geist font family.
DISPLAY HEADINGS
Display XL
display-heading · text-7xl · letter-spacing: -0.06em · weight: 400
Display Large
display-heading · text-5xl
Display Medium
display-heading · text-4xl
Display Small
display-heading · text-2xl
Usage: className="display-heading text-5xl"
BODY TEXT
Body Large — Used for hero subtitles and key descriptions. Geist Sans, 18px, regular weight, relaxed line-height.
text-lg · leading-relaxed
Body Base — Standard paragraph text for descriptions, section intros, and content blocks. Geist Sans, 16px.
text-base · leading-relaxed
Small / Muted — Secondary text, captions, metadata. Used for descriptions under cards, breadcrumbs, and helper text.
text-sm · text-muted
MONO TAGS
THIS IS A MONO TAG
Used for section labels, badge text, category tags, and system metadata. Geist Mono, uppercase, 11px, wide tracking.
className="mono-tag" · font-mono · uppercase · text-[0.6875rem] · tracking-wide
Cards
Nested background pattern — cards use Card bg (#F4F4F4) with an inner area of Card Inner (#EAEAEA). No heavy borders or shadows.
marketing
Email Campaign
Email Campaign
Full-lifecycle email campaign builder for any client.
Marketing
30 SKILLS
Find your skill
Browse the stack by channel, industry, role, or goal.
CARD ANATOMY
<!-- Skill Card: nested bg pattern -->
<div className="bg-card rounded-lg p-2">
<div className="bg-card-inner rounded aspect-[16/10]">
<!-- Visual preview area -->
<span className="mono-tag bg-accent text-foreground rounded-full">SKILL</span>
</div>
<div className="px-1 pt-2.5 pb-1">
<p className="text-sm font-medium">Skill Name</p>
<p className="text-xs text-muted">Description...</p>
</div>
</div>Section Themes
Three background contexts used to create visual rhythm across pages.
LIGHT (DEFAULT)
Light section content
Background is Cloud (#F4F4F4). Use for hero sections, content areas, and primary page backgrounds.
Usage: className="bg-background" or default body
SURFACE (ALTERNATE)
Surface section content
Background is Surface (#EAEAEA). Use to alternate with light sections for visual separation.
Usage: className="bg-surface"
DARK (NAV / FOOTER / CTA)
Dark section content
Background is Nav (#2F2C2C). Use for the floating nav, footer, marquee bar, and high-contrast CTAs.
Usage: className="bg-nav-bg text-white"
SIGNAL (PREMIUM / CTA)
Signal section content
Background is Signal (#00D4FF). Use for premium pricing cards, testimonials, and emphasis blocks.
Usage: className="bg-purple text-white"
Stack Layout
App-like dashboard pattern for the skill browser. Fixed sidebar + scrollable content grid.
CHANN3L*
THE VAULT
Welcome to the Stack
Email Campaign
Email Campaign
Facebook Ads
Facebook Ads
Brand Voice
Brand Voice
Blog Content
Blog Content
LAYOUT STRUCTURE
<div className="flex min-h-screen">
<!-- Fixed sidebar: 288px, bg-card, border-r -->
<aside className="w-72 bg-card border-r border-border fixed h-full">
<Logo />
<CategoryNav /> <!-- mono counts + names -->
<SuiteLinks />
</aside>
<!-- Scrollable main: bg-surface -->
<main className="flex-1 ml-72 bg-surface">
<TopBar /> <!-- breadcrumb + sort dropdown -->
<WelcomeSearch /> <!-- display heading + search input -->
<SkillGrid /> <!-- 3-column grid of SkillCards -->
</main>
</div>Contrast Ratios
Key text/background combinations and their WCAG compliance.
| TEXT | BACKGROUND | RATIO | PREVIEW |
|---|---|---|---|
| Ink #201D1D | Cloud #F4F4F4 | 13.2:1 | Sample |
| Muted #817F7F | Cloud #F4F4F4 | 4.6:1 | Sample |
| White #FFFFFF | Nav #2F2C2C | 10.8:1 | Sample |
| Blaze #FF8C00 | Nav #2F2C2C | 5.8:1 | Sample |
| Ink #201D1D | Signal #00D4FF | 7.4:1 | Sample |
| Ink #201D1D | Blaze #FF8C00 | 5.1:1 | Sample |
| Signal #00D4FF | Nav #2F2C2C | 8.2:1 | Sample |
All primary combinations pass WCAG 2.1 Level AA (4.5:1 normal text, 3:1 large text).
Quick Reference
How to tell Claude to apply styles.
HOW TO THEME
<!-- Default light section --> <section className="py-20 px-6"> <!-- Alternate surface section --> <section className="py-20 px-6 bg-surface"> <!-- Dark section (nav/footer) --> <section className="bg-nav-bg text-white"> <!-- Purple CTA section --> <section className="bg-purple text-white">
HOW TO TELL ME
- “Use a surface section” = bg-surface alternate
- “Make it dark” = bg-nav-bg with white text
- “Add a Signal CTA” = bg-purple with white text
- “Use the stack layout” = sidebar + grid pattern
- “Mono tag it” = mono-tag class, uppercase
- “Display heading” = display-heading class, tight tracking
- “Blaze button” = bg-accent primary CTA
- “Signal button” = bg-purple secondary CTA