Aspire Clinic

Overview

Aspire Clinic's design system embodies 'Clinical Clarity with Human Warmth'—a professional healthcare aesthetic that prioritizes patient trust through clean typography, strategic color hierarchy, and accessible interaction patterns. The brand serves individuals aged 6–65 seeking neurodevelopmental assessments (ADHD, autism) in Ireland, delivered remotely by consultant psychiatrists. The visual language combines the authority of medical expertise with the approachability of modern digital healthcare: a deep professional azure (#145da0) anchors clinical credibility, while warm golden accents (#FEC262) humanize the experience and guide users toward key actions. The interface avoids clinical coldness through generous whitespace (5rem section padding), humanizing imagery (real clinicians and patients), and a conversational tone that demystifies complex psychiatric processes.

The brand voice is evidence-based yet conversational, never patronizing or breathless. Vocabulary emphasizes clarity ('Report Within 10 Working Days'), specificity ('CORU & MCI Registered Clinicians'), and patient agency ('Designed Around You'). Example sentence in brand voice: 'Your assessment is tailored to your age and presentation—we listen first, diagnose second.' The personality is calm, competent, and genuinely invested in removing barriers to care.

Colors

The color system is built on a three-tier hierarchy: primary (Clinical Azure #145da0) for trust and navigation, secondary (Warm Gold #FEC262) for high-priority CTAs and encouragement, and tertiary (Success Green #16a34a) for validation and positive outcomes. Primary (#145da0) dominates the header, hero headline, and all primary buttons ('Book Assessment'), establishing immediate clinical authority. Its container variant (#e8f1fb, 88% lightness) provides a soft background for secondary information and form labels without losing hierarchy. The dark variant (#0e4578) is reserved for hover states and deepens engagement signals. Secondary (#FEC262) appears exclusively on the most prominent CTA ('Book Assessment' button in header and hero), creating a warm, actionable contrast against the cool p

Typography

The type system pairs Plus Jakarta Sans (geometric, modern, 700–800 weight for headings) with Lexend (humanist, highly legible, 400 weight for body), creating a 'Professional + Accessible' duality. Display (56px, 800 weight, -0.02em tracking) is reserved for hero headlines like 'Expert Online Psychiatry & Neurodevelopmental Assessments in Ireland,' commanding attention while remaining readable. Headline-lg (36px, 700 weight) anchors section titles; headline-md (28px, 700 weight) breaks up content. Body-lg (18px, Lexend, 400 weight, 28px line-height) is the primary reading size for hero copy and long-form content, with 0.005em tracking to maintain warmth. Body-md (16px, 24px line-height) handles form labels and secondary content. Label-md (14px, Plus Jakarta Sans, 700 weight, 0.02em trackin

Layout

The layout uses a 12-column grid with a 1160px max-width container, centered with 24px gutters on desktop and 16px on tablet. Section padding is consistently 5rem (80px) vertical × 1.5rem (24px) horizontal, creating a breathing rhythm that prevents cognitive overload—critical for a neurodivergent audience. The hero section uses a 50/50 split (image right, content left) on desktop, collapsing to single-column on mobile, with the headline occupying 8 columns and supporting copy 7 columns to create natural reading width (~65 characters). Card grids use 3 columns on desktop (1160px ÷ 3 ≈ 360px per card), 2 on tablet, 1 on mobile, with 24px gap between cards (md spacing token). Form fields span 6 columns (half-width) on desktop, full-width on tablet/mobile. The container-max-width of 1160px pre

Elevation & Depth

Depth is conveyed through a three-level shadow system tinted with primary blue (rgba(20, 93, 160, ...)) rather than neutral black, reinforcing brand warmth. Level 1 (sm): 0 1px 3px rgba(20, 93, 160, 0.07), 0 1px 2px rgba(20, 93, 160, 0.05)—used on cards, input fields, and subtle interactive elements to lift them 1–2px from the surface. Level 2 (md): 0 4px 16px rgba(20, 93, 160, 0.10), 0 2px 6px rgba(20, 93, 160, 0.06)—applied on hover states, modals, and elevated cards to signal interaction and create 4–6px perceived depth. Level 3 (lg): 0 12px 40px rgba(20, 93, 160, 0.13), 0 4px 12px rgba(20,

Shapes

The shape philosophy is 'Approachable Professionalism'—avoiding both harsh 90° corners (which feel clinical/cold) and excessive rounding (which feels frivolous). Buttons use full rounding (border-radius: 9999px) to feel inviting and human-scaled, while cards and containers use lg (20px) or md (12px) to maintain structure and readability. Input fields use md (12px) rounding to signal 'safe to interact with' without appearing playful. Badges and chips use full rounding (9999px) to emphasize their discrete, scannable nature. The rationale: full rounding on interactive elements (buttons, chips) lo

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (bg: #145da0, text: white, 48px height, 12px 32px padding, border-radius: 9999px) use Plus Jakarta Sans 700 at 14px with 0.02em tracking. On hover, the background darkens to #0e4578 and shadow elevates from sm to md (0 4px 16px rgba(20, 93, 160, 0.10)). On focus, a 2px outline in primary-fixed-dim (#c4d9f0) appears 2px outside the button, ensuring keyboard navigation is visible. Secondary buttons (transparent bg, 2px primary border, 48px height) are used for lower-priority actions like 'Contact' or 'Learn More'; on hover, the background fills with primary-container (#e8f1fb) while the border remains primary. The accent CTA button ('Book Assessment' in header) uses secondary color (#FEC262) with dark text (#1a1

Do's and Don'ts

**Do**

• Do use primary (#145da0) for all primary CTAs, navigation highlights, and focus states—it is the brand's clinical anchor and must remain consistent.
• Do apply md (12px) or lg (20px) border-radius to cards and containers; avoid sharp corners, which contradict the brand's warmth and accessibility commitment.
• Do maintain 24px gutters and 5rem section padding to create breathing room for neurodivergent users who benefit from visual clarity and reduced cognitive load.
• Do use Plus Jakarta Sans 700–800 for all headings and labels; its geometric precision projects clinical authority while remaining modern and approachable.
• Do apply primary-tinted shadows (rgba(20, 93, 160, ...)) rather than neutral black; this reinforces the brand's warm professionalism throughout the depth system.
• Do ensure all interactive elements (buttons, inputs, links) have visible focus states with 2px outlines in primary-fixed-dim (#c4d9f0) for keyboard navigation accessibility.

**Don't**

• Don't use secondary (#FEC262) for anything other than the highest-priority CTA or accent highlights; overuse dilutes its urgency and confuses hierarchy.
• Don't apply shadows with neutral black (rgba(0, 0, 0, ...)); always use primary-tinted shadows to maintain visual cohesion and brand warmth.
• Don't exceed 80 characters per line on body text; the 1160px container and 6-column form fields are designed to prevent cognitive overload for neurodivergent users.
• Don't use body text smaller than 16px (body-md); Lexend at 16px with 24px line-height is the minimum readable size for this audience.
• Don't mix rounded and sharp corners on related components (e.g., buttons and inputs in the same form); consistency signals that all elements are part of the same system.
• Don't remove or reduce the focus outline on interactive elements; a 2px primary-fixed-dim outline is non-negotiable for keyboard navigation and WCAG AA compliance.