/* ========================================================================== Design System Tokens — Singapore Cardiology Clinic Generated: 2026-02-05 Source: Competitive analysis of 7 Singapore cardiology clinic websites ========================================================================== */ /* -------------------------------------------------------------------------- Google Fonts Import -------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap'); /* -------------------------------------------------------------------------- 1. COLOUR TOKENS Palette derived from analysis of 7 competitor sites: - Navy primary: dominant in 5/7 sites (trust, authority) - Teal secondary: used by 3/7 for a medical, modern feel - Gold accent: used by 5/7 to signal premium care - White backgrounds: universal across all 7 sites -------------------------------------------------------------------------- */ :root { /* --- Primary palette (Lighter Blue) --- */ --color-primary-950: #172554; --color-primary-900: #1E3A8A; /* Main primary — medium royal blue */ --color-primary-800: #1E40AF; --color-primary-700: #1D4ED8; --color-primary-600: #2563EB; --color-primary-500: #3B82F6; --color-primary-400: #60A5FA; --color-primary-300: #93C5FD; --color-primary-200: #BFDBFE; --color-primary-100: #DBEAFE; --color-primary-50: #EFF6FF; /* --- Secondary palette (Sky Blue — matches TSHC logo waves) --- */ --color-secondary-900: #0C4A6E; --color-secondary-800: #075985; --color-secondary-700: #0369A1; /* Links, accents — 5.2:1 contrast on white (AA) */ --color-secondary-600: #0284C7; --color-secondary-500: #0EA5E9; /* Focus rings, decorative */ --color-secondary-400: #38BDF8; /* Bright sky-blue highlights */ --color-secondary-300: #7DD3FC; --color-secondary-200: #BAE6FD; --color-secondary-100: #E0F2FE; --color-secondary-50: #F0F9FF; /* --- Accent palette (Indigo — matches TSHC logo heart motif) --- */ --color-accent-900: #312E81; --color-accent-800: #3730A3; --color-accent-700: #4338CA; /* 6.7:1 contrast on white (AAA) */ --color-accent-600: #4F46E5; --color-accent-500: #6366F1; /* Main accent — indigo, premium & distinctive */ --color-accent-400: #818CF8; --color-accent-300: #A5B4FC; --color-accent-200: #C7D2FE; --color-accent-100: #E0E7FF; --color-accent-50: #EEF2FF; /* --- Neutral palette --- */ --color-white: #FFFFFF; --color-gray-50: #F7F8FA; /* Alt section backgrounds */ --color-gray-100: #F0F1F3; --color-gray-200: #E8E8E8; /* Borders */ --color-gray-300: #D1D5DB; --color-gray-400: #9CA3AF; --color-gray-500: #6D6E71; /* Muted text */ --color-gray-600: #4B5563; --color-gray-700: #374151; --color-gray-800: #333333; /* Secondary body text */ --color-gray-900: #1F2937; /* Primary body text */ --color-gray-950: #111827; --color-black: #000000; /* --- Purple-tinted neutrals (matches TSHC logo heart motif) --- */ --color-warm-50: #F5F3FF; --color-warm-100: #EDE9FE; --color-warm-200: #DDD6FE; /* --- Semantic colour mappings --- */ --color-text-primary: var(--color-gray-900); --color-text-secondary: var(--color-gray-800); --color-text-muted: var(--color-gray-500); --color-text-inverse: var(--color-white); --color-text-accent: var(--color-primary-900); --color-text-link: var(--color-secondary-700); --color-text-link-hover: var(--color-secondary-600); --color-bg-primary: var(--color-white); --color-bg-secondary: var(--color-gray-50); --color-bg-warm: var(--color-warm-50); --color-bg-dark: var(--color-primary-900); --color-bg-accent: var(--color-accent-500); --color-border-light: var(--color-gray-200); --color-border-default: var(--color-gray-300); --color-border-dark: var(--color-gray-400); /* --- Functional colours --- */ --color-success: #059669; --color-warning: #D97706; --color-error: #DC2626; --color-info: var(--color-secondary-700); /* --- WhatsApp brand colour --- */ --color-whatsapp: #25D366; /* -------------------------------------------------------------------------- 2. TYPOGRAPHY TOKENS Font pairing: Plus Jakarta Sans (headings + body) + DM Sans (CTAs) - Plus Jakarta Sans: modern, clean, highly readable — used by OrchardHeart - DM Sans: geometric, slightly different flavour for CTAs — used by OrchardHeart - Both are free Google Fonts with excellent language support -------------------------------------------------------------------------- */ /* --- Font families --- */ --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-cta: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* --- Font sizes (rem, base = 16px) --- */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.75rem; /* 28px — H3 */ --text-4xl: 2.5rem; /* 40px — H2 */ --text-5xl: 3.25rem; /* 52px — H1 */ /* --- Font weights --- */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* --- Line heights --- */ --leading-none: 1; --leading-tight: 1.2; /* Headings */ --leading-snug: 1.3; /* Sub-headings */ --leading-normal: 1.5; /* General */ --leading-relaxed: 1.75; /* Body text — 28px for 16px base */ --leading-loose: 2; /* Large body text */ /* --- Letter spacing --- */ --tracking-tight: -0.02em; /* Large headings */ --tracking-normal: 0; --tracking-wide: 0.025em; /* Small caps, labels */ --tracking-wider: 0.05em; /* All-caps CTA text */ /* -------------------------------------------------------------------------- 3. SPACING TOKENS 4px base scale — derived from common patterns across all 7 sites. Medical sites favour generous whitespace for a clean, clinical feel. -------------------------------------------------------------------------- */ /* --- Spacing scale --- */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-30: 7.5rem; /* 120px */ /* --- Layout --- */ --container-max: 1200px; --container-narrow: 800px; --container-wide: 1400px; --container-padding-x: var(--space-6); /* 24px horizontal gutters */ --section-padding-y: var(--space-16); /* 64px vertical section padding */ /* -------------------------------------------------------------------------- 4. BORDER RADIUS TOKENS 8px buttons is the recommended middle ground between sharp (3/7) and pill (2/7). 12px for cards gives a modern, approachable feel. -------------------------------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; /* Buttons */ --radius-lg: 12px; /* Cards */ --radius-xl: 16px; /* Large cards, modals */ --radius-2xl: 24px; /* Feature sections */ --radius-full: 9999px; /* Pills, avatar circles, tags */ /* -------------------------------------------------------------------------- 5. SHADOW TOKENS 5/7 competitor sites use shadows; trend is toward soft, diffused shadows. These match the EHeart/OrchardHeart approach (subtle, modern). -------------------------------------------------------------------------- */ /* Brand-tinted shadows — uses primary-900 navy (30,58,138) for premium feel instead of flat black. Single biggest "premium signal" lift. */ --shadow-sm: 0 1px 2px rgba(30, 58, 138, 0.06); --shadow-md: 0 4px 12px rgba(30, 58, 138, 0.10); --shadow-lg: 0 8px 24px rgba(30, 58, 138, 0.12); --shadow-xl: 0 16px 40px rgba(30, 58, 138, 0.14); --shadow-card: 0 1px 3px rgba(30, 58, 138, 0.04), 0 4px 20px rgba(30, 58, 138, 0.08); --shadow-hover: 0 4px 12px rgba(30, 58, 138, 0.08), 0 16px 40px rgba(30, 58, 138, 0.14); --shadow-nav: 0 2px 8px rgba(30, 58, 138, 0.08); /* -------------------------------------------------------------------------- 6. TRANSITION TOKENS -------------------------------------------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 350ms ease; --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); /* -------------------------------------------------------------------------- 7. BREAKPOINTS (for reference — use in @media queries) These are documented here but used as literal values in media queries since CSS custom properties don't work inside @media. --bp-sm: 640px (mobile landscape) --bp-md: 768px (tablet portrait) --bp-lg: 1024px (tablet landscape / small desktop) --bp-xl: 1280px (desktop) --bp-2xl: 1536px (large desktop) -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 8. Z-INDEX SCALE -------------------------------------------------------------------------- */ --z-base: 1; --z-dropdown: 10; --z-sticky: 20; --z-fixed: 30; --z-overlay: 40; --z-modal: 50; --z-popover: 60; --z-tooltip: 70; --z-whatsapp: 80; } /* -------------------------------------------------------------------------- 9. RESPONSIVE TYPOGRAPHY OVERRIDES Scale down headings on smaller viewports to maintain readability. -------------------------------------------------------------------------- */ /* Tablet and below */ @media (max-width: 1024px) { :root { --text-5xl: 2.5rem; /* 40px (from 52px) */ --text-4xl: 2rem; /* 32px (from 40px) */ --text-3xl: 1.5rem; /* 24px (from 28px) */ --section-padding-y: var(--space-16); /* 64px */ } } /* Mobile */ @media (max-width: 640px) { :root { --text-5xl: 2rem; /* 32px */ --text-4xl: 1.75rem; /* 28px */ --text-3xl: 1.375rem; /* 22px */ --text-2xl: 1.25rem; /* 20px */ --section-padding-y: var(--space-12); /* 48px */ --container-padding-x: var(--space-4); /* 16px */ } }