Switch between the rendered Visual preview and the Raw DESIGN.md.
SchoolAura's design system embodies a modern, approachable aesthetic for educational technology. The visual language combines warm, energetic golden-yellow accents with confident blues and clean neutrals, creating an environment that feels both professional and inviting. The design prioritizes clarity and accessibility, with generous whitespace and structured layouts that guide users through complex school management workflows. Bold typography, subtle shadows, and rounded corners soften the interface while maintaining a sense of institutional trust. The system balances playful educational warmth with enterprise-grade reliability, making it equally comfortable for administrators, teachers, and parents navigating a comprehensive platform.
Key Characteristics
#0D6EFD): Used for primary buttons, active navigation, and call-to-action elements; conveys trust and interactivity#FFC107): Golden yellow used for highlights, secondary accents, and decorative elements; communicates warmth and educational focus#0DCAF0): Light cyan for tertiary interactions and highlight backgrounds; provides visual separation#343A40): Deep charcoal for secondary text and subtle visual layers#198754): Green for positive confirmations, approved states, and success messages#DC3545): Red for error states, destructive actions, and critical alerts#FFB435): Amber-orange for warning messages, attention-requiring states, and cautions#F29800): Deeper orange-gold for secondary warning contexts#000000): Primary text color, dark UI elements, and typography#FFFFFF): Foreground surfaces, light backgrounds, and contrast elements#F8F9FA): Soft background color for sections and subtle differentiation#E9ECEF): Mid-tone gray for borders and disabled states#CED4DA): Input field borders and divider lines#DEE2E6): Secondary borders and light dividers#ADB5BD): Secondary and tertiary text#6C757D): Muted text, help text, and low-emphasis labels#495057): Placeholder text and disabled form elements#C6C7C8): Very subtle borders and background tints#FFFFFF): Clean white for all card and container backgrounds#F8F9FA): Soft light gray for section distinction and grouped content areas#DEE2E6): Standard border color for form inputs and component outlines#DC3545): Form validation errors, error messages, destructive confirmations#FFC107, #FFB435): Caution states, warnings, incomplete actions#198754): Confirmations, approved states, successful operations#0D6EFD): Informational messages and helpful contextPrimary Font: Inter (fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif)
Secondary Display Font: Denk One (fallback: serif; used for hero and high-emphasis headings)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Inter | 31.68px | 700 | 38.016px | 0px | Hero headlines and primary page titles |
| Display / H2 | Denk One | 70px | 500 | 77px | 0px | Large hero sections and major dividers |
| Heading / H3 | Inter | 24px | 600 | 28.8px | 0px | Section headings and feature titles |
| Heading / H4 | Inter | 20px | 600 | 24px | 0px | Subsection headings and card titles |
| Heading / H5 | Inter | 18px | 600 | 21.6px | 0px | Minor headings and labels |
| Heading / H6 | Inter | 16px | 600 | 19.2px | 0px | Subheadings and emphasized labels |
| Body | Inter | 16px | 400 | 24px | 0px | Primary body text and descriptions |
| Body Small | Inter | 14px | 400 | 21px | 0px | Secondary body text and captions |
| Button | Inter | 14px | 400 | 21px | 0px | All button labels and CTAs |
| Input | Inter | 16px | 400 | 24px | 0px | Form input text and placeholder |
| Link | Inter | 16px | 400 | 24px | 0px | Hyperlinks and navigation text |
| Code / Mono | Courier New | 13px | 400 | 19.5px | 0px | Code snippets and technical references |
| Caption | Inter | 12px | 400 | 18px | 0px | Form hints and footer text |
#0D6EFD#FFFFFF14px60010px 24px6pxnonenone36px#0B5ED7, text #FFFFFF#0A58CA, text #FFFFFF#E9ECEF, text #ADB5BDtransparent#0D6EFD14px4006px 12px0px1px solid #0D6EFDnone36px#E7F1FF, text #0B5ED7, border #0B5ED7#D1E7FF, text #0A58CA, border #0A58CA#ADB5BD, border #DEE2E6transparent#00000014px4006px 12px0pxnonenone36px#F8F9FA, text #000000#E9ECEF, text #000000#ADB5BDtransparent#FFC10714px60012px 28px25px2px solid #FFC107none40px#FFC107, text #000000#FFB435, text #000000, border #FFB435#DEE2E6, border #DEE2E6#FFC107#FFFFFF20px12px50%nonenone40px#FFB435#F29800#FFFFFF#21252916px40020px15pxnone0px 0px 10px 0px rgba(76, 76, 76, 1)24px0px 8px 16px 0px rgba(0, 0, 0, 0.15)#FFFFFF#21252916px24px15pxnone0px 16px 48px 0px rgba(0, 0, 0, 0.176)24px#F8F9FA#21252960px 80px0pxnonenone#FFFFFF#000000#CED4DA16px40010px 12px6px1px solid #CED4DA40px24px#0D6EFD, box shadow 0px 0px 0px 3px rgba(13, 110, 253, 0.1)#E9ECEF, text #6C757D, border #DEE2E6#FFFFFF#000000#CED4DA16px10px 12px 10px 12px6px1px solid #CED4DA40px#0D6EFD, box shadow 0px 0px 0px 3px rgba(13, 110, 253, 0.1)#21252914px6008px21px#6C757D12px4004px18px#FFFFFF#00000016px4008px 0px52px1px solid #DEE2E624px#00000016px4008px 16px0px#0D6EFD, background transparent#0D6EFD, border bottom 2px solid #0D6EFD, padding bottom adjusted to 6px#FFC107#00000014px60010px 20px25px1px solid #FFC107#FFB435, text #000000#D1E7DD#19875412px6006px 10px12px1px solid #198754#F8D7DA#DC354512px6006px 10px12px1px solid #DC3545#FFF3CD#F2980012px6006px 10px12px1px solid #F29800#CFF4FC#0D6EFD12px6006px 10px12px1px solid #0D6EFDBase Unit: 8px
Spacing Scale:
8px: Tight spacing for inline elements, icon margins12px: Button padding, form field padding (horizontal)16px: Standard padding for components, small section gaps20px: Card padding, medium spacing between elements24px: Large card padding, section dividers48px: Section margins, medium layout spacing60px: Major section vertical spacing80px: Large section padding, layout breathing room100px: Hero section spacing, maximum visual breathing roomUsage Context:
8px–12px16px–20px60px–80px48px–100pxMax Width: 1440px for full-width sections
Container Padding: 80px horizontal for desktop, 48px for tablet, 20px for mobile
Column Strategy:
16px gutters12px guttersSection Patterns:
100px vertical padding60px–80px padding20px gapsSchoolAura prioritizes generous whitespace to reduce cognitive load in data-dense interfaces. Breathing room between sections, cards, and text groupings improves scannability and allows users to focus on actionable elements. The design avoids crowded layouts; empty space is a design feature, not wasted space. This approach is especially critical for school management interfaces where users process enrollment data, schedules, and reports—clarity through space is paramount.
0px): Navigation bars, section dividers, full-width backgrounds6px): Buttons, form inputs, compact modals15px): Cards, elevated containers, standard component surfaces50%): Icon buttons, avatars, fully rounded elements25px–28px): Call-to-action buttons, fully rounded rectangular buttons| Level | Treatment | Use |
|---|---|---|
| Flat (0) | No shadow, box-shadow: none | Navigation bars, text, inline elements |
| Raised (1) | 0px 0px 10px 0px rgba(76, 76, 76, 1) | Standard cards, container backgrounds |
| Elevated (2) | 0px 8px 16px 0px rgba(0, 0, 0, 0.15) | Hovered cards, modal overlays, hover states |
| Floating (3) | 0px 16px 48px 0px rgba(0, 0, 0, 0.176) | Prominent cards, elevated sections, dialogs |
Shadow Philosophy: SchoolAura uses soft, controlled shadows to create subtle visual hierarchy. Shadows are never harsh or high-contrast; they establish depth through darkness and softness rather than sharp definition. The shadow treatment supports the educational, approachable aesthetic by maintaining clarity while adding refinement. Shadows intensify on interaction (hover, focus) to provide tactile feedback and guide user attention to interactive elements.
#FFC107 golden yellow sparingly as an accent; it energizes interfaces without overwhelming16px padding for card content; this creates visual rhythm across layouts#0D6EFD blue exclusively to primary actions and active states for clear affordance15px border radius on all cards to reinforce the soft, approachable aesthetic#F8F9FA light gray backgrounds to group related content and improve scannability#198754 success, #DC3545 error, #FFB435 warning) consistently across all alert and validation states60px–80px gaps in hero and section contexts for breathing room#000000) on dark backgrounds; always ensure WCAG AA contrast (4.5:1 for body text)0px, 6px, 15px, 25px, 50%)10px vertical or 12px horizontal; maintain touch target minimum of 36px14px; smaller text compromises readability and accessibility1.5x font size; this causes readability issues at small sizes| Name | Width | Key Changes |
|---|---|---|
| Mobile | 320px–599px | Single-column layout, 20px padding, 14px base font, full-width cards, stacked navigation |
| Tablet | 600px–1023px | 2-column grid, 48px padding, 15px base font, 2-column card grids, hamburger menu |
| Desktop | 1024px–1439px | 3-column grid, 60px padding, 16px base font, multi-column layouts, full navigation bar |
| Large Desktop | 1440px+ | Max-width container (1440px), 80px padding, 3+ column grids, full-featured navigation |
40px for buttons and input fields44px for interactive elements (buttons, links, form controls)8px between adjacent touch targets to prevent accidental interaction40px × 40px minimum (includes padding)24px × 24px minimum with 8px click zone expansion44px minimum height for finger-friendly tappingMobile (<600px):
16px gaps10px 16px if necessaryTablet (600px–1023px):
16px gaps48px from 80pxDesktop (1024px+):
60px–80px section padding restored#0D6EFD) — All primary actions, active states, hyperlinks#FFC107) — Accent highlight, call-to-action buttons#F8F9FA) — Section backgrounds, subtle surfaces#000000) — Text, dark UI elements#000000) — All headings, primary typography#212529) — Secondary and body content#198754) — Confirmations, approved states#DC3545) — Error messages, validation failures#FFB435) or Golden (#FFC107) — Cautions, warnings#DEE2E6) — Form inputs, dividers, subtle outlines#6C757D) — Placeholder, help text, secondary labelsAlways prioritize contrast: Black text on white, white text on blue, golden yellow text on dark backgrounds. Test WCAG AA (4.5:1) minimum.
Button rule: Primary buttons are #0D6EFD background, white text; secondary buttons are transparent with #0D6EFD border and blue text; pill buttons are #FFC107 with 25px radius and full-width ghost buttons use black text transparent background.
Card rule: All cards use #FFFFFF background, 15px border radius, 20px padding, and 0px 0px 10px 0px rgba(76, 76, 76, 1) shadow. Elevated cards increase shadow to 0px 16px 48px 0px rgba(0, 0, 0, 0.176).
Spacing baseline: Use 8px multiples throughout; standard padding is 16px–20px for components, 60px–80px for sections. Never use arbitrary spacing values.
Typography rule: Inter font for all UI and body text; Denk One only for hero headings (h1–h2). All body text is 16px weight 400. All headings are weight 600–700. All buttons are 14px weight 600 or 400 depending on emphasis.
Responsive collapse sequence: Mobile single-column stacked layout with hamburger nav → Tablet 2-column grid with collapsible nav → Desktop 3-column grid with full persistent nav. Padding: 20px mobile, 48px tablet, 80px desktop.
Form pattern: All inputs have #FFFFFF background, #CED4DA border, 10px 12px padding, 40px height, 6px radius. Focus state adds #0D6EFD border and light blue shadow. Disabled state: #E9ECEF background, #6C757D text, #DEE2E6 border.
Status pattern: Use #198754 green for success, #DC3545 red for error, #FFB435 amber for warning, #0D6EFD blue for info. All badges: light background (tinted 20%), colored text, 1px colored border, 12px radius, 6px 10px padding.
Navigation pattern: Top bar is #FFFFFF with 8px vertical padding and 1px #DEE2E6 bottom border. Links are 16px black text with 8px 16px padding. Active links add 2px blue bottom border. CTA buttons use #FFC107 background, 25px radius, 10px 20px padding.
Interaction feedback: All hover states lighten/darken primary colors (blue hover: #0B5ED7, golden hover: #FFB435). Active states go darker. Disabled states use #ADB5BD gray text and #E9ECEF background. Focus states add 3px rgba shadow in relevant color at 10% opacity.