T21 Connect

Overview

T21 Connect is a global support discovery platform designed with radical accessibility and human-centered compassion at its core. It serves families newly affected by Trisomy 21, helping them navigate the overwhelming first steps by connecting them to verified, reachable support organisations in their own country and language. The design aesthetic is 'Warm Institutional'—combining the clarity and trustworthiness of civic infrastructure with the approachability of a caring community. The interface uses a restrained palette of deep teal (#1f6f8b), warm gold (#f2c04f), and soft neutrals to create a sense of calm authority: the teal conveys stability and medical credibility, the gold adds warmth and human connection, and the clean white space prevents cognitive overload for users in crisis. Voice: direct, jargon-free, and deeply empathetic. The brand speaks in short declarative sentences that acknowledge pain without minimizing it. Example: 'You're not alone. We've found 47 verified organisations in your country—all in your language.'

Colors

The color system is built on a foundation of trust and accessibility. Primary (#1f6f8b) is a deep, professional teal used exclusively for interactive elements—buttons, links, and focus states—establishing clear affordance without aggression. Secondary (#f2c04f) is a warm, optimistic gold that appears as accent highlights, underlines on key messaging, and supporting UI elements; it humanises the institutional primary and signals hope. Tertiary (#cfc9ba) is a soft greige used sparingly for subtle backgrounds and dividers, preventing visual fatigue. The surface stack ranges from near-white (#fdfdfD) for the main canvas to progressively darker grays (#e9ecef, #e0e0e0) for layered containers and disabled states. On-surface text is always #1b1f23 (near-black) for maximum readability—WCAG AAA con

Typography

The type system uses PT Sans and PT Sans Narrow to balance institutional authority with human warmth. Display (56px, 700 weight) is reserved for the hero headline 'You're Not Alone'—its generous size and bold weight create emotional impact without shouting. Headline-lg (40px, 700) anchors section headers and major content blocks. Body-lg (18px, 400) is the primary reading size for hero copy and introductory paragraphs, set at 28px line-height to ensure comfortable scanning for users under stress. Body-md (16px, 400) handles standard paragraph text and card content. Label-md (14px, PT Sans Narrow, 400 weight) is used for button text and form labels, with 0.02em letter-spacing to add precision and visual separation. All type uses -0.01em to -0.02em negative letter-spacing on display and head

Layout

The layout uses a 12-column grid with a fixed max-width of 1440px, centred on the viewport. The hero section spans full-width with 24px horizontal gutters on mobile, expanding to 64px on desktop (lg breakpoint). Content sections use 40px vertical spacing (lg token) between major blocks to create breathing room and prevent cognitive overwhelm. The container max-width of 1440px ensures that even on ultra-wide displays, line lengths remain readable (60–80 characters for body text). Horizontal padding follows a mobile-first approach: 16px on small screens, 24px on tablet, 64px on desktop. Cards and form elements use 24px internal padding (md token) with 12px gaps between stacked items (sm token). The spacing scale is semantic: xs (4px) for micro-interactions and icon spacing, sm (12px) for for

Elevation & Depth

Depth is achieved through subtle, consistent shadows rather than layering or blur effects. The elevation system uses three levels: sm (0 1px 5px rgba(0, 0, 0, 0.4)) for interactive elements like dropdowns and tooltips, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for elevated modals and floating panels. Shadows are always soft and diffuse—never sharp or high-contrast—to maintain the calm, approachable tone. The select dropdown uses md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) with a 1px solid border at rgba(0, 0, 0, 0.1) to define it

Shapes

The shape philosophy is 'Institutional Warmth'—sharp enough to feel professional and trustworthy, soft enough to feel human and approachable. Buttons use 4px border-radius (sm token), a subtle rounding that signals modernity without the friendliness of fully rounded corners. Cards and containers use 12px border-radius (md token), creating a gentle frame that feels curated but not precious. Input fields use 4px border-radius (sm token) to match buttons and maintain visual consistency in forms. The select dropdown panel uses 4px border-radius with a 1px border, echoing the input field design. Mo

Components

Action Elements Buttons are the primary call-to-action mechanism. The primary button uses background-color: #1f6f8b (primary teal), text-color: #fdfdfD (near-white), padding: 14px 24px, height: 44px, border-radius: 4px, and font-family: PT Sans Narrow at 14px, 400 weight. On hover, the background transitions to #1a5a73 (darkened teal) over 200ms. On focus, add outline: 2px solid #f2c04f (secondary gold) with outline-offset: 2px. Secondary buttons use background-color: #eef1f5 (surface-container-low), text-color: #1b1f23 (on-surface), with a 1px border in #b8b3a6 (outline-variant). On hover, background transitions to #e9ecef (surface-container). All buttons use cursor: pointer and transition: all 200ms ease-in-out to signal responsiveness.

Containers & Surfaces Cards are the primar

Do's and Don'ts

**Do**

• Do use primary teal (#1f6f8b) exclusively for interactive elements—buttons, links, focus states—to create clear affordance and maintain visual consistency.
• Do maintain 24px minimum padding inside cards and containers to prevent content from feeling cramped or overwhelming.
• Do apply 200ms ease-in-out transitions on all interactive state changes (hover, focus, active) to signal responsiveness without jarring the user.
• Do use PT Sans and PT Sans Narrow exclusively; these fonts are optimised for accessibility and readability on screen, especially for neurodivergent users.
• Do ensure all interactive elements have a visible focus state with 2px gold (#f2c04f) outline and 2px offset for keyboard navigation.
• Do use the full surface stack (surface, surface-container-low/high, etc.) to create visual hierarchy without relying on colour alone.
• Do set line-height to at least 1.5x font-size for all body text to improve readability for dyslexic and low-vision users.
• Do use the spacing scale semantically: xs for micro-interactions, sm for form gaps, md for card padding, lg for section breaks.

**Don't**

• Don't use secondary gold (#f2c04f) as a background for large text areas; it reduces contrast and fatigues the eye. Reserve it for accents and highlights.
• Don't apply shadows with blur-radius greater than 24px; they create a hazy, uncertain feeling that contradicts the platform's trustworthiness.
• Don't use border-radius greater than 12px on cards or containers; excessive rounding feels childish and undermines institutional credibility.
• Don't set line-height below 1.4x font-size; tight line-height excludes users with dyslexia and low vision.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; use #1b1f23 for text and #fdfdfD for backgrounds to reduce eye strain.
• Don't apply transitions longer than 300ms on interactive elements; slow transitions feel sluggish and frustrate users.
• Don't use more than three font sizes in a single section; excessive typographic variation creates visual noise and cognitive load.
• Don't disable form inputs without clear visual feedback (e.g., reduced opacity + cursor: not-allowed); ambiguous disabled states confuse users.