Switch between the rendered Visual preview and the Raw DESIGN.md.
Thunder AI's design system embodies a modern, professional academy management interface built on clarity and purposeful hierarchy. The aesthetic combines clean geometric forms with soft spacing, creating an inviting yet structured environment perfect for educational dashboards and administrative workflows. The design prioritizes accessibility through generous whitespace, consistent visual weight, and a restrained color palette that emphasizes actionable elements while maintaining visual calm. The typography-forward approach using Raleway throughout establishes a cohesive, approachable personality that feels both authoritative and friendly—ideal for an AI-powered learning platform.
Key Characteristics
#6C50BF): Core brand identity for primary CTAs, active states, and highlighted course completions#212529): Primary text color, backgrounds, and structural elements used across 927 instances#FFFFFF): Primary surface color for cards, inputs, and content areas#0DCAF0): Secondary accent for UI/UX course indicators and complementary highlights#0D6EFD): Primary interactive element color, links, and alternative CTAs#008FFB): Chart data visualization and tertiary accent for specialized metrics#6C50BF): "Join" buttons and primary secondary actions#343A40): Alternative primary action background with high contrast#000000): Navigation items, borders, and secondary interactive elements#F8F9FA): Subtle background differentiation for sections and hover states#EEEEEE): Borders, dividers, and input strokes#6C757D): Secondary text, labels, and de-emphasized content#ADB5BD): Tertiary text and muted UI elements#E9ECEF): Section backgrounds and card separators#DEE2E6): Fine borders and structural lines#FFFFFF): Default container with 6px border-radius#FFFFFF): Modals and elevated surfacesrgba(33, 37, 41, 0.03)): Card headers with minimal contrast#39C645): Positive actions, "Paid" status badges, and completion indicators#FFC107): Warning states, "Pending" status, and attention-requiring items#DC3545): Destructive actions, "Refunded" status, and error messages#FF1F35): Alternative error state for critical warningshttps://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap)-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Page Title | Raleway | 28px | 600 | 32px | 0px | Academy Dashboard heading |
| Heading XL (H5) | Raleway | 20px | 500 | 24px | 0px | Section headers, card titles |
| Heading LG (H6) | Raleway | 16px | 500 | 19.2px | 0px | Subsection headers, metric labels |
| Body Text | Raleway | 16px | 400 | 22px | 0px | Main content, descriptions |
| Body Emphasis | Raleway | 18px | 400 | 21px | 0px | Highlighted stats, call-outs |
| Label / Caption | Raleway | 14px | 400 | 22px | 0px | Form labels, metadata |
| Button Text | Raleway | 16px | 400 | 22px | 0px | Action buttons, CTAs |
| Helper Text | Raleway | 12px | 400 | 18px | 0px | Form hints, timestamps |
Primary Purple Button
#6C50BF#FFFFFF4px 8px800px (pill shape)1px solid transparentrgba(108, 80, 191, 0.9)), slight scale 1.02#5C3FA8#D1C5E6, text #FFFFFF, cursor not-allowedSecondary Dark Button
#212529#FFFFFF4px 8px800px1px solid #212529#0F1113, border #0F1113#000000Ghost / Outline Button
#2125296px 8px6px1px solid transparent#F8F9FA, border #DEE2E6#EEEEEE, text #0D6EFDIcon Button
#2125290px6px1px solid transparent#F8F9FA#0D6EFD 1px solid"Join" Class Button
#6C50BF6px 8px6px1px solid rgba(108, 80, 191, 0.3)#6C50BF, background rgba(108, 80, 191, 0.05)Standard Card
#FFFFFF#2125290px6px0px 1px 3px rgba(0, 0, 0, 0.1)16pxCard Header
rgba(33, 37, 41, 0.03)24px5px 5px 0px 0px1px solid #DEE2E6Card Body
#FFFFFF24px0px 0px 5px 5pxStat Box (e.g., "Active Students")
#FFFFFF1px solid #EEEEEE8px20px0px 2px 4px rgba(0, 0, 0, 0.05)rgba(108, 80, 191, 0.1) (light purple tint)#39C645 for increases, #DC3545 for decreasesModal / Overlay
#FFFFFF8pxrgba(0, 0, 0, 0.15) 0px 8px 16px 0px32pxText Input
#FFFFFF#2125296px 16px800px (pill style for search)1px solid #EEEEEE#0D6EFD 2px solid, box-shadow 0px 0px 0px 3px rgba(13, 110, 253, 0.1)#ADB5BD#DC3545 1px solidStandard Input (non-pill)
#FFFFFF#2125296px 12px6px1px solid #EEEEEE#0D6EFD, box-shadow 0px 0px 0px 3px rgba(13, 110, 253, 0.1)Checkbox
4px1px solid #DEE2E6#6C50BF, border #6C50BF, checkmark #FFFFFF0px 0px 0px 3px rgba(108, 80, 191, 0.2)Form Label
#2125298pxForm Hint / Helper Text
#6C757D4pxSidebar Navigation
#FFFFFF#2125290px (items use individual padding)Navigation Item
12px 16px6px#F8F9FA#E9ECEF, text #6C50BF, font-weight 5004px solid #6C50BF (active only)Breadcrumb / Back Link
#6C757D#0D6EFD, text-decoration underlineTop Navigation Bar
#FFFFFF16px 24px1px solid #DEE2E6Success Badge ("Paid")
#D1E7DD#39C6454px 12px4px1px solid #39C645Pending Badge ("Pending")
rgba(255, 193, 7, 0.15)#FFC1074px 12px4px1px solid #FFC107Refunded Badge
rgba(220, 53, 69, 0.15)#DC35454px 12px4px1px solid #DC3545Course Completion Bar
#EEEEEE#6C50BF, #0DCAF0, #FFC107)3px#212529Base Unit: 4px
Scale:
4px: Minimal spacing, micro-interactions8px: Tight spacing, internal component padding12px: Form field padding, icon-text spacing16px: Standard padding, component margins20px: Section internal spacing24px: Card padding, moderate section margins28px: Between major sections32px: Large component padding, container margins40px: Spacious section gaps48px: Page-level vertical rhythmUsage Context:
20px padding internally24px6px vertical, 16px horizontal12px vertical, 16px horizontal24px–32pxMax Width: 1400px (standard dashboard width)
Column Strategy: 12-column grid system with breakpoints at 768px and 1024px
Section Patterns:
min-height: calc(100vh - 60px)gap: 20pxThunder AI embraces breathing room throughout the interface. Ample whitespace around interactive elements reduces cognitive load and emphasizes actionable components. Section margins use multiples of 24px–48px, while internal component spacing uses tighter 12px–20px intervals. This creates a visual hierarchy where proximity signals relationship and distance signals distinction. Dashboard cards float in whitespace rather than touching edges, reinforcing modularity and scanability.
4px: Inputs with compound layouts, small buttons, minor UI elements5px: Card headers and footers6px: Standard card corners, ghost buttons, icon buttons, modal corners8px: Large modals, oversized cards50%: Avatar images (circular)800px: Pill-shaped buttons (search, primary CTAs)| Level | Treatment | Use |
|---|---|---|
| Base | No shadow, flat | Page background, card flat states |
| Level 1 | 0px 1px 3px rgba(0, 0, 0, 0.1) | Standard cards, subtle lift |
| Level 2 | 0px 2px 4px rgba(0, 0, 0, 0.075) | Input fields, minor components |
| Level 3 | 0px 4px 8px rgba(0, 0, 0, 0.12) | Hovered cards, medium elevation |
| Level 4 | rgba(0, 0, 0, 0.176) 0px 16px 48px 0px | Dropdowns, tooltips, popovers |
| Level 5 | rgba(0, 0, 0, 0.15) 0px 8px 16px 0px | Modals, critical overlays, dark modals |
Shadow Philosophy
Thunder AI uses subtle, directional shadows that simulate realistic lighting from above. Shadows increase in blur and spread with elevation, creating clear visual hierarchy. The primary shadow palette avoids harsh blacks (rgba(0, 0, 0, 0.15)–0.176) in favor of soft, semi-transparent shadows that preserve background legibility. This approach maintains the clean, minimal aesthetic while providing necessary depth cues for complex dashboards. Shadows are never used decoratively—only functionally to separate layers and guide focus.
#6C50BF) for primary actions — "Join", "Add New Course", key CTAs signal brand identity800px reserved for high-impact CTAs like "Join" or "Add Course"#0D6EFD) with 3px rgba(13, 110, 253, 0.1) shadow for keyboard accessibility0px 1px 3px, 0px 2px 4px) to maintain clean, minimal feel#212529) or transparent buttons where purple (#6C50BF) should be used; breaks hierarchy6px or 800px (search); inconsistent radius breaks the system#ADB5BD for accessibility; too light or dark reduces form usability| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | <768px | 1-column layout, sidebar collapses to hamburger, card padding reduces to 16px, font sizes reduce by 2px for body text |
| Tablet | 768px–1199px | 2-column card grid, gap: 16px, sidebar visible but narrower (170px), tables scroll horizontally |
| Desktop | ≥1200px | 4-column card grid, gap: 20px, full sidebar (204px), tables fully responsive |
| Large Desktop | ≥1400px | Max-width container (1400px), centered layout, extended card grid up to 6 columns |
Minimum interactive element sizes:
44px × 44px (for mobile touch accuracy)36px × 36px (acceptable minimum with adequate padding)38px height (16px font + 6px padding top/bottom + 12px space)40px height with 12px vertical padding24px × 24px (16px element + 8px click zone)Mobile (<768px):
16px margins24px → 16px, section margins 24px → 16pxTablet (768px–1199px):
24px maintained, section margins 20pxDesktop (≥1200px):
24px throughout#6C50BF) — "Join", "Add New Course", primary buttons#212529) — Alternative actions, dark emphasis#212529) — All paragraph and label text#6C757D) — Metadata, timestamps, descriptions#FFFFFF) — Card and surface backgrounds#39C645) — "Paid" badges, positive metrics, ✓ checkmarks#FFC107) — "Pending" badges, warnings, attention items#DC3545) — "Refunded" badges, destructive actions, error messages#0DCAF0) — Secondary highlights, alternative course indicators#0D6EFD) — Hyperlinks, focus states#EEEEEE) — Card borders, dividers, input strokesrgba(33, 37, 41, 0.03)) — Card headers, section backgroundsStart with Raleway font family at specified weights: 400 for body text, 500 for headings, 600 for badges/labels. Never substitute typefaces; this is non-negotiable for brand consistency.
Apply the 4px spacing grid religiously: All margins, padding, and gaps snap to multiples of 4px (8, 12, 16, 20, 24, 28, 32, 40, 48). Never use arbitrary values like 15px or 23px.
Use purple (#6C50BF) for all primary CTAs: Buttons labeled "Join", "Add New Course", or top-level actions must use purple with pill-shape (border-radius: 800px). Never use dark or transparent for primary actions.
Implement semantic color states without exception: Success = #39C645, Pending = #FFC107, Error = #DC3545. Do not invent alternative colors or gradients for status; the system is small and intentional.
Card structure is always consistent: Background #FFFFFF, padding 24px, border-radius 6px, shadow 0px 1px 3px rgba(0, 0, 0, 0.1). Stat boxes add a subtle border (1px solid #EEEEEE) and light-tinted icon backgrounds (rgba(108, 80, 191, 0.1) for purple icons).
Typography hierarchy is size + weight, never size alone: Use the exact sizes from the hierarchy table (H5: 20px, H6: 16px, Body: 16px, Label: 14px). Weight differentiates roles: 400 = body, 500 = headings, 600 = emphasis/badges.
All interactive elements require focus states: Border #0D6EFD 2px solid with box-shadow: 0px 0px 0px 3px rgba(13, 110, 253, 0.1). This is critical for keyboard navigation and accessibility compliance.
Shadows indicate elevation, not decoration: Use only the 5 shadow levels defined in section 6. Level 1 (0px 1px 3px rgba(0, 0, 0, 0.1)) for cards, Level 5 (rgba(0, 0, 0, 0.15) 0px 8px 16px 0px) for modals. No custom shadows.
Input styling is split between pill-search and standard: Search inputs use border-radius: 800px, height 38px, padding 6px 16px. Standard form inputs use border-radius: 6px, padding 6px 12px, height auto (min 36px). Never mix these styles.
Responsive breakpoints are fixed: Mobile <768px (1 column, hamburger nav), Tablet 768–1199px (2 columns), Desktop ≥1200px (4 columns). Scale padding and font sizes accordingly per the collapsing strategy; don't invent intermediate breakpoints.
Navigation is hierarchical and state-driven: Active nav items highlight with background #E9ECEF + left border 4px solid #6C50BF + weight 500. Hover states use background #F8F9FA. Never underline or change color alone.
Card headers follow the overlay pattern: Background rgba(33, 37, 41, 0.03), padding 24px, border-radius 5px 5px 0px 0px, border-bottom 1px solid #DEE2E6. This subtle contrast separates header from body without harsh lines.