Switch between the rendered Visual preview and the Raw DESIGN.md.
Andi presents a sophisticated, education-focused design system rooted in clean minimalism and professional accessibility. The aesthetic balances elegant typography with a refined color palette that conveys trust and institutional credibility. The system prioritizes clarity and focus—particularly evident in the centered authentication experience—while maintaining a modern, approachable tone through carefully calibrated spacing and subtle elevation. The design philosophy emphasizes intentional restraint: generous whitespace, restrained typography hierarchy, and a blue-primary color scheme signal competence and educational authority without overwhelming the user. Every component is crafted for legibility and purposeful interaction, reflecting a platform designed for serious learners within an invite-only educational ecosystem.
Key Characteristics
#1874ED): Core action color for sign-in button, primary CTAs, and interactive focus states. Conveys trust and educational authority.#0E1721): Primary text color for headings and body copy. Dominant semantic color establishing the visual hierarchy foundation.#E78A45): Secondary accent for highlight states, supporting actions, or future attention-drawing needs. Used sparingly to maintain hierarchy.#08121F): Deepest interactive state, used for hover and focus states on primary actions.#455369): Muted interactive text for secondary interactions, icons, and supporting UI elements.#FFFFFF): Primary surface color for cards, modals, and form backgrounds. Maximum contrast and cleanliness.#F3F5F8): Primary background for page surfaces and secondary containers. Cool-toned off-white.#F9FCFF): Tertiary background, slightly warmer variant for subtle surface differentiation.#FFFAFC): Warm off-white for special surface treatments or alternative backgrounds.#F8FAFD): Ultra-subtle background for reduced-emphasis surfaces.#E5ECF3): Divider lines and subtle borders.#EAEFF5): Tertiary border treatment for minimal visual separation.#3A485D): Mid-tone border and divider color for form fields and container separation.#182230): Deep surface for dark mode or alternative theme contexts.#051223): Absolute dark background, used for high-contrast elements or future dark mode.#CC272E): Error states, warnings, and destructive actions. Clear danger signal for validation failures.Primary (Headings & Logo): Fraunces (serif) — Fraunces, Georgia, serif
Secondary (Body & UI): Inter (sans-serif) — Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / Logo | Fraunces | 24px | 400 | 32px | 0px | Page headers, brand identity; elegant serif presence |
| Heading 2 | Inter | 18px | 500 | 28px | 0px | Section headings; strong visual anchor |
| Heading 3 | Inter | 16px | 500 | 24px | 0px | Subheadings; secondary hierarchy |
| Body / Paragraph | Inter | 14px | 400 | 20px | 0px | Primary reading text; maximum legibility |
| Body Large | Inter | 16px | 400 | 25.6px | 0px | Expanded body text for spacious layouts |
| Label / Field Label | Inter | 14px | 500 | 14px | 0px | Form labels; emphasis without enlargement |
| Button Text | Inter | 14px | 500 | 20px | 0px | Primary button labels; clear actionability |
| Button Small | Inter | 12px | 400 | 16px | 0px | Secondary/tertiary button text |
| Caption / Helper | Inter | 12px | 400 | 16px | 0px | Captions, hints, secondary information |
| Code / Monospace | Courier New, monospace | 13px | 400 | 20px | 0px | Email placeholders, code references |
#1874ED#FFFFFF8px 16px6pxnonergba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px#0E5AC7, shadow enhanced to rgba(0, 0, 0, 0.15) 0px 4px 6px 0px#0A3A8A, shadow reduced#C4D7F0, text #7FA4D1, shadow none, cursor not-allowedtransparent#0E17218px 16px6px1px solid #3A485Dnone#F3F5F8, border #455369#E5ECF3, border #0E1721transparent#0E17210px0pxnonenone#1874ED, underline 1px solid #1874ED#08121F#FFFFFF#0E172132px16px1px solid #E5ECF3rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px#EAEFF5, shadow rgba(0, 0, 0, 0.15) 0px 4px 6px 0px#F3F5F81px solid #E5ECF324px8px#FFFFFF#0E1721#3A485D4px 12px6px1px solid #3A485D (opacity 0.16 = rgba(58, 72, 93, 0.16))rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px#1874ED, box-shadow 0 0 0 3px rgba(24, 116, 237, 0.1), rgba(0, 0, 0, 0.1) 0px 1px 3px 0px#F9FCFF, border #1874ED#CC272E, text #CC272E#F3F5F8, text #A0A8B8, border #EAEFF5, cursor not-allowed#0E17218px12px#FFFFFF1px solid #E5ECF316px 24pxrgba(0, 0, 0, 0.05) 0px 1px 2px 0px#0E1721#1874ED, border-bottom 2px solid #1874ED#1874ED, border-bottom 2px solid #1874ED#455369/ in #A0A8B824pxtransparent#4553690px0px 12px#1874ED, background rgba(24, 116, 237, 0.08)#08121FBase Unit: 4px
Scale:
4px — Micro-spacing; internal component gaps8px — Extra-small; input padding, tight grouping12px — Small; button padding, tight margins16px — Base; standard padding, margins, gutters24px — Medium; section margins, container padding32px — Large; card padding, major section spacing48px — Extra-large; full-width section gaps64px — XXL; page-level spacing between major blocks136px — Hero margin; landing page top marginUsage Context:
8px 12px (vertical × horizontal)8px 16px32px (all sides)24px vertical margin24px mobile, 32px desktopMax Width: 1200px Mobile Container: 384px width (card-based) Tablet Container: 768px width Desktop Container: 1200px width
Column Strategy:
24px gap24px gapSection Patterns:
136px top marginAndi employs expansive, purposeful whitespace to reduce cognitive load and guide user focus. Every surface breathes: cards sit isolated with generous margins, form groups are separated by 24px, and text containers maintain wide line lengths (50–70 characters) for reading comfort. Empty space is a design element, not wasted space—it signals quality, focus, and educational professionalism.
0px — No radius; links, ghost buttons, typography elements6px — Small; buttons, inputs, tight containers8px — Medium; secondary containers, subtle components16px — Large; primary cards, modals, hero sections24px — Extra-large; full-width containers, hero backgrounds50% — Circles; avatars, icon buttons, badge elements| Level | Treatment | Use |
|---|---|---|
| Flat (0) | box-shadow: none | Text, typography, backgrounds; primary content |
| Raised (1) | rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px | Cards, input fields, buttons, primary interactive surfaces |
| Elevated (2) | rgba(0, 0, 0, 0.15) 0px 4px 6px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px -1px | Hover states, popovers, tooltip surfaces |
| Floating (3) | rgba(0, 0, 0, 0.2) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -2px | Modals, dialogs, overlays; highest interactive priority |
| Overlay (4) | rgba(0, 0, 0, 0.3) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 10px 10px -5px | Dropdowns, menus, full-screen overlays |
Shadow Philosophy: Andi uses subtle, layered shadows that mimic realistic light falloff. Shadows are warm-tinted and restrained—never harsh or heavy. The primary shadow (1px 3px) is omnipresent on interactive surfaces, creating consistent visual rhythm. Hover states elevate shadows to provide tactile feedback without overwhelming the interface. Dark backgrounds do not cast shadows; surfaces float solely through contrast and border treatments.
#1874ED for all primary CTAs; it's the trust signal for the educational brand32px padding on card surfaces; consistency ensures predictable spacing rhythm6px radius consistently to input fields and buttons; it's the micro-interaction fingerprint14px / 20px for all body copy; it's legible, professional, and predictablergba(0, 0, 0, 0.1) 0px 1px 3px 0px) to cards, inputs, and buttons uniformly#0E1721 for all primary text; maximum contrast and accessibility#E78A45 for secondary highlights only; use sparingly24px) between major sections44px × 44px on all interactive elements#CC272E error color exclusively for validation failures and destructive states6px border radius on buttons or inputs; consistency is essential12px; accessibility requires minimum 12px body text16px on cards or containers; whitespace supports cognitive ease#F3F5F8 as default, reserve others for specific purposes#E5ECF3 for primary borders; reserve for subtle dividers, use #3A485D for prominent borders| Breakpoint | Width | Key Changes | Context |
|---|---|---|---|
| Mobile | 320px – 639px | Single-column layout, card width 100% (max 384px), 16px padding, full-width buttons, stacked form fields | Phone devices, portrait orientation |
| Tablet | 640px – 1023px | Two-column grid, card width 50%, 24px gutter, flexible button widths, horizontal form layouts | Tablets, landscape phones |
| Desktop | 1024px – 1439px | Three-column grid, centered container (max 1200px), 32px gutter, optimal line lengths | Standard desktop screens |
| Wide | 1440px+ | Four-column grid, fixed-width container (1200px), centered with side margins, expanded whitespace | Wide desktop displays, 4K displays |
44px × 44px for all interactive elements (buttons, links, checkboxes, radio buttons)40px height; padding adjusted to meet size requirements8px between interactive elements to prevent accidental taps4px above and below text links for easy tap affordance36px × 36px with 12px side padding (total 40px width)16px margin), three-column grid on desktop14px for accessibility12px instead of 24px, 16px instead of 32px)#1874ED)#0E1721)#455369)#F3F5F8)#FFFFFF)#3A485D)#E5ECF3)#CC272E)#E78A45)#0E1721)Colors are semantic. All blues are for trust/interaction; all reds are errors only. Never swap roles. Grays are for neutral surfaces and borders—never for emphasis.
Typography is hierarchical. Fraunces (serif) 24px/400 for display/logo only. Inter (sans-serif) for everything else: 14px/400 for body (20px line-height), 14px/500 for labels/buttons, 12px for captions.
Spacing is intentional. Base unit is 4px; use 16px as standard padding, 24px for section gaps, 32px for cards. Never reduce below 12px. Maintain 136px top margin for form centering.
Buttons follow one rule. Primary = #1874ED background + white text + 8px 16px padding + 6px radius + subtle shadow. Secondary = transparent + navy border. Ghost = transparent + no styling (links only).
Elevation is consistent. All cards/inputs/buttons use shadow level 1: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px. Hover states elevate to level 2. Never create custom shadows.
Forms are centered. Card containers are 384px wide, centered horizontally with 136px top margin. Inputs are 100% width within the card. Labels are 14px/500 Inter, above fields. Error text is 12px/400 in #CC272E.
Borders are minimal. Cards use 1px solid #E5ECF3. Input fields use 1px solid rgba(58, 72, 93, 0.16). No shadow + border combo unless explicitly elevated; choose one treatment per surface.
Responsive scaling: Reduce card padding to 24px on mobile. Collapse two-column layouts to single-column. Keep button full-width on mobile; min 44px height. Typography stays 14px body even on mobile (accessibility).
Whitespace is design. No component should be cramped. Every card has breathing room. Form fields have 24px gaps. Sections have 24–32px vertical margin. Empty space signals quality; never fight it with filler content.
Accessibility is mandatory. All text uses navy/white contrast (WCAG AAA). Minimum font size 12px. All interactive elements are 44px × 44px touch targets. Focus states use 3px #1874ED ring (0 0 0 3px rgba(24, 116, 237, 0.1)). Placeholder text is 70% opacity, not semantic information.