Switch between the rendered Visual preview and the Raw DESIGN.md.
The AUA design system embodies professional authority with accessible warmth, serving a specialized healthcare community. It combines a rich teal foundation with soft accent yellows and light blues, creating an environment that feels both institutional and approachable. The typography bridges classical elegance (Old Standard TT for display) with modern simplicity (system fonts for body), establishing credibility while maintaining clarity. The overall aesthetic prioritizes readability and functional hierarchy, ensuring complex medical and organizational information remains digestible for members and visitors alike. Whitespace is generous, borders minimal, and shadows are subtle—reflecting the organization's confidence and precision without appearing cold or sterile.
Key Characteristics
#00567A): Dominant brand color for headers, navigation backgrounds, primary links, and key UI elements. Represents institutional authority and medical expertise. Used extensively across the site (346 times).#B7D9F2): Light teal for secondary backgrounds, hover states, and information containers. Provides visual relief while maintaining brand cohesion.#237AFC): Used sparingly for interactive highlights and secondary call-to-action elements requiring visual distinction from primary teal.#FBE682): Primary affirmative button color. Draws attention to critical user actions like "I agree," "Register Now," and "Learn More."#DDEEBB): Supportive accent color for positive associations, secondary confirmations, and complementary information areas.#007BFF): Bootstrap-aligned blue for tertiary interactive states and optional secondary actions.#17A2B8): Info or alternative secondary indicator for supplementary content.#00567A): Primary interactive link color, matching teal primary for visual consistency and predictability.#DC3545): Semantic error states, validation failures, and critical alerts requiring immediate user attention.#FFC107): Warning states, caution indicators, and non-critical alerts requiring user awareness.#28A745): Confirmation states, successful form submissions, and positive feedback messaging.#555555): Primary body text color. Used most frequently (402 times) for paragraphs, descriptions, and standard content. Provides optimal readability against light backgrounds.#000000): High-contrast headings, strong emphasis, and button text where maximum legibility is required (218 times).#111111): Near-black for deep emphasis and semantic distinction from true black where subtle contrast is needed.#6C757D): Secondary text, muted labels, disabled states, and subtle annotations.#FFFFFF): Main content background, card surfaces, and primary reading areas.#F8F9FA): Subtle secondary background for sections requiring gentle visual distinction without high contrast.#EFEFEF): Dividing lines, subtle borders, and section separators. Creates definition without visual weight (34 times).#EAEAEA): Slightly darker border option for elements requiring subtle emphasis.#EEEEEE): Alternative neutral surface for subtle background variation and alternate row styling.Primary Display Font: Old Standard TT (https://fonts.googleapis.com/), serif
'Old Standard TT', Georgia, serifSecondary Font: NeueFrutiger (Regular, Book, Bold variants available), sans-serif
'Neue Frutiger', 'Frutiger Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serifBody Font: -apple-system / System fonts, sans-serif
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display (H1) | Old Standard TT | 60px | 400 | 62.5px | 0px | Large hero and page titles; serif elegance |
| Heading (H2) | Old Standard TT | 45px | 400 | 50px | 0px | Section headers; strong visual presence |
| Subheading (H3) | Neue Frutiger | 22px | 500 | 25px | 0px | Subsection headers; bridging font |
| Large Link | Neue Frutiger | 60px | 400 | 62.5px | 0px | Logo/nav primary links; display-sized interactive elements |
| Label | Neue Frutiger Book | 18px | 400 | 28.125px | 0px | Form labels, captions, metadata |
| Body | -apple-system | 24px | 600 | 36px | 0px | Large body text, emphasis blocks |
| Standard Link | Old Standard TT | 16px | 400 | 21.875px | 0px | Inline hyperlinks; readable at small size |
| Navigation Link | Neue Frutiger Book | 18px | 400 | 25px | 0px | Primary navigation items; consistent visual weight |
| Button Text | -apple-system | 14px | 700 | 21px | 0px | Call-to-action buttons; bold for emphasis |
| Caption / Helper | Neue Frutiger Book | 12px | 400 | 12px | 0px | Small text, annotations, legal text |
| Microcopy | Neue Frutiger Book | 9.6px | 400 | 9.6px | 0px | Placeholder text, tooltips, minimal annotations |
Primary Button (Affirmative Action)
#FBE682#00000014px700-apple-system12.5px 25px2px0px none46px21px#F4D86E, maintain text colorinset 0 2px 4px rgba(0, 0, 0, 0.1)Secondary Button (Neutral Action)
#EAEAEA#11111114px700-apple-system12.5px 25px2px0px none46px21px#D9D9D9, text to #000000inset 0 2px 4px rgba(0, 0, 0, 0.08)Tertiary Button (Ghost / Alternative)
transparent#00000018px400Neue Frutiger Book25px0px0px noneauto25pxrgba(0, 86, 122, 0.05)rgba(0, 86, 122, 0.1)#00567AOutline Button (Alternative Secondary)
#EFEFEF#00000018px400Neue Frutiger Book1px 6px0px2px outset #000000auto25px#000000, text #FFFFFF2px inset #000000#CCCCCC, text color #999999Standard Card (White Background)
#FFFFFF#55555518px400Neue Frutiger Book0px0px0px nonergba(0, 0, 0, 0.15) 0px 8px 20px 0px25pxrgba(0, 0, 0, 0.2) 0px 12px 28px 0px24px to 32pxOverlay Card (Dark Teal Background)
rgba(0, 40, 56, 0.8)#FFFFFF18px400Neue Frutiger Book31.25px0px0px nonenone (overlay context)25px#FFFFFF or #B7D9F2 for hierarchy#B7D9F2 for visibility against dark backgroundrgba(0, 40, 56, 0.95)Transparent Card Container
transparent#55555518px400Neue Frutiger Book0px0px0px nonenone25pxSearch Input / Primary Input
#00567A#FFFFFF16px400Neue Frutiger Book1px 2px0px0px none28.125px28.125pxrgba(255, 255, 255, 0.6)2px solid #B7D9F2, increase height to 32px, padding to 1px 6px#003F56#CCCCCC, text #999999, cursor not-allowedForm Label
18px400Neue Frutiger Book#55555528.125px12px* in #DC3545 before or after label textForm Field Container
24px#FFFFFF1px solid #EFEFEF12px 16px16px-apple-system#00567A, shadow 0 0 0 3px rgba(0, 86, 122, 0.1)#DC3545, helper text in #DC3545#28A745, helper text in #28A745Helper Text / Caption
12px400Neue Frutiger Book#6C757D (standard), #DC3545 (error), #28A745 (success)4px16pxPrimary Navigation Bar
#00567A#FFFFFF18px400Neue Frutiger Book0px (internally, items handle padding)0px0px none46.875px (base measurement; flex content)25pxrgba(0, 0, 0, 0.1) 0px 3px 6px 0px (navigation level depth)16px 20px (horizontal/vertical)rgba(255, 255, 255, 0.1), text remains #FFFFFFrgba(255, 255, 255, 0.2), text #FFFFFF with underline 2px solid #FBE682#FFFFFF#555555#F8F9FA, text #00567ASecondary Navigation (Breadcrumb / Contextual Links)
transparent#00567A16px400Old Standard TT12.5px 0px0px none46.875px (flex container)21.875px8px horizontal/ in #CCCCCC600 weight), color #000000underline, color #003F56Primary Link (Inline / Display)
transparent#00567A60px (display), 20px (standard context), 16px (navigation)400Neue Frutiger Regular or Old Standard TT0px0px0px noneunderline, color darkens to #003F56#003F56, text decoration underline2px solid #B7D9F2, outline offset 2px#6C757DBase Unit: 4px
Spacing Scale:
Context-Specific Usage:
12px 25px24px–32px56px–88px vertical24px16px 20px32px–52px for body sectionsMaximum Container Width: 1200px (inferred from large-scale content blocks)
Grid Strategy: 12-column fluid grid
16px gutter12px gutter12px gutterSection Patterns:
72px–88px vertical56px vertical, 32px horizontal32px gap24px gap32px paddingWhitespace is treated as a structural and cognitive tool. The design employs generous vertical spacing between sections (56px–88px) to establish clear information hierarchy and reduce overwhelm in dense medical/organizational content. Horizontal padding supports breathing room around text blocks and ensures mobile readability. Internal component whitespace (card padding, button padding, input height) maintains rhythm and finger-touch targets. The absence of borders and heavy shadows is intentional—whitespace acts as the primary visual separator, creating elegance through simplicity rather than visual decoration.
| Level | Treatment | Use |
|---|---|---|
| Flat (0) | No shadow, flat color background | Navigation bars, input fields, button bases, minimal containers |
| Raised (sm) | rgba(0, 0, 0, 0.15) 0px 8px 20px 0px | Standard cards, content blocks, elevated content areas |
| Elevated (md) | rgba(0, 0, 0, 0.16) 0px 12px 24px 0px, rgba(0, 0, 0, 0.05) 0px 1px 4px 0px | Dropdown menus, modal backgrounds, layered content |
| Top (lg) | rgba(0, 0, 0, 0.1) 0px 3px 6px 0px | Navigation headers, sticky elements, overlay surfaces |
Shadow Philosophy:
Shadows in the AUA design system are subtle and purposeful, never dramatic. The system uses shadow strategically to create visual separation and indicate hierarchy without overwhelming the content. Small shadows (sm level) appear on cards to distinguish them from the background. Medium shadows (md level) are reserved for interactive overlays and dropdowns that require clear visual distinction. Large shadows (lg level) support navigation context where floating UI must appear above background content. The shadow palette uses black at low opacity (5–16%) rather than pure black, ensuring shadows feel natural and non-intrusive. All shadows include both an outer blur and optional inner detail shadow to create dimensional consistency without harsh edges.
#00567A) for all primary navigation, headers, and institutional branding elements.#FBE682) exclusively for affirmative call-to-action buttons ("I agree," "Register," "Learn More") to maintain visual consistency and user expectation.46px minimum to support touch accessibility on mobile devices.#DC3545 below invalid form fields with helper text in 12px Neue Frutiger Book.2px solid #B7D9F2) for keyboard navigation accessibility.#00567A consistently for all inline hyperlinks to establish predictable user behavior.44px × 44px for all buttons and interactive elements.0px 3px 6px) to avoid a "floating" appearance that conflicts with flat, institutional tone.#555555) instead to avoid eye strain.#FFFFFF) on light backgrounds or dark text on dark backgrounds; maintain minimum WCAG AA contrast ratio (4.5:1).| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Single column layout, 4-column grid, 12px gutter, full-width containers with 16px horizontal padding, stacked navigation in hamburger menu, font sizes reduced by 1–2px for body (22px), button width auto (100% if full-width), form fields full-width with 12px padding |
| Tablet | 768px–1023px | 8-column grid, 12px gutter, two-column layouts, navigation items remain horizontal (no hamburger), font sizes maintained (18px–20px labels), card padding 20px, section padding 36px–52px, container max-width 768px |
| Desktop | 1024px–1199px | 12-column grid, 16px gutter, three-column layouts, full navigation visible, hero padding 72px vertical, container max-width 1024px |
| Large Desktop | 1200px+ | 12-column grid, 16px gutter, max-width container 1200px, section padding 88px, hero padding 88px |
44px × 44px for all interactive elements (buttons, links, form inputs, navigation items).48px × 48px for primary actions and frequently-used controls.8px gap to prevent accidental activation.46px minimum for adequate finger target; width auto or 100% depending on layout.40px minimum on mobile for comfortable data entry; 28.125px acceptable on desktop.16px vertical padding × 20px horizontal padding minimum for mobile nav items.Navigation:
#00567A)Grid Layouts:
Typography:
Padding & Spacing:
Container Width:
Card & Image Behavior:
#FBE682) with black text (#000000)#00567A) with white text (#FFFFFF)#00567A); underline on hover#555555); avoid light colors#DC3545) with error message in 12px text#28A745)#FFC107)#FFFFFF); light gray (#F8F9FA) for alternates#EFEFEF)#000000) or Teal Primary (#00567A)#CCCCCC with text #999999Maintain 0px border-radius (sharp corners) on all primary buttons, cards, and input fields. Only minimal 2px rounding on buttons if visual softness needed. This keeps the design institutional and modern without appearing playful or rounded.
Reserve the warm yellow (#FBE682) exclusively for affirmative call-to-action buttons. Never use for secondary buttons, backgrounds, or text. This ensures user recognition and predictable interaction patterns.
Apply the teal primary (#00567A) as the dominant color for navigation, headers, and institutional branding. Use light teal (#B7D9F2) only for secondary backgrounds or hover states; avoid mixing multiple teal shades in the same view.
Always set button height to 46px minimum with padding 12.5px vertical × 25px horizontal. This ensures touch accessibility and consistent vertical rhythm across interactive elements.
Implement generous vertical spacing (56px–88px) between major content sections. This is critical for readability in medical/organizational content and reduces cognitive load. Never collapse sections closer than 36px vertically.
Use Old Standard TT serif font exclusively for display headings (H1, H2) and primary links at large sizes (60px+). This establishes brand authority and elegance. All body and interface text uses sans-serif (Neue Frutiger or system fonts).
Set card shadows to sm level only: rgba(0, 0, 0, 0.15) 0px 8px 20px 0px. Never use larger shadows; maintain flat, institutional aesthetic. For dropdowns or overlays, use md level with dual shadows.
Apply 2px outset borders only to outline/secondary buttons; all other components use 0px borders. This maintains visual minimalism while signaling secondary actions through border treatment.
Include explicit focus states with 2px solid #B7D9F2 outline (offset 2px) on all interactive elements. Ensure keyboard navigation accessibility and visual feedback for non-mouse users.
For mobile responsiveness, maintain all colors and typography weights unchanged; adjust sizes by 1–2px and collapse layouts from multi-column to single-column stacking. Keep touch targets at 44px minimum; reduce spacing from 56px sections to 24px–36px on mobile.