Switch between the rendered Visual preview and the Raw DESIGN.md.
HTB Academy's design system embodies a sophisticated, tech-forward aesthetic rooted in cybersecurity expertise and professional excellence. The visual identity balances a dark, immersive atmosphere with vibrant lime-green accents that command attention and convey energy and precision. The interface feels premium yet accessible, leveraging deep navy and charcoal backgrounds to create focused learning environments while neon highlights inject dynamism and urgency. The overall mood is authoritative, modern, and security-conscious—evoking trust, mastery, and cutting-edge technical knowledge.
Key Characteristics
#9FEF00) accents for primary CTAs and highlights#9FEF00): Primary call-to-action buttons, highlights, and emphasis elements. Draws user attention and signals interactivity in the dark interface.#1A2332): Primary background for elevated surface containers and dark mode UI elements. Provides visual depth and professionalism.#17A2B8): Secondary accent for informational states, highlights, and alternative interactive elements. Pairs with lime for visual interest.#A4B1CD): Tertiary text and muted UI elements. Used extensively for secondary navigation and de-emphasized content.#FFFFFF): Primary text on dark backgrounds; button and link text for contrast. High contrast ensures readability.#141D2B, #1C283C, #263042, #111927): Background layering for depth and visual separation of UI regions. Darkest tones used for base backgrounds; lighter charcoals for elevated surfaces.#FFFFFF): Primary readable text on all dark backgrounds.#D0D5DD): Subtle borders and dividers; minimal visual weight.#000000): Text contrast and shadows in specific contexts.#1A2332): Elevated container background with soft border (rgba(0, 0, 0, 0.125)). Used for content cards and modal surfaces.#D0D5DD): Subtle dividers and form field borders; low visual prominence.#DC3545, #FF3E3E): Error messages, validation failures, and destructive actions.#FFC107, #FFAF00): Warning states, caution notices, and non-critical alerts.neue-haas-unica, sans-serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Neue Haas Unica | 72px | 800 | 82.8px | 0px | Hero headlines; maximum visual impact |
| Heading H3 | Neue Haas Unica | 42px | 800 | 48.3px | 0px | Section headers; primary emphasis |
| Heading H2 | Neue Haas Unica | 32px | 800 | 36.8px | 0px | Subsection titles; moderate emphasis |
| Body / Paragraph | Neue Haas Unica | 24px | 400 | 36px | 0px | Standard readable text; learning content |
| Link / Navigation | Neue Haas Unica | 14px | 600 | 21px | 0px | Interactive text; menu items; emphasized links |
| Span / Supporting | Neue Haas Unica | 14px | 400 | 21px | 0px | Metadata, timestamps, labels |
| Button Text | Neue Haas Unica | 12.5px | 400 | 12.5px | 0px | CTA labels; compact clickable text |
| List Item / Caption | Neue Haas Unica | 10px | 400 | 15px | 0px | Small text; captions; secondary UI labels |
#9FEF00#141D2B12.5px40012px 20px6px1px solid #9FEF00auto (min 40px)12.5px#8DE600, text #111927#7DD900, box-shadow 0px 2px 8px rgba(159, 239, 0, 0.3)transparent#A4B1CD10px40016px 20px6px1px solid #FFFFFF57px (measured)160px (measured)15pxrgba(255, 255, 255, 0.1), text #FFFFFFrgba(255, 255, 255, 0.2), border #FFFFFFtransparent#FFFFFF10px4000px 0px0pxnoneauto15px#9FEF00, text-decoration underline#8DE600, text-decoration underline#FFFFFF#A4B1CD10px4000px50%none48px48px15px#F0F0F0, text #141D2B#E8E8E8, box-shadow 0px 2px 8px rgba(0, 0, 0, 0.15)#1A2332#FFFFFF18px40048px 48px10px1px solid rgba(0, 0, 0, 0.125)rgba(0, 0, 0, 0.1) 0px 4px 36px 13px442px (measured)525px (measured)27pxrgba(0, 0, 0, 0.15) 0px 8px 48px 16px, background #1C283C#111927 or #141D2B#A4B1CD14px40024px 24px0pxnonenone21px#1C283Crgba(0, 0, 0, 0.2)#FFFFFF14px40012px 16px6px1px solid rgba(212, 213, 221, 0.3)40px21px#A4B1CD#9FEF00, box-shadow 0px 0px 0px 3px rgba(159, 239, 0, 0.1)#FF3E3E, box-shadow 0px 0px 0px 3px rgba(255, 62, 62, 0.1)transparent1px solid #A4B1CD4px20px#9FEF00, border #9FEF00, inner checkmark #141D2B0px 0px 0px 3px rgba(159, 239, 0, 0.1)transparent#A4B1CD10px40032px 24px121px (measured, includes logo/spacing)15px#FFFFFF, text-decoration none#9FEF00transparent#A4B1CD14px400/ in #A4B1CD#FFFFFF, weight 600#9FEF00Base Unit: 4px
Spacing Scale:
4px (xs) — Minimal gaps; internal component spacing8px (sm) — Small margins; tight grouping12px (md) — Standard padding; form labels16px (lg) — Content margins; standard gaps20px (xl) — Moderate padding; container spacing24px (2xl) — Section padding; horizontal alignment32px (3xl) — Large margins; section separation40px (4xl) — Generous spacing; content blocks48px (5xl) — Card padding; premium containers64px (6xl) — Major sections; hero spacing72px (7xl) — Page-level padding; hero bottoms96px (8xl) — Full-page margins; layout extremesUsage Context:
12px (label–input gap), 20px (field–field)48px internal, 32px card-to-card64px–96px between major content blocks32px vertical (top/bottom), 24px horizontal1440px (measured from component tokens)24px horizontal gap between columns24px on desktop, 16px on tablet, 12px on mobile)1440px with 24px margins)HTB Academy employs generous, deliberate whitespace to communicate premium quality and focus. Dark backgrounds demand increased breathing room; content blocks are separated by 64px–96px vertical gaps. Horizontal padding is symmetrical and balanced; cards receive substantial internal padding (48px) to prevent visual cramping. The design prioritizes clarity and focus over information density, reflecting the educational mission: learners need space to absorb complex security concepts.
0px — Nav bars, full-width sections, flat surfaces1px — Badge borders; minimal rounding4px — Subtle rounding; minor UI elements6px — Buttons, input fields, secondary cards10px — Primary elevated cards; major components50% — Circular icon buttons; avatar images| Level | Treatment | Use |
|---|---|---|
| Base / Ground (0) | No shadow; solid background | Flat surfaces, body backgrounds, nav |
| Raised / Hover (1) | rgba(0, 0, 0, 0.1) 0px 2px 8px 0px | Button hover states, subtle depth |
| Elevated / Card (2) | rgba(0, 0, 0, 0.1) 0px 4px 36px 13px | Content cards, modals, floating containers |
| High / Focus (3) | rgba(0, 0, 0, 0.15) 0px 8px 48px 16px | Card hover, active overlays, modal focus |
Shadow Philosophy: Shadows in HTB Academy are minimal and restrained. Rather than aggressive elevation, the design relies on color contrast and border definition to establish hierarchy. Shadows introduce subtle depth for interactive elements (cards, buttons) without creating visual heaviness. The small, diffuse shadows (blur 36px, spread 13px) maintain the premium, spacious aesthetic while signaling interactivity and layering.
#9FEF00 lime for all primary CTAs and highlights; it is the system's energy signal.#111927, #141D2B, #1A2332) for accessibility and brand cohesion.48px for cards, 24px for sections) to reinforce premium feel.#FFFFFF on dark, #141D2B on light) to ensure WCAG AA compliance.4px for precision and consistency.#A4B1CD for secondary text and navigation; it provides visual rest.6px for buttons and inputs; 10px for elevated cards.box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 36px 13px) for card depth only.#17A2B8) as a secondary accent for informational states and alternative CTAs.#9FEF00 for primary actions and highlights only.#A4B1CD on #141D2B); maintain WCAG AA compliance with #FFFFFF on dark.0px, 1px, 4px, 6px, 10px, 50%).0px; Neue Haas Unica is designed tight.24px; the system requires breathing room for readability.#FF3E3E) for warnings; reserve them for destructive or critical states only.| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 640px | 1 column; 12px margins; 32px padding; font sizes –2px; 100% width buttons |
| Tablet | 640px–1024px | 6 columns; 16px margins; 40px padding; navigation collapses to icon menu |
| Desktop | 1024px–1440px | 12 columns; 24px margins; full navigation visible; card layouts 2-up |
| Large Desktop | > 1440px | Max-width container 1440px; centered with fixed margins |
44px × 44px (iOS standard); 48px × 48px preferred for security software44px height; 16px horizontal padding40px height; 16px vertical padding20px × 20px with 16px padding around48px × 48px for circular buttons72px on desktop, 48px on tablet, 32px on mobile48px on desktop → 40px on tablet → 24px on mobile96px on desktop → 64px on tablet → 32px on mobile10%–20% on mobile to maintain hierarchy#9FEF00)#FFFFFF border)#141D2B, #111927)#1A2332)#FFFFFF)#FFFFFF)#A4B1CD)#D0D5DD) or semi-transparent black (rgba(0, 0, 0, 0.125))#FF3E3E)#FFC107 or #FFAF00)#17A2B8)Typography Foundation: All text uses Neue Haas Unica (400, 600, 800 weights only). No font mixing. Reference the Hierarchy table for exact sizes and line heights; scale down 10–20% on mobile breakpoints.
Color Accuracy: Lime (#9FEF00) is primary; use sparingly on buttons and highlights. Dark backgrounds are always from the charcoal scale (#111927–#1A2332). White (#FFFFFF) is primary text on dark. Medium Gray (#A4B1CD) is secondary. Never deviate from the 15-color palette.
Spacing Discipline: Base unit is 4px. All margins/padding are multiples of 4px. Cards receive 48px internal padding; sections receive 64px–96px vertical gaps. Horizontal margins are 24px on desktop, 16px on tablet, 12px on mobile.
Component Consistency: Buttons use border radius 6px with 12.5px font and 12px vertical padding (minimum). Cards use 10px radius, #1A2332 background, and rgba(0, 0, 0, 0.1) 0px 4px 36px 13px shadow. Inputs use 6px radius, rgba(0, 0, 0, 0.2) background, and 1px solid rgba(212, 213, 221, 0.3) border.
Interactive States: All interactive elements have hover (background/text shift), active (shadow/color intensity), and focus (3px glow using component color at 0.1 alpha) states. Use lime (#9FEF00) glow for primary elements; gray glow for secondary.
Responsive Mobile-First: Design for mobile first (640px breakpoint). Desktop layout breaks into 12 columns, tablet 6 columns, mobile 1 column. Scale typography down 10–20% on mobile; collapse padding from 48px to 24px; stack cards vertically.
Depth & Shadow Minimal: Avoid excessive shadows. Use only on elevated cards and button hovers. Standard card shadow is rgba(0, 0, 0, 0.1) 0px 4px 36px 13px; intensify on hover to rgba(0, 0, 0, 0.15) 0px 8px 48px 16px. Flat surfaces have no shadow.
Accessibility First: Maintain WCAG AA contrast ratios. White text on dark backgrounds, dark text on light backgrounds. Minimum touch target 44px (iOS) or 48px (preferred). Focus states visible with 3px colored glow at 0.1 alpha opacity.
Brand Voice in UI: Lime accents convey energy and mastery; dark backgrounds convey security and professionalism. Generous whitespace conveys premium quality. Use this psychology consistently across all screens to reinforce the "hacker academy" positioning.
Final Validation: Before shipping, verify: (a) all text is Neue Haas Unica, (b) all colors match the 15-color palette exactly, (c) all spacing is a multiple of 4px, (d) all buttons/cards use specified radii and shadows, (e) all typography matches the Hierarchy table, (f) all interactive elements have hover/active/focus states, (g) mobile breakpoints collapse layouts and scale typography.