Supernova Medical Centre

Overview

Supernova Medical Centre is a healthcare provider brand system designed to communicate clinical excellence, patient accessibility, and trusted medical expertise. The aesthetic is 'Clinical Modernism'—balancing the authority and precision required in healthcare with warm, approachable human-centered design. The UI evokes confidence through bold primary red (#ff0000) accents on critical CTAs (Book Appointment, Contact), clean white surfaces, and purposeful typography hierarchy. The emotional response is one of clarity and reassurance: patients should feel that their health is in capable, organized hands. Voice: direct, empathetic, and jargon-aware. The brand speaks to patients as partners in their care, not subjects. Example sentence: 'Your appointment is confirmed for Tuesday at 2:15 PM—arrive 10 minutes early to complete your intake form.'

Colors

The color system is anchored by a clinical primary red (#ff0000), used exclusively on high-priority CTAs and interactive states to signal actionability and urgency in a healthcare context. This red is never used for error states (which use the softer error red #d9534f) to avoid alarm fatigue. Secondary orange (#ff6900) provides warmth and is reserved for supporting accents and highlights. Tertiary cyan-blue (#0693e3) is used for informational elements, links, and secondary actions. The surface stack is deliberately neutral: white (#ffffff) as the base, with a light gray container (#f2f2f2) for card backgrounds and subtle depth. On-surface text is dark charcoal (#333333) for legibility on medical forms and appointment details. The outline color (#999999) is used for borders and dividers at

Typography

The type system uses Roboto throughout, a sans-serif optimized for medical and technical clarity. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major section titles. Headline-lg (40px, 600 weight) anchors page sections like 'Our Services' and 'Meet Our Team'. Headline-md (28px, 600 weight) is used for subsection titles and card headers. Title-lg (20px, 600 weight) labels appointment cards and service boxes. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and descriptive text. Body-md (16px, 400 weight, 24px line-height) is the default for form labels, appointment details, and body copy. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text, badge labels, and UI controls. Label-sm (12px, 500 weight, 0.05em t

Layout

The layout uses a 12-column fluid grid with a max-width of 1140px, centered on the viewport. The header is fixed with a white background and 24px horizontal gutter, containing the logo, navigation menu, and primary CTA button. Page sections use lg spacing (40px) for vertical separation between major content blocks. The appointment booking section and service cards use md spacing (24px) for internal padding and gap between items. Container max-width is enforced at 1140px for desktop; on tablet (768px–1023px) the gutter reduces to 16px and sections stack vertically. Mobile (< 768px) uses sm spacing (12px) and full-width containers with 12px side margins. The white-space philosophy emphasizes breathing room: no section should feel cramped. Cards and form inputs use md padding (24px) internall

Elevation & Depth

Visual hierarchy is conveyed through a subtle shadow system and background color shifts rather than dramatic depth. Level 1 (Base): white surface (#ffffff) with no shadow, used for the page background and primary content areas. Level 2 (Standard Card): light gray background (#f2f2f2) with a sm shadow (0 1px 2px rgba(0, 0, 0, 0.06)), used for appointment cards, service boxes, and form containers. Level 3 (Elevated/Hover): slightly darker gray (#e9ecef) with a md shadow (0 4px 12px rgba(0, 0, 0, 0.08)), applied on card hover and modal overlays. Interactive elements (buttons, inputs) use a lg sha

Shapes

The shape philosophy is 'Accessible Precision'—combining rounded corners for approachability with sharp edges where clarity is required. Buttons use full rounding (border-radius: 9999px) to signal safety and friendliness; this is the most prominent shape in the UI and appears on all CTAs. Appointment cards and service containers use lg rounding (1rem / 16px) to soften the clinical feel while maintaining structure. Form inputs use DEFAULT rounding (0.5rem / 8px) for a balanced, neutral appearance. Dividers and subtle UI elements use sm rounding (0.25rem / 4px) or no rounding at all. The rationa

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses #ff0000 background with white text, 12px vertical and 24px horizontal padding, full rounding (9999px), and Roboto 14px 600 weight. On hover, the background darkens to #cc0000 and a 0 3px 8px rgba(255, 0, 0, 0.25) shadow appears. On active/pressed, the background is #990000. The button-secondary variant uses a transparent background with a 2px solid #ff0000 border and red text; on hover, it fills with #ffcccc background and #cc0000 text. All buttons have a 44px minimum height for touch accessibility. Transitions use 200ms ease-out for color and shadow changes.

Containers & Surfaces Cards use a light gray background (#f2f2f2), 24px padding, 16px border-radius, and a 0 1px 2px rgba(0, 0, 0,

Do's and Don'ts

**Do**

• Do use the primary red (#ff0000) exclusively on high-priority CTAs like 'Book Appointment' and 'Contact'—never on error states or warnings.
• Do maintain 4.5:1 contrast ratio on all body text by using #333333 on white or light gray backgrounds.
• Do apply full rounding (9999px) to all primary buttons to signal safety and approachability in healthcare contexts.
• Do use 24px (md spacing) as the default gap between form fields, appointment cards, and service sections.
• Do apply the lg shadow (0 3px 8px rgba(0, 0, 0, 0.15)) on button hover and card focus states to lift interactive elements.
• Do use Roboto 600 weight for all labels and button text to ensure legibility on small sizes.

**Don't**

• Don't use the primary red for error messages or validation feedback—reserve #d9534f (error red) for form errors and alerts.
• Don't apply shadows larger than 8px blur radius; maintain a clean, clinical aesthetic by using subtle depth cues.
• Don't use rounded corners smaller than 8px on interactive elements; minimum 8px (DEFAULT) for inputs, 16px (lg) for cards.
• Don't mix Roboto with system fonts; always specify Roboto as the primary typeface to maintain brand consistency.
• Don't exceed 40px (lg spacing) for internal card padding; keep cards compact and scannable for appointment details.
• Don't use more than three accent colors in a single section; primary red, secondary orange, and tertiary blue are sufficient.