Level 1 — Deep Dive

Design System & CSS Architecture

Energy company palette, typography hierarchy, component library, and accessibility rules.

On this page

Energy Company Palette — Deep Blue, Impulse Orange, Warm Gray
Typography — Bricolage Grotesque, DM Sans, JetBrains Mono
Components — Modules, deep-dive links, breadcrumbs
Responsive & Accessibility — Breakpoints, WCAG AA

Energy Company Palette

Deep Blue, Impulse Orange, Warm Gray and all variants

The color system is based on three primary colors inspired by an energy company's visual identity: Deep Blue#000099 — Trust, depth, professionalism. Used for navigation, hero sections, and as subtle module numbers (12% opacity). for authority, Impulse Orange#FE8F11 — Energy, action, attention. Used for CTAs, progress bars, active states, and deep-dive links. for energy, and Warm Gray#E4DAD4 — Neutrality, readability. Used for separators, alternating backgrounds, and subtle borders. for neutral surfaces.

Color Palette

#000099

Deep Blue

--color-deep-blue

#FE8F11

Impulse Orange

--color-impulse-orange

#E4DAD4

Warm Gray

--color-warm-gray

#F3EFEB

Warm Gray BG

--color-warm-gray-bg

#000066

Code BG

--color-code-bg

#1A1A2E

Text

--color-text

/* CSS Custom Properties — Color Palette */
:root {
  --color-deep-blue:     #000099;
  --color-impulse-orange: #FE8F11;
  --color-warm-gray:     #E4DAD4;
  --color-code-bg:       #000066;
  --color-text:          #1A1A2E;
}

All colors are defined as CSS custom properties, enabling consistent usage and potential theme switching (e.g., dark mode) by overriding variables.

Typography

Bricolage Grotesque, DM Sans, JetBrains Mono, size scale

The typography hierarchy uses three Google Fonts with clear roles: Bricolage Grotesque for display headlines, DM Sans as body font, and JetBrains Mono for code blocks and technical labels.

Typography Preview

Bricolage Grotesque 800 — Display / H1

Learning Skill v2.0

DM Sans 400 — Body

The skill transforms any codebase into interactive multi-level HTML courses with up to four depth levels.

JetBrains Mono 400 — Code

HS = Complexity(0-3) + Relevance(0-3)

/* Typography scale (clamp for responsive) */
.hero h1      { font-size: clamp(2rem, 5vw, 3.2rem); }
.module-title  { font-size: clamp(1.4rem, 3vw, 2rem); }
.module-number { font-size: clamp(4rem, 10vw, 7rem); opacity: .12; }

Components

Modules, deep-dive links, breadcrumbs, level indicator, tooltips

The design system defines reusable components used across all generated courses.

Component: Level Indicator (4 Dots)

4 dots: L0 (done), L1 (active), L2 (empty), L3 (empty). Developers get 4, users 3, executives 2.

Component: Tooltip

Hover over this termTooltips appear on hover and explain technical terms inline. They use position:fixed and JavaScript for correct positioning. for an explanation.

Responsive & Accessibility

Breakpoints, WCAG AA, contrast rules

Mobile-first design with a main breakpoint at 640px. All color combinations meet WCAG AAWeb Content Accessibility Guidelines Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. contrast: white text on Deep Blue (#000099) has a ratio of 10.5:1.

/* Contrast ratios */
/* #FFFFFF on #000099 -> 10.5:1 (AAA) */
/* #1A1A2E on #FFFFFF -> 16.1:1 (AAA) */
/* #FE8F11 on #000066 ->  4.7:1 (AA)  */