Remixes of www.ahu.edu
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Ahu
description: |
The AdventHealth University design system embodies trust, professionalism, and
inclusive healthcare education through a clean, modern aesthetic anchored in
deep ocean blues paired with crisp white and neutral grays. The visual
language prioritizes clarity and accessibility, using expansive whitespace and
generous padding to create breathing room around content. The hero sections
employ bold color blocking—shifting between the institution's primary navy
blue and clean white backgrounds—creating visual rhythm that guides users
through key calls-to-action. Typography emphasizes hierarchy through weight
and scale rather than decorative effects, lending authority while remaining
approachable. The overall tone is measured and welcoming, reflecting the
university's commitment to preparing compassionate healthcare professionals.
source:
url: "https://www.ahu.edu/"
pagesAnalyzed: 1
extractedAt: 2026-09-14
tokensMeasured: true
colors:
primary: "#036399"
canvas: "#FFFFFF"
surface-alt: "#E4F3FF"
on-primary: "#FFFFFF"
ink: "#000000"
body: "#1C1E1F"
muted: "#172435"
faint: "#45494D"
accent-1: "#212529"
accent-2: "#004A75"
accent-3: "#001D32"
neutral-1: "#EDF1F3"
typography:
display-lg:
fontFamily: Montserrat
fontSize: 48px
fontWeight: 700
letterSpacing: 0px
display-md:
fontFamily: "Roboto Slab"
fontSize: 40px
fontWeight: 700
letterSpacing: 0px
heading-md:
fontFamily: "Roboto Slab"
fontSize: 32px
fontWeight: 700
lineHeight: 1.25
letterSpacing: 0px
heading-sm:
fontFamily: "Roboto Slab"
fontSize: 24px
fontWeight: 600
lineHeight: 1.25
letterSpacing: 0px
heading-sm-montserrat:
fontFamily: Montserrat
fontSize: 24px
fontWeight: 600
lineHeight: 1.17
letterSpacing: 0px
heading-xs:
fontFamily: Montserrat
fontSize: 20px
fontWeight: 700
letterSpacing: 0px
body-xl:
fontFamily: Montserrat
fontSize: 20px
fontWeight: 600
letterSpacing: 0px
body-lg:
fontFamily: Montserrat
fontSize: 18px
fontWeight: 400
lineHeight: 1.4
letterSpacing: 0px
body-lg-strong:
fontFamily: Montserrat
fontSize: 18px
fontWeight: 700
lineHeight: 1.4
letterSpacing: 0px
body-md:
fontFamily: Montserrat
fontSize: 16px
fontWeight: 400
lineHeight: 1.25
letterSpacing: 0px
body-md-loose:
fontFamily: Montserrat
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
body-sm:
fontFamily: Montserrat
fontSize: 14px
fontWeight: 400
letterSpacing: 0px
nav:
fontFamily: Montserrat
fontSize: 18px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
button:
fontFamily: Montserrat
fontSize: 14px
fontWeight: 500
letterSpacing: 0px
label:
fontFamily: Montserrat
fontSize: 18px
fontWeight: 500
letterSpacing: 0px
rounded:
none: 0px
xs: 16px
sm: "24px 48px"
full: 9999px
spacing:
xxs: 8px
xs: 12px
sm: 16px
md: 20px
lg: 24px
xl: 32px
xxl: 48px
xxxl: 60px
section: 68px
band: 80px
borderWidths:
thin: 1px
shadows:
sm: "rgba(0, 0, 0, 0.15) 0px 2px 20px 0px"
elevationStrategy: single-tier
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#FFFFFF"
surface: "#E4F3FF"
surfaceRaised: "#DBE9F5"
text: "#000000"
textMuted: "#1C1E1F"
border: "#E0E0E0"
accent: "#036399"
accentFg: "#FFFFFF"
focusRing: "#036399"
elevation: shadow
dark:
bg: "#0B1014"
surface: "#1A1E22"
surfaceRaised: "#262A2E"
text: "#F5F9FB"
textMuted: "#9CA0A3"
border: "#32363A"
accent: "#048AD5"
accentFg: "#0B0B0C"
focusRing: "#0370AD"
elevation: "border+surface"
components:
button-primary:
typography: "{typography.nav}"
textColor: "{colors.on-primary}"
border: "1px solid {colors.primary}"
height: 61px
padding: "16px 16px 16px 16px"
rounded: 48px
backgroundColor: "{colors.primary}"
button-primary-sm:
textColor: "{colors.on-primary}"
border: "1px solid {colors.primary}"
height: 60px
padding: "16px 24px 16px 24px"
fontSize: 18px
fontFamily: Montserrat
fontWeight: 700
lineHeight: 1.44
rounded: 48px
backgroundColor: "{colors.primary}"
button-outline:
textColor: "{colors.primary}"
border: "1px solid {colors.canvas}"
height: 56px
padding: "16px 24px 16px 24px"
fontSize: 18px
fontFamily: Montserrat
fontWeight: 700
rounded: 48px
backgroundColor: "{colors.canvas}"
button-outline-lg:
typography: "{typography.nav}"
textColor: "{colors.primary}"
border: "1px solid {colors.primary}"
height: 61px
padding: "16px 16px 16px 16px"
rounded: 48px
card:
typography: "{typography.body-md}"
textColor: "{colors.faint}"
badge-icon:
textColor: "{colors.on-primary}"
height: 20px
fontSize: 20px
fontFamily: Montserrat
fontWeight: 400
lineHeight: 0.05
navigation:
typography: "{typography.body-md}"
textColor: "{colors.faint}"
height: 46px
footer:
typography: "{typography.body-sm}"
textColor: "{colors.neutral-1}"
border: "3px solid rgb(242, 242, 242)"
link:
typography: "{typography.body-md}"
textColor: "{colors.primary}"
link-2:
textColor: "{colors.primary}"
fontSize: 24px
fontFamily: Montserrat
fontWeight: 600
states:
input-focus:
target: input
state: focus
boxShadow: "rgba(125, 125, 125, 0.2) 0px 4px 6px 0px, rgba(125, 125, 125, 0.19) 5px 5px 10px 0px"
button-disabled:
target: button
state: disabled
opacity: 0.5
other-focus:
target: other
state: focus
transform: "scale(1.2)"
other-active:
target: other
state: active
outline: auto
other-hover:
target: other
state: hover
borderWidth: 4px
button-hover:
target: button
state: hover
textDecoration: none
link-focus:
target: link
state: focus
outline: "currentcolor solid 2px"
outlineColor: currentcolor
outlineWidth: 2px
input-hover:
target: input
state: hover
textDecoration: none
link-hover:
target: link
state: hover
textDecoration: none
nav-hover:
target: nav
state: hover
backgroundColor: transparent
input-focus-visible:
target: input
state: focus-visible
textColor: transparent
other-focus-visible:
target: other
state: focus-visible
textColor: transparent
card-hover:
target: card
state: hover
textDecoration: underline
input-disabled:
target: input
state: disabled
opacity: 1
other-disabled:
target: other
state: disabled
opacity: 1
input-active:
target: input
state: active
filter: "brightness(90%)"
breakpoints:
- width: 375
containerWidth: 351
gridColumns: 2
navLinksVisible: 0
menuToggleVisible: true
headingPx: 32
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 744
gridColumns: 3
navLinksVisible: 0
menuToggleVisible: true
headingPx: 40
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 1000
gridColumns: 5
navLinksVisible: 5
menuToggleVisible: true
headingPx: 40
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1180
gridColumns: 5
navLinksVisible: 8
menuToggleVisible: true
headingPx: 40
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1360
gridColumns: 5
navLinksVisible: 8
menuToggleVisible: true
headingPx: 40
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 61
gradientsFound: 0
rolesUnassigned: 4
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
The AdventHealth University design system embodies trust, professionalism, and inclusive healthcare education through a clean, modern aesthetic anchored in deep ocean blues paired with crisp white and neutral grays. The visual language prioritizes clarity and accessibility, using expansive whitespace and generous padding to create breathing room around content. The hero sections employ bold color blocking—shifting between the institution's primary navy blue and clean white backgrounds—creating visual rhythm that guides users through key calls-to-action. Typography emphasizes hierarchy through weight and scale rather than decorative effects, lending authority while remaining approachable. The overall tone is measured and welcoming, reflecting the university's commitment to preparing compassionate healthcare professionals.
Key Characteristics
{colors.primary} — #036399): Primary call-to-action buttons, brand accent, active states, hero section backgrounds, link colors{colors.accent-1} — #212529): Decorative; no measured functional role{colors.accent-2} — #004A75): Decorative; no measured functional role{colors.accent-3} — #001D32): Decorative; no measured functional role{colors.canvas} — #FFFFFF): Default page background, button labels on brand surfaces, primary surface{colors.surface-alt} — #E4F3FF): Alternating section bands, secondary surface{colors.ink} — #000000): Headings, primary text, maximum contrast{colors.body} — #1C1E1F): Body copy, primary running text{colors.muted} — #172435): Captions, secondary text, supporting information{colors.faint} — #45494D): Tertiary text, placeholder content, de-emphasized elements{colors.neutral-1} — #EDF1F3): Subtle background tints, very light neutral surfacePrimary (Display & Headings): Roboto Slab (https://fonts.googleapis.com/) with fallback serif
Secondary (Body & UI): Montserrat (https://fonts.googleapis.com/) with fallback sans-serif
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XL | Roboto Slab | 40px | 700 | 1.2 | Normal | Hero headings, page title emphasis |
| Heading MD | Roboto Slab | 32px | 700 | 1.25 | Normal | Section headings, major content blocks |
| Body MD | Montserrat | 16px | 400 | 1.25 | Normal | Default body copy, running text |
| Body SM | Montserrat | 14px | 400 | Normal | Normal | Secondary text, captions, metadata |
| Button | Montserrat | 18px | 600–700 | 1.5 | Normal | Primary and secondary call-to-action labels |
| Link | Montserrat | 16px–24px | 400–600 | Normal | Normal | Inline and standalone link text |
| Code SM | Monospace | 12px | 400 | 1.5 | Normal | Code blocks, technical labels |
600 weight for emphasis when neededPrimary Button
{spacing.sm} (16px) on all sides{colors.primary} (#036399){colors.canvas} (#FFFFFF){colors.primary} (#036399){rounded.full} (pill-shaped / 9999px)Primary Button - Standard
{spacing.sm} (16px) {spacing.md} (20px)Outline Button (Secondary)
{spacing.sm} (16px) {spacing.md} (20px){colors.canvas} (#FFFFFF){colors.primary} (#036399){colors.canvas} (#FFFFFF){rounded.full} (pill-shaped)Outline Button - Large
{spacing.sm} (16px) on all sides{colors.primary} (#036399){colors.primary} (#036399){rounded.full}Button Hover State
Button Disabled State
0.5)Card Default
{colors.faint} (#45494D){rounded.none} (0px / sharp)Input Base
{rounded.full} (pill-shaped / 9999px)Input Focus State
rgba(125, 125, 125, 0.2) 0px 4px 6px 0px, rgba(125, 125, 125, 0.19) 5px 5px 10px 0pxInput Hover State
Input Disabled State
0.5)Navigation Default
{colors.faint} (#45494D){rounded.none}Navigation Hover State
{colors.primary} (#036399)Navigation Focus State
{colors.canvas} (#FFFFFF)Link Default
{colors.primary} (#036399)Link Hover State
{colors.primary}Link Focus State
#036399)Badge Icon
{colors.canvas} (#FFFFFF){rounded.none} (0px)Footer Default
{colors.neutral-1} (#EDF1F3)#F2F2F2{rounded.none} (0px)Base unit: 4px
Scale (in multiples of 4px, with usage context):
{spacing.xxs} = 8px — Tight internal spacing, micro gaps{spacing.xs} = 12px — Compact element spacing{spacing.sm} = 16px — Default button padding, standard margins{spacing.md} = 20px — Section dividers, medium component spacing{spacing.lg} = 24px — Card spacing, generous margins{spacing.xl} = 32px — Major section breaks, large component gaps{spacing.xxl} = 48px — Subsection separation{spacing.xxxl} = 60px — Large block spacing{spacing.section} = 68px — Between major content sections{spacing.band} = 80px — Hero and full-width band vertical paddingMax Width: Measured content column widths:
Section Padding: 0px horizontal padding (content extends edge-to-edge on smaller screens); larger viewports add inset margins via max-width containers.
The design prioritizes negative space and breathing room. Sections are separated by {spacing.band} (80px) vertical padding. Within sections, related content uses {spacing.section} (68px). Interactive elements and cards maintain {spacing.md} to {spacing.lg} internal margins to prevent visual crowding. Text blocks are intentionally short and followed by whitespace rather than densely packed.
{rounded.none} = 0px — Cards, images, overlays, modals, badges, footers (sharp, institutional look){rounded.xs} = 16px — Subtle rounding on secondary components{rounded.sm} = 24px–48px — Mid-tone rounding (less common){rounded.full} = 9999px — Buttons and inputs (all interactive elements are fully rounded)| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, no lift | Cards, backgrounds, default state |
| Lifted | rgba(0, 0, 0, 0.15) 0px 2px 20px 0px | Dropdowns, overlays requiring subtle separation |
The elevation strategy is color-blocking — depth is achieved through surface color changes (hero blue against white, {colors.surface-alt} sections) rather than multiple shadow layers. Interactions like button hovers remain flat; focus states use outline or scale transforms instead of shadow depth. Only dropdowns and specific overlays employ the single-tier shadow for subtle lift.
0.70 or 0.5 depending on component){rounded.full}) for all primary and secondary CTAs; they are the signature interactive element{spacing.sm} (16px) padding inside buttons consistently across all variants{spacing.band} (80px) vertical padding to create rhythm{colors.primary} (#036399) for all links, active states, and primary CTAs{rounded.none} — 0px) to maintain professional clarity{colors.surface-alt} (#E4F3FF) to alternate section backgrounds and reduce monotony| Breakpoint | Width | Content Width | Grid | Nav Links | Toggle | H1 Size | Body Size | Section Padding |
|---|---|---|---|---|---|---|---|---|
| Mobile | 375px | 351px | 2 | Hidden | Menu icon | 32px | 16px | 0px |
| Tablet | 768px | 744px | 3 | Hidden | Menu icon | 40px | 16px | 0px |
| Desktop | 1024px | 1000px | 5 | 5 visible | Menu icon | 40px | 16px | 0px |
| Large | 1280px | 1180px | 5 | 8 visible | Menu icon | 40px | 16px | 0px |
| XL | 1440px | 1360px | 5 | 8 visible | Menu icon | 40px | 16px | 0px |
Breakpoints are inferred from where measured values shift: 375px→768px (nav collapse/expand), 768px→1024px (grid expansion to 5 columns), and 1024px+ (content width growth).
{spacing.sm} padding; full tap area ≥48px is recommendedMobile (375px–768px):
Desktop (1024px+):
#036399) — all links, primary buttons, hero sections#FFFFFF) — default page background, button labels on blue#000000) — maximum contrast on white, primary display text#1C1E1F) — running text, article body#172435) — captions, metadata, supporting labels#E4F3FF) — alternating row backgrounds#45494D) — placeholder text, disabled states, hintsAll buttons must be pill-shaped (border-radius: 9999px or {rounded.full}). Primary and outline variants both use full pill radius; there are no rectangular buttons in this system.
Button padding is uniform: {spacing.sm} (16px) on all sides for compact buttons; {spacing.sm} top/bottom, {spacing.md} left/right for standard buttons. Never deviate without explicit design revision.
Cards and containers are sharp (border-radius: 0px). Images, modals, and overlays remain sharp. Only inputs and buttons are rounded.
Spacing between major sections is {spacing.band} (80px) vertical. Subsections use {spacing.section} (68px). Do not reduce these values without cause; they define rhythm.
Typography: Roboto Slab for headings (32px–40px), Montserrat for body/UI (14px–18px). Font weight hierarchy: 400 (body), 600 (button/link emphasis), 700 (heading). No custom font sizes outside these tiers unless explicitly specified.
Links are always {colors.primary} (#036399) by default. Hover state adds underline and scale(1.1) transform. Focus state uses 2px outline in currentColor. No other link colours exist.
Disabled states: Buttons and inputs reduce opacity to 50% (0.5). No color change, no shadow addition. Background remains solid.
Mobile-first navigation: Hamburger toggle visible at all breakpoints. Nav links hidden ≤768px, visible 1024px+. Section padding always 0px horizontally; growth comes from max-width containers.
Elevation is color-blocking only. No multi-layer shadows. Use {colors.primary}, {colors.canvas}, and {colors.surface-alt} to create visual hierarchy. The single shadow (rgba(0, 0, 0, 0.15) 0px 2px 20px 0px) is reserved for dropdowns only.
Focus management: All interactive elements must have visible focus states (outline or transform). No outline: none without alternative focus indicator.
No explicit error/success/warning semantic colors — The site does not declare a status colour ramp in its stylesheets. The system contains only neutral and primary brand colours; if error states, success indicators, or warning badges are needed, they must be designed separately and added to the system.
Four colours marked "decorative" with no measured role — {colors.accent-1} (#212529), {colors.accent-2} (#004A75), and {colors.accent-3} (#001D32) were extracted but have no observed functional use. They may appear in future designs or undocumented contexts; their purpose remains unclear.
Gradients and decorative meshes not found — All surfaces are flat colour. If gradient overlays or textured backgrounds are used, they were not present in the analysed page or were rendered via image assets rather than CSS.
Interaction states not exhaustively captured — The extraction includes focus, hover, and disabled states where present in stylesheets, but some edge cases (long-press, drag-and-drop, scroll-linked animations) may not be documented. Refer to browser DevTools for real-time behaviour.
No dark mode or theme variants — Only the light theme was analysed. No dark-mode stylesheet or CSS variable override set was measured. If dark mode is planned, it must be designed and tokenized separately.
Surfaces behind authentication not visited — The analysis covered public pages only. Student portals, admin dashboards, or account management interfaces may have additional component styles or colour roles not present in this extract.
Responsive imagery and video behavior — The design tokens capture layout grid and text sizing across breakpoints, but image aspect ratios, video embeds, and lazy-loading strategies were not quantified. Implement common practises (intrinsic sizing, srcset, responsive containers) alongside these tokens.
No microinteraction timing or easing functions specified — Button hovers, link scales, and focus transforms are noted, but CSS transition-duration, animation-timing-function, and @keyframes were not extracted. Assume reasonable defaults (150ms–300ms ease-in-out) or reference the live site for observed timing.
Border widths extracted but sparse — The system measures 1px (buttons, links) and 3px (footer border) only. Other border contexts (form inputs, dividers, decorative strokes) were not explicitly measured; apply the measured widths as a base and test on-site.