Switch between the rendered Visual preview and the Raw DESIGN.md.
The IASLC design system embodies a sophisticated, clinical aesthetic rooted in trust, precision, and global healthcare authority. The palette draws from institutional medical design—deep navy blues convey professionalism and stability, while strategic use of cardinal red creates urgency and emotional resonance for patient-centered messaging. The typography leans toward clean, modern sans-serif clarity, supporting content hierarchies that range from bold scientific research declarations to intimate patient narratives. Visual elements are deliberately restrained, allowing content and mission-driven imagery (such as the colorful molecular dot pattern representing global collaboration) to become the focal point. The overall impression is authoritative yet approachable, balancing rigorous scientific credibility with compassionate healthcare communication.
Key Characteristics
#203D7C): Core brand identity, primary navigation, headings, foundational UI elements; conveys institutional authority and trust#C5203E): Primary call-to-action buttons, donation prompts, urgent messaging, error states; emotionally resonant for healthcare mission#6F42C1): Secondary interactive states, alternative accents#E83E8C): Tertiary accent for highlights or special features#FD7E14): Warm accent for featured content or warning contexts#20C997): Success states and positive reinforcement#C5203E): All hyperlinks, underlines, interactive text#6610F2): Keyboard focus indicators, active states#000000): Body text, primary content, high-contrast elements#343A40): Secondary navigation, subheadings, reduced-emphasis text#495057): Tertiary text, disabled states, metadata#707070): Borders, dividers, subtle backgrounds#BFBFBF): Disabled button text, very subtle UI elements#4C4C4C): Alternative dark neutral for UI consistency#FFFFFF): Primary surface, card backgrounds, content containers#F8F9FA): Subtle background tint, alternate section backgrounds#C5203E): Form validation errors, destructive actions, alerts#FFC107): Caution messages, non-critical alerts#28A745): Confirmation messages, successful transactions, positive validation#FAAA48): Secondary warning state, informational cautions| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display / H1 | Gotham | 41px | 500 | 58.63px | Normal | Page titles, hero headlines |
| Heading 2 | Gotham | 32px | 700 | 45.76px | Normal | Section headings (inferred from h1/h3 pattern) |
| Heading 3 | Gotham | 28px | 700 | 40.04px | Normal | Subsection titles, featured article titles |
| Heading 4 | Gotham | 20px | 700 | 28.6px | Normal | Card titles, smaller sections |
| Body | Gotham | 14px | 400 | 19.6px | Normal | Primary paragraph text, default content |
| Body Emphasis | Gotham | 14px | 700 | 19.6px | Normal | Emphasized text within body, strong highlights |
| Small Text | Gotham | 12px | 400 | 16.8px | Normal | Captions, metadata, footnotes (inferred) |
| Label | Gotham | 14px | 400 | 19.6px | Normal | Form labels, UI labels |
| Button Text | Gotham | 14px | 500–700 | 14px–21px | Normal | Varies by button variant |
| Input Text | Gotham | 14px | 325 | 18px | Normal | Form input placeholder and value text |
| Navigation | Gotham | 16px | 400 | 24px | Normal | Primary and secondary navigation items |
| Navigation Emphasis | Gotham | 16px | 700 | 24px | Normal | Active navigation states |
| Link | Gotham | 14px–16px | 700 | 19.6px–24px | Normal | Hyperlinks, inline actions |
| List Item | Gotham | 16px | 400 | 16px | Normal | Bulleted and numbered lists |
#C5203E#FFFFFF12px 8px 12px 8px0px1px solid #C5203Ergba(0, 0, 0, 0.1) 0px 12px 24px 0pxauto (min 44px for touch targets)14px#A31B31, increase shadow to rgba(0, 0, 0, 0.15) 0px 16px 28px 0px2px solid #6610F2#BFBFBF, text color #707070, shadow none#203D7C#00000012px 16px 12px 16px0px2px outset #00000044px24px#16284F, text remains #0000002px solid #6610F2#495057, text color #707070#C5203E10px 15px 10px 15px6px1px solid #C5203Ergb(255, 255, 255) 0px 1px 0px 0px insetauto (min 44px)21px#FFF5F7, text color remains #C5203E, border strengthens to 2px2px solid #6610F2#FFE8ED, border 2px solid #C5203E1px (icon only)9px 9px 9px 9px0px44px44pxrgba(32, 61, 124, 0.1), text color #203D7C2px solid #6610F2#FFFFFF#00000024px 24px 24px 24px (inferred standard)0pxrgba(0, 0, 0, 0.1) 0px 12px 20px 0px24pxrgba(0, 0, 0, 0.15) 0px 16px 28px 0px, slight lift effect#000000#FFFFFF or #F8F9FA#00000040px 32px 40px 32px (inferred from spacing scale)0px1px solid #E0E0E0, bottom 1px solid #E0E0E024px#70707013px 20px 13px 20px0px1px solid #70707044px100%18px#BFBFBF, font-style italic2px solid #203D7C, box-shadow 0px 0px 0px 3px rgba(32, 61, 124, 0.1)2px solid #C5203E, background rgba(197, 32, 62, 0.05)#70707013px 20px 13px 20px0px1px solid #70707044px284px18px#C5203E (search icon on right)2px solid #203D7C#343A408px* in color #C5203E, font-weight 700#FFFFFF#00000016px 20px 16px 20px (per item)0px1px solid #E0E0E024px24px horizontal gap#C5203E, background remains white#C5203E, font-weight 700, bottom border 3px solid #C5203E#343A40#495057#C5203E1px 16px 2px 16px (compact)0px24px/ in color #707070, font-weight 400#C5203E0px19.6px#A31B31, text-decoration underline (thicker 2px)2px solid #6610F2, outline-offset 2px#8B1530#C5203E8px 12px 8px 12px0px24pxrgba(197, 32, 62, 0.1), color #A31B31#C5203E, font-weight 700, bottom-border 2px solid #C5203E4px4px, 8px, 12px, 16px, 20px, 24px, 32px, 36px, 40px, 48px, 80px, 92px, 104px4px–8px: Micro-spacing (icon padding, tight lists)12px–16px: Element padding (buttons, inputs, labels)20px–24px: Component gaps (between form fields, list items)32px–40px: Section padding (card interiors, container padding)48px–80px: Section margins (between major content blocks)92px–104px: Hero/landing margins (above/below hero sections)1230px (primary content container, inferred from card width)40px left/right at desktop, 24px at tablet, 16px at mobile24px between grid columnsGenerous whitespace is fundamental to the design system, supporting the scientific and medical nature of IASLC's content. Breathing room around text blocks, cards, and interactive elements reduces cognitive load and emphasizes hierarchy. Sections are separated by 48–80px vertical margins, allowing readers to process information in digestible chunks. Padding inside components (cards, buttons, inputs) is consistently applied to create visual rhythm.
0px): Primary buttons, cards, inputs, navigation (sharp, institutional aesthetic)6px): Ghost buttons, secondary interactive elements (subtle softness)12px): Optional for future badge or pill components16px–20px): Reserved for future soft, rounded UI elements if brand evolution requires| Level | Treatment | Use |
|---|---|---|
| Flat (None) | No shadow, no border | Default UI, buttons, inputs, navigation |
| Raised (Small) | rgba(0, 0, 0, 0.1) 0px 12px 20px 0px | Standard cards, content containers, modest elevation |
| Inset (Medium) | rgba(0, 0, 0, 0.12) 0px 4px 12px 0px inset | Dropdown panels, selected states, recessed UI |
| Lifted (Large) | rgba(0, 0, 0, 0.2) 4px 4px 20px 0px | Modals, overlays, hover states on cards |
| Embossed (Inset Highlight) | rgb(255, 255, 255) 0px 1px 0px 0px inset | Button interiors, pressed states, subtle 3D effect |
| Interactive (Button) | rgba(0, 0, 0, 0.1) 0px 12px 24px 0px | Primary CTA buttons, hover states, prominence |
Shadow Philosophy: The design system uses restrained shadow application to maintain the clinical, institutional aesthetic. Shadows are employed primarily for depth separation (cards vs. background) and interactive feedback (button hover, modal overlay). Avoid excessive shadow layering; subtle shadows at small offsets (0–4px horizontal/vertical) create depth without softening the sharp, professional character. Inset shadows add tactile, embossed qualities to interactive elements, subtly increasing engagement without distraction.
#203D7C) for primary navigation and institutional authority#C5203E) exclusively to CTAs, urgent messaging, and patient-facing content44px × 44px for all interactive elements#707070 or lighter for disabled states, never pure gray #8080800px radius) as the default for institutional consistency#C5203E and #203D7C) in a single component> 6px) to primary UI elements| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | Single-column layout, full-width cards, reduced padding (16px), navigation collapses to hamburger menu, font sizes reduce by 2–4px for body text |
| Tablet | 768px–1024px | Two-column grid at half width, padding 24px, navigation remains horizontal with reduced item spacing (16px), container max-width 720px |
| Desktop | 1024px–1440px | Full 12-column grid, padding 40px, container max-width 1230px, all typography at full size, navigation spans full width |
| Wide | > 1440px | Centered content with max-width 1230px, side gutters expand, grid remains 12-column but with proportional column widths |
44px × 44px for all buttons, links, and interactive elements8px minimum to prevent accidental activation44px × 44px even if icon is smaller; center icon within button44px height minimum, width adapts to container (full-width on mobile, 284px on desktop search)24px → 16px on mobile; title font-size 28px → 20px41px → 28px on mobile; Body 14px → 13px on small screens80px → 48px on tablet → 32px on mobile100% with aspect ratio preservation; full-width cards on mobile44px height minimum#C5203E)#203D7C)#000000)#343A40)#707070)#707070)#FFFFFF) with small shadow rgba(0, 0, 0, 0.1) 0px 12px 20px 0px#C5203E)#20C997)#BFBFBF) with Medium Gray text (#707070)#C5203E; navigation is always #203D7C.41px, 28px, 20px, 16px, 14px, 12px). Weight shifts drive emphasis, not size increases.4px, 8px, 12px, 16px, 20px, 24px, 32px, 36px, 40px, 48px, 80px, 92px, 104px). No arbitrary values.0px border-radius. Only ghost buttons use 6px. This sharp aesthetic is non-negotiable.0px 12px 20px small, 0px 16px 28px hover) and buttons (0px 12px 24px). Never stack multiple shadows or create custom elevations.44px in height or width. This is a hard requirement for accessibility and usability.2px solid #6610F2 outline with 2px offset. Ensure keyboard navigation matches visual focus order.IASLC Design System v1.0
For questions or contributions, refer to the original IASLC website design tokens and maintain alignment with institutional brand guidelines.