Doccy

Overview

Doccy is a telehealth platform that democratizes access to Australian healthcare through a design language rooted in 'Vibrant Accessibility'—a movement that combines clinical clarity with optimistic, human-centered visual energy. The brand serves patients seeking convenient, affordable medical consultations, certificates, and prescriptions from AHPRA-registered doctors. The UI aesthetic balances a serene cyan-to-turquoise gradient hero (evoking calm and trust) with punchy accent colors (lime-yellow primary at #f9fe6c, hot pink tertiary at #fc65ea, and fresh mint secondary at #22d48f) that signal speed, modernity, and approachability. The emotional response is one of relief: healthcare that feels modern, not sterile; fast, not rushed; professional, not intimidating.

The brand voice is conversational, direct, and reassuring—never clinical jargon, always plain language. Doccy speaks to Australians as peers: 'Get a medical certificate in minutes, not weeks.' 'No waiting rooms. No hassle.' The vocabulary emphasizes accessibility (24/7, anywhere, anytime), affordability (from $12.90), and trust (AHPRA-registered, 5-star rated). Example sentence in brand voice: 'Tomorrow's cold front arrives at 6:14—pack a layer' becomes 'Feeling unwell? Connect with a doctor in under 5 minutes, get your certificate by lunchtime.'

Colors

Doccy's color system is built on a foundation of clinical white (surface: #ffffff) paired with a vibrant accent palette that signals healthcare innovation without sacrificing trust. The primary color, lime-yellow (#f9fe6c), is the signature CTA accent—used on 'Get Started' buttons, key interactive elements, and brand moments. It commands attention without aggression, evoking energy and optimism. Secondary green (#22d48f) reinforces positive outcomes and success states (e.g., 'Certificate approved'). Tertiary magenta (#fc65ea) adds playful contrast for highlights, badges, and secondary CTAs. The error red (#dc2626) is reserved for critical warnings and destructive actions, maintaining clinical clarity. The surface stack progresses from pure white (#ffffff) through subtle grays (surface-cont

Typography

The type system pairs denimDisplay (a custom, geometric sans-serif) for headlines and denimText for body copy, creating a distinctive, modern voice that feels both professional and approachable. Display (64px, 500 weight, -0.02em letter-spacing) anchors hero sections with bold confidence; headline-lg (40px, 600 weight) introduces major sections; headline-md (28px, 600 weight) breaks up content rhythm. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and card descriptions, while body-md (16px, 400 weight, 24px line-height) serves as the default body text. Label-md (14px, 500 weight, 0.01em letter-spacing) is applied to buttons, form labels, and UI controls; label-sm (12px, 500 weight, 0.02em letter-spacing) for secondary labels and helper text. When displayin

Layout

Doccy employs a fluid 12-column grid with a maximum container width of 1312px, allowing content to breathe on large screens while maintaining focus on smaller viewports. The page rhythm is built on a semantic spacing scale: lg (40px) separates major sections (hero to features, features to testimonials); md (24px) is used for card padding and subsection margins; sm (12px) for internal component spacing (button padding, form field gaps). The gutter is consistently 24px, creating a 48px total margin between columns on desktop and collapsing to 16px on mobile. White-space is treated as a design element—generous margins around hero imagery (80px+ top/bottom padding) create visual breathing room and emphasize the gradient background. Cards are padded with md (24px) internally, with lg (40px) mar

Elevation & Depth

Doccy uses subtle, layered shadows to create visual hierarchy without introducing dark overlays or glassmorphism. The elevation system comprises three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like form fields and small badges; md (0 4px 12px rgba(0, 0, 0, 0.1)) for standard cards, modals, and interactive containers; lg (0 3px 8px rgba(0, 0, 0, 0.15)) for elevated states (card-hover, dropdown panels). The hero section uses no shadow, relying instead on the gradient background and rounded corners (1.5rem) to establish depth. Interactive elements (buttons, inputs) transiti

Shapes

Doccy's shape philosophy is 'Soft-Technical'—combining rounded corners with geometric precision to signal both approachability and clinical professionalism. The rounded scale progresses from sharp (sm: 0.25rem / 4px for small UI elements like close buttons) to fully rounded (full: 9999px for pill-shaped buttons and badges). Standard cards use lg (1rem / 16px) border-radius, creating a friendly, modern appearance without sacrificing visual clarity. The hero section and large containers use xl (1.5rem / 24px) for a more prominent, inviting presence. Buttons default to full (9999px) for primary C

Components

Action Elements Primary buttons (button-primary) use the signature lime-yellow background (#f9fe6c) with near-black text (#0a0a0a), full rounding (9999px), and 10px vertical / 20px horizontal padding for a 40px total height. On hover, the background transitions to primary-fixed-dim (#e8ed5a) with a 200ms ease transition and md shadow (0 4px 12px rgba(0, 0, 0, 0.1)). Focus states add a 3px outline at rgba(249, 254, 108, 0.3) to ensure keyboard accessibility. Secondary buttons use a transparent background with a 1px solid outline at #cccccc, label-md typography (14px, 500 weight), and DEFAULT rounding (0.5rem). On hover, the background becomes surface-container-high (#e9ecef) with the same 200ms transition. All buttons must include a minimum 44px touch target height on mobile and support

Do's and Don'ts

**Do**

• Do use primary yellow (#f9fe6c) exclusively for primary CTAs and focus states—it is the brand's signature accent and must remain distinctive and high-contrast.
• Do apply md shadow (0 4px 12px rgba(0, 0, 0, 0.1)) to cards and interactive elements on hover to signal elevation and interactivity.
• Do maintain at least 24px (md spacing) padding inside cards and 40px (lg spacing) margins between major sections to ensure visual breathing room.
• Do use denimDisplay for all headlines (h1–h3) and denimText for body copy to maintain the brand's distinctive, modern typographic voice.
• Do apply full rounding (9999px) to primary buttons and badges to emphasize their role as high-priority, action-oriented elements.
• Do include a 200ms ease transition on all interactive state changes (hover, focus, active) to provide smooth, professional feedback.

**Don't**

• Don't use primary yellow (#f9fe6c) for body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and focus indicators to maintain visual hierarchy.
• Don't apply shadows darker than lg (0 3px 8px rgba(0, 0, 0, 0.15)) or blur effects that obscure content; Doccy's aesthetic is light and accessible, not dark or glassmorphic.
• Don't reduce spacing below sm (12px) for internal component padding or below md (24px) for section margins; white-space is a core design principle.
• Don't mix rounded corner values within a single component family (e.g., don't use both 0.5rem and 1rem on different cards)—consistency reinforces brand recognition.
• Don't use system fonts or fallback sans-serifs as primary typography; always load denimDisplay and denimText to maintain the brand's distinctive voice.
• Don't apply more than two accent colors (primary + secondary or primary + tertiary) in a single UI section; visual restraint prevents cognitive overload and maintains focus on the CTA.