Institute of Health

Overview

Institute of Health is a professional education and certification platform serving functional medicine practitioners and nutrition specialists worldwide. The design system embodies 'Minimalist Professionalism'—a refined aesthetic that prioritizes clarity, precision, and trustworthiness through restrained typography, generous whitespace, and strategic use of a single vibrant accent color (#00b2ff). The interface evokes authority and scientific rigor while remaining approachable and human-centered, reflecting the brand's commitment to evidence-based practice and mentorship. The emotional response is one of calm confidence: users feel they are engaging with a credible, well-organized institution that respects their time and intelligence.

The brand voice is direct, evidence-focused, and free of marketing hyperbole. Vocabulary patterns favor concrete, actionable language over abstract claims. Tone is warm but professional—never patronizing, never breathless. Example sentence in brand voice: 'This module teaches you to interpret metabolic pathways, connect lab data to client symptoms, and build clear, practical steps for implementation.'

Colors

The color system is built on a light, neutral foundation (surface #e6e6e6, on-surface #242424) that creates a clean, professional canvas. Primary (#00b2ff) is the brand's signature accent—a vivid, cool cyan used exclusively on call-to-action buttons, interactive focus states, and key data highlights. This color appears sparingly but with high impact, drawing the eye to the most important interactions without overwhelming the interface. Secondary (#4a5464) is a muted slate-blue used for supporting text, icons, and secondary navigation; it provides visual hierarchy without competing with primary. Tertiary (#808080) is a neutral gray reserved for disabled states, dividers, and tertiary UI elements. The surface stack progresses from dim (#d9d9d9) through standard (#e6e6e6) to bright (#f1f1f1),

Typography

The type system uses Lay Grotesk as the primary typeface—a geometric sans-serif that conveys modernity and precision while remaining highly legible at all sizes. The hierarchy spans from display (60px, fontWeight 500) for hero statements down to label-sm (12px, fontWeight 400) for metadata. Display and headline-lg use negative letter-spacing (-0.02em to -0.015em) to tighten the visual mass and create impact; body and label sizes use neutral or slightly positive letter-spacing (0.005em to 0.02em) to maintain readability. All headings use fontWeight 500 (medium), avoiding heavier weights to preserve the refined, professional aesthetic. Body text is set at 16px (body-md) with 24px line-height (1.5x) for comfortable reading; longer passages use body-lg (18px, 28px line-height). Labels and smal

Layout

The layout follows a 12-column grid system with a maximum container width of 1280px, allowing content to scale fluidly on smaller screens while maintaining control on desktop. The gutter spacing is 24px (md spacing), creating consistent rhythm between columns. Page sections are separated using lg spacing (40px) vertically, establishing clear visual breaks between content blocks. The hero section uses full-width imagery with a semi-transparent overlay (rgba(0, 0, 0, 0.3) to 0.5) to ensure text legibility; key statistics and CTAs are positioned in the right third of the viewport using absolute positioning, creating visual tension and guiding the eye. Card-based layouts use md spacing (24px) for internal padding and sm spacing (12px) for gaps between cards in a grid. Whitespace is treated as

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background color shifts rather than dramatic layering. Level 1 (Base): the light gray surface (#e6e6e6) with no shadow, establishing the foundation. Level 2 (Cards and Containers): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), a barely perceptible lift that separates cards from the background without drawing attention. Level 3 (Hover/Interactive): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied on card-hover and button-primary-hover states to signal interactivity and depth. Level 4 (Modals and Overlays): box-shadow: 0 8px 24px rgb

Shapes

The shape philosophy is 'Technical Softness'—combining the precision of modern UI with subtle, human-friendly curves. Buttons and form inputs use rounded.sm (4px / 0.25rem), a minimal radius that feels contemporary and clean without appearing harsh. Cards and larger containers use rounded.md (8px / 0.75rem) or rounded.lg (16px / 1rem) depending on context, with larger radius on image containers (16px) to soften photographic content. Badges and pills use rounded.full (9999px) for maximum softness, signaling secondary or supplementary information. The rationale: sharp corners (0px) would feel au

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses backgroundColor {colors.primary} (#00b2ff), textColor {colors.on-primary} (#f1f1f1), rounded.sm (4px), padding 12px 24px, and height 44px for touch-friendly targets. On hover, the background shifts to #0099cc (a 20% darker shade) and gains a soft glow: box-shadow: 0 3px 8px rgba(0, 178, 255, 0.25). Transition timing is 0.3s ease across all properties. button-secondary uses a transparent background with rgba(241, 241, 241, 0.15) and a 1px border at rgba(241, 241, 241, 0.3), ideal for secondary CTAs on dark hero overlays. On hover, opacity increases to 0.25 and border to 0.5, maintaining visual hierarchy without competing with primary buttons.

Containers & Surfaces Cards are the foundational container

Do's and Don'ts

**Do**

• Do use primary (#00b2ff) exclusively on CTAs, focus states, and data highlights—never on backgrounds or body text.
• Do maintain at least 24px of vertical spacing (lg) between major content sections to create visual breathing room.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on interactive hover states to signal depth and responsiveness.
• Do use Lay Grotesk at fontWeight 500 for all headings and fontWeight 400 for body text to maintain the refined hierarchy.
• Do ensure all interactive elements (buttons, inputs, list items) have a minimum height of 44px for touch accessibility.
• Do use negative letter-spacing (-0.02em) on display and headline-lg to tighten visual mass and create impact.

**Don't**

• Don't use primary color on backgrounds, disabled states, or secondary UI elements—reserve it for high-priority interactions only.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or blur radii larger than 24px; the aesthetic is light and professional, not dramatic.
• Don't use border-radius larger than 16px on cards or containers; the brand aesthetic is modern and precise, not playful.
• Don't mix typefaces; Lay Grotesk is the sole brand typeface—system fonts are acceptable only as fallbacks.
• Don't reduce padding below 12px (sm spacing) on interactive elements; the interface should feel spacious and considered, never cramped.
• Don't apply transitions longer than 0.3s on interactive states; the interface should feel responsive and snappy, not sluggish.