Switch between the rendered Visual preview and the Raw DESIGN.md.
The AAPACN design system embodies professional healthcare leadership with a modern, trustworthy aesthetic. It combines a rich teal-blue foundation with warm, energetic orange accents to create visual hierarchy and draw attention to calls-to-action. The system balances authoritative and approachable qualities, reflecting the organization's mission to champion post-acute care nursing excellence. Clean typography, generous whitespace, and purposeful color blocking create an environment that feels both contemporary and institutional, instilling confidence in healthcare professionals seeking education, certification, and community resources.
Key Characteristics
#D16800): Primary call-to-action buttons, headline accents, and featured event highlights#D07729): Hover states, secondary CTAs, and supporting action elements#007CBA): Header backgrounds, featured content panels, authority indicators#7A00DF): Accent highlights and secondary featured elements#ACCE00): Logo accent, brand mark complementary color, visual interest points#007AFF): Links in secondary contexts, web-standard interaction states#D07C29): Tertiary button states and subtle interactive elements#0C0B0B): Main body text and primary reading content#171515): Headings and emphasis text#555555): Secondary information and supporting copy#666666): Captions, metadata, and de-emphasized content#292929): Disabled states and subtle UI elements#000000): Maximum contrast overlays and emphasis#FFFFFF): Primary background, card bases, input fields#F1F1F1): Secondary background, subtle section dividers#CF2E2E): Error messages and validation failures#FCB900): Caution indicators and warnings#B5BD00): Alternative warning treatment for compliance contentPrimary: Poppins (web-safe stack: Poppins, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif)
Secondary: Source Sans Pro (web-safe stack: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Poppins | 32px | 700 | 40px | -0.5px | Large hero headlines, page titles |
| Heading / H2 | Poppins | 28px | 700 | 38px | 0px | Section headers, major content blocks |
| Subheading / H3 | Source Sans Pro | 18px | 600 | 22px | 0px | Card titles, subsection headers |
| Heading Strong / H4 | Source Sans Pro | 18px | 700 | 31px | 0px | Emphasized headers, featured content titles |
| Body / Paragraph | Source Sans Pro | 14px | 400 | 24px | 0px | Primary reading text, descriptions |
| Small Text / Span | Source Sans Pro | 13px | 400 | 33px | 0px | Captions, metadata, helper text |
| Link / Inline | Source Sans Pro | 17px | 400 | 31px | 0px | Inline links within text |
| Label / Form | Source Sans Pro | 17px | 400 | 50px | 0px | Form labels and button text |
| Button Small | Source Sans Pro | 14px | 400 | 24px | 0px | Tertiary buttons, compact actions |
#D16800#FFFFFF13px 25px2px0px solid transparentnone#B85500, Text #FFFFFF#9F4600#E5D4C4, Text #999999transparent#6666660px2px0px solid transparentnone#D16800, Background transparent#B85500#CCCCCCtransparent#6666660px 24px60pxauto2px0px solid transparentnone#D16800, Background #F1F1F1transparent#D077290px 21px34px2px0px solid transparentnone#D16800, Background transparent#D16800, Text Decoration underline#FFFFFF#0C0B0B40px0px0px solid transparent0px 2px 8px rgba(0, 0, 0, 0.08)#1A2847 (deep navy)#FFFFFF52px 44px0px0px solid transparent0px 4px 12px rgba(0, 0, 0, 0.15)#007CBA#FFFFFF32px 40px0px0px solid transparentnone#FFFFFF#0C0B0B0px 17px40px250px (min width)4px1px solid #C1C1C1none1px solid #D16800, Box Shadow 0px 0px 0px 3px rgba(209, 104, 0, 0.1)#FFFFFF#0C0B0B0px 50px 0px 17px59px100%4px1px solid #E9E9E9none1px solid #D16800, Background #FFFFFF#0C0B0B8px#FFFFFF#0C0B0B0px 40px35px0px solid transparent0px 1px 3px rgba(0, 0, 0, 0.08)transparent#D077290px 21px34px0px0px solid transparent#D16800, Background transparent, Text Decoration underline#D16800, Border Bottom 2px solid #D16800#D16800#B85500#9F4600#9F460040px on sides (desktop), 24px (tablet), 16px (mobile)| Level | Treatment | Use |
|---|---|---|
| 0 (Flat) | box-shadow: none | Navigation bars, flat section backgrounds, contained form fields |
| 1 (Subtle) | box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08) | Standard cards, floating content blocks, input focus states |
| 2 (Raised) | box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15) | Featured event panels, highlighted cards, primary content lift |
| 3 (Modal/Overlay) | box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.2) | Modals, dropdown menus, floating action panels |
Shadow Philosophy
Shadows are minimal and subtle, reflecting a professional healthcare environment where clarity supersedes decoration. Shadows serve two purposes: (1) distinguish interactive elements from static backgrounds, and (2) create gentle depth separation without introducing visual noise. All shadows use low-opacity black (rgba(0, 0, 0, 0.08–0.2)) to maintain accessibility and avoid harsh contrast. Featured content receives slightly stronger elevation to draw attention to calls-to-action and event highlights.
#D16800, #D07729) for all primary calls-to-action, including "Learn More," "Register," and "Find More Education" buttons#007CBA) as the background for header sections, featured event panels, and authority-conveying content blocksborder-radius > 2px) on buttons, cards, or navigation; maintain sharp, institutional appearance#D16800, #D07729, #007CBA, and neutrals for consistency| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile | < 640px | 1-column layout, 16px padding, 14px font for headings, single-column stacked cards |
| Tablet | 640px–1024px | 2-column grid, 24px padding, 18px heading font, reduced button padding |
| Desktop | 1024px+ | 12-column grid / 3-column cards, 40px padding, 28px+ heading font, full navigation display |
| Large Desktop | > 1440px | Max-width container (1440px) centered, consistent component sizing |
100%) on mobile, constrained width on desktop (250px minimum)#D16800)#D07729)#007CBA)#171515)#666666)#0C0B0B)#FFFFFF)#F1F1F1)#CF2E2E)#FCB900)#ACCE00)Button Rule: All primary actions use background: #D16800, color: #FFFFFF, padding: 13px 25px, font-size: 17px, border-radius: 2px. Hover state: background: #B85500.
Typography Rule: Headings use Poppins 700 weight; body text uses Source Sans Pro 400 weight. Never use font weights outside 400, 600, 700. All text maintains 24px+ line height.
Spacing Rule: All component padding is 4px-aligned. Use 40px for card horizontal padding, 44px–52px for featured sections, 60px for hero vertical padding. Maintain 28px+ between distinct sections.
Card Rule: Cards use background: #FFFFFF, box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08), border-radius: 0px, padding: 40px. Featured cards use background: #1A2847, color: #FFFFFF, box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15).
Navigation Rule: Navigation links are color: #D07729, font-size: 13px, padding: 0px 21px, height: 34px. Active state: add border-bottom: 2px solid #D16800 and change text color to #D16800.
Input Rule: All form inputs use background: #FFFFFF, border: 1px solid #C1C1C1, border-radius: 4px, height: 40px (standard) or 59px (large search). Focus state: border: 1px solid #D16800, box-shadow: 0px 0px 0px 3px rgba(209, 104, 0, 0.1).
Contrast Rule: Text and background combinations must meet WCAG AA (4.5:1 for body text, 3:1 for large text). Never use text smaller than 13px in primary content.
Elevation Rule: Use box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.08) for standard cards; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15) for featured content; no shadow on navigation or flat sections.
Brand Rule: Teal (#007CBA) + White text signals authority and importance (featured panels, section headers). Orange (#D16800) + White text signals action (buttons, CTAs). Lime green (#ACCE00) appears only in logo and as rare accent highlights.