Switch between the rendered Visual preview and the Raw DESIGN.md.
Georgsbad Syke's design system embodies a modern, professional healthcare aesthetic rooted in trust, wellness, and clarity. The visual identity centers on confident primary blues that evoke medical expertise and calm reassurance, complemented by warm, approachable neutrals and subtle accent tones. The atmosphere is clean and contemporary, balancing technical precision with human warmth—reflecting the physiotherapy practice's commitment to individual wellbeing. Typography emphasizes legibility and accessibility, while generous whitespace and subtle depth create an inviting, professional environment that feels both authoritative and approachable.
Key Characteristics
#0069B4) as the dominant brand color#0069B4): Primary CTAs, navigation links, brand identity elements, and interactive states. Dominant throughout the design system.#123B74): Secondary brand color for subtle differentiation, dark overlays, and deeper hierarchical elements.#F78DA7): Accent highlighting for special offerings or attention-grabbing elements.#FF6900): High-contrast accent for promotional or emphatic messaging.#7BDCB5): Supporting accent for positive, wellness-oriented messaging.#00D084): Secondary accent for success states or progressive messaging.#8ED1FC): Subtle accent for background tints and overlay effects.#FFC849): Primary warning and alert states throughout forms and notifications.#CF2E2E): Critical error states and destructive actions.#FCB900): Secondary warning indicator for less critical alerts.#333333): Primary text color for all body copy and standard content.#515559): Secondary text for reduced hierarchy and disabled states.#EEEAE4): Subtle background tint for content areas.#F2F8FA): Light background for sections requiring soft differentiation from white.#FFFFFF): Primary background and surface color.#000000): Maximum contrast text and deep shadows.#ABB8C3): Border color and subtle dividing lines between content sections.Primary: Hind (Light 300, Regular 400, SemiBold 600, Bold 700) with fallback stack: Hind, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif
Secondary: Same as primary (Hind is used exclusively)
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display/H1 | Hind | 61px | 300 | 73.2px | 0px | Hero headings, page titles |
| Heading 2 | Hind | 40px | 300 | 48px | 0px | Section headings, major divisions |
| Heading 3 | Hind | 20px | 600 | 30px | 0px | Subsection titles, card titles |
| Body Text | Hind | 20px | 400 | 30px | 0px | Primary content paragraphs |
| Navigation/Link | Hind | 16px | 400 | 24px | 0px | Menu items, standard links |
| Metadata/Caption | Hind | 12px | 400 | 18px | 0px | Captions, badges, helper text |
Primary Button
#0069B4#FFFFFF16px400Hind12px 24px50pxnone0px 4px 12px rgba(0, 105, 180, 0.15)42px16px#005a8f, Box Shadow 0px 6px 16px rgba(0, 105, 180, 0.25)#004475, Box Shadow 0px 2px 8px rgba(0, 105, 180, 0.2)2px solid #0069B4, Outline Offset 2pxSecondary Button
#FFFFFF#0069B416px400Hind12px 24px50px1px solid #0069B4none42px16px#F2F8FA, Border 1px solid #0069B4#E8F4FB, Border 1px solid #005a8f2px solid #0069B4, Outline Offset 2pxGhost Button
transparent#0069B416px400Hind8px 16px50px1px solid transparentnone34px16px#F2F8FA, Border 1px solid #0069B4#E8F4FB2px solid #0069B4, Outline Offset 2pxStandard Card
#FFFFFF#33333332px8px1px solid #ABB8C30px 2px 8px rgba(0, 0, 0, 0.08)#0069B420px30pxFeatured Card (with Image)
#FFFFFF15px#33333324px0px0px 4px 12px rgba(0, 0, 0, 0.1)Service Section Container
#F2F8FA64px 48px0px#333333#0069B4400pxText Input
#FFFFFF1px solid #ABB8C34px12px 16px16pxHind400#33333324px2px solid #0069B4, Box Shadow 0px 0px 0px 3px rgba(0, 105, 180, 0.1)#515559#EEEAE41px solid #ABB8C3#515559Form Label
16px600#3333338pxHindError State
#CF2E2E0px 0px 0px 3px rgba(207, 46, 46, 0.1)#CF2E2E12pxHeader Navigation
#FFFFFF#33333316px400Hind0px53px24px#333333#0069B4#0069B42px solid #0069B4Dropdown Menu
#FFFFFF1px solid #ABB8C30px 4px 16px rgba(0, 0, 0, 0.12)4px8px 0px12px 16px#F2F8FA#0069B4Standard Link
#0069B416px400Hindnone1px solid transparent24px#005a8f, Border Bottom 1px solid #005a8f#0044752px solid #0069B4, Outline Offset 2pxSmall Link/Metadata Link
#0069B412px400Hind18pxnone#005a8f, Text Decoration underlineBase Unit: 4px
Scale with Contexts:
4px): Tight gaps between inline elements, component padding refinement12px): Padding within compact components, small gaps between related elements16px): Standard padding for inputs, buttons; minor section spacing20px): Medium gap between components within a section24px): Generous component spacing, padding for cards32px): Standard card padding, section content spacing36px): Large gaps between major content blocks48px): Section container padding, major content area padding52px): Hero section vertical spacing56px): Major section separation64px): Primary container padding, spacious content areas80px): Hero sections, full-width spacing between major layout divisionsMax Width: 1200px (content area); 100vw (full-width sections)
Column Strategy: 12-column grid at desktop, transitioning to 6 columns at tablet and single column on mobile
Section Patterns:
48px sides at desktop, 24px at tablet, 16px on mobile)Whitespace is treated as an active design element, not negative space. Generous margins and padding create visual hierarchy, aid content scanning, and reduce cognitive load. Sections breathe through consistent vertical rhythm—64px gaps between major content blocks establish predictability. Components float within ample padding rather than touching edges. This philosophy emphasizes content focus and professional restraint.
0px): Full-width hero sections, large container backgrounds4px): Form inputs, small overlay containers5px): Badges, small accent elements8px): Cards, standard containers, popovers50px): Call-to-action buttons, rounded navigation elements15px): Featured images, circular content containers| Level | Treatment | Use |
|---|---|---|
| Ground (0) | No shadow | Flat backgrounds, base surfaces |
| Raised (1) | 0px 2px 8px rgba(0, 0, 0, 0.08) | Standard cards, subtle lift |
| Floating (2) | 0px 4px 12px rgba(0, 0, 0, 0.1) | Interactive cards, featured content |
| Elevated (3) | 0px 6px 16px rgba(0, 0, 180, 0.25) | Hover states on primary buttons |
| Deep (4) | 0px 8px 24px rgba(0, 0, 0, 0.15) | Modal overlays, dropdowns |
Shadow Philosophy
Shadows are employed sparingly to suggest depth and layering without creating visual noise. The primary shadow application lifts cards and containers subtly from the background, reinforcing clickability and interactive hierarchy. Soft, diffused shadows (using rgba black with low opacity) maintain the clean aesthetic while establishing spatial relationships. Color-tinted shadows (using primary blue) are reserved for active interactive states, providing feedback without overwhelming the interface. All shadows employ soft blur radii (8–24px) to avoid harsh edges, maintaining the contemporary, approachable character of the brand.
#0069B4) for all primary CTAs and interactive elements — it is the definitive brand color and ensures consistent brand recognition.#333333 for all body text — the dark charcoal ensures optimal contrast and readability at 20px base size.0px 2px 8px rgba(0, 0, 0, 0.08)) — this subtle depth supports visual hierarchy.2px solid #0069B4 — ensure keyboard navigation accessibility throughout.12px 24px — minimum touch targets must remain accessible and visually proportionate.0px radius) on interactive elements — reserved only for full-width background containers.#515559 for secondary content — maintain sufficient contrast for readability.| Name | Width | Key Changes |
|---|---|---|
| Mobile | 0–479px | Single column, 16px padding, 40px headings, 12px gaps, stacked navigation |
| Tablet | 480–1023px | 2 columns (cards), 24px padding, 48px headings, 24px gaps, tablet navigation menu |
| Desktop | 1024px+ | 3 columns (cards), 48px padding, full horizontal navigation, 64px section spacing |
| Large Desktop | 1440px+ | Max content width 1200px centered, 80px section spacing, expanded whitespace |
12px 24px paddingNavigation: Desktop horizontal navigation (16px font, full-width) → Tablet condensed menu (14px, fewer visible items) → Mobile hamburger menu (icon-driven, 44px tap target)
Cards: 3-column grid (desktop: 1200px) → 2-column grid (tablet: 600px each) → 1-column stacked (mobile: full width minus padding)
Typography: H1 61px (desktop) → 48px (tablet) → 36px (mobile); H2 40px → 32px → 28px; H3 20px → 18px → 16px
Padding: Section padding 64px (desktop) → 48px (tablet) → 24px (mobile); card padding 32px → 24px → 20px
Whitespace: 80px section gaps (desktop) → 56px (tablet) → 36px (mobile); maintain visual rhythm consistency across breakpoints
Images: Featured images scale responsively while maintaining 15px border radius; aspect ratios preserved through container-based sizing
#0069B4)#FFFFFF)#FFFFFF)#0069B4)#0069B4)#333333)#0069B4)#333333)#515559)#0069B4)#123B74)#FFFFFF)#F2F8FA) or Light Beige (#EEEAE4)#FFFFFF)#ABB8C3)#FFC849)#CF2E2E)#00D084)Button Rule: All buttons use border-radius: 50px with Hind font, 16px size, 400 weight. Primary buttons are #0069B4 background with white text; secondary buttons are white background with #0069B4 text and 1px solid #0069B4 border. Hover states deepen the primary color or shift background on secondary. Minimum height is 42px with 12px 24px padding.
Typography Rule: Use Hind exclusively. H1 is 61px weight 300, H2 is 40px weight 300, H3 is 20px weight 600, body is 20px weight 400, links are 16px weight 400, metadata is 12px weight 400. Line heights scale proportionally (H1: 73.2px, H2: 48px, H3: 30px, body: 30px, link: 24px, metadata: 18px). Never mix weights; achieve hierarchy through size and weight combination only.
Spacing Rule: Base unit is 4px. Apply 64px padding to major section containers and 48px to standard card padding. Use 80px vertical gaps between major content sections at desktop, scaling to 56px at tablet and 36px at mobile. Maintain consistent 24px gaps between inline components. Never reduce padding below 12px on buttons or 16px on inputs.
Card Styling Rule: Standard cards have white background, 32px padding, border-radius: 8px, 1px solid #ABB8C3 border, and shadow 0px 2px 8px rgba(0, 0, 0, 0.08). Featured cards with images use 15px border radius on images. Scale card padding down to 24px on tablet and 20px on mobile. Headings within cards are always #0069B4.
Shadow Rule: Apply 0px 2px 8px rgba(0, 0, 0, 0.08) for standard card lift; 0px 4px 12px rgba(0, 0, 0, 0.1) for featured content; 0px 6px 16px rgba(0, 105, 180, 0.25) for primary button hover; 0px 8px 24px rgba(0, 0, 0, 0.15) for deep modals/dropdowns. Never apply harsh, high-opacity shadows; maintain soft, diffused blur radii (8–24px).
Responsive Rule: Desktop (1024px+) uses 3-column grids, 64px padding, 61px H1, 80px gaps. Tablet (480–1023px) shifts to 2 columns, 48px padding, 48px H1, 56px gaps. Mobile (0–479px) uses single column, 24px padding, 36px H1, 36px gaps. All navigation becomes hamburger menu on mobile. All typography scales proportionally but never violates the defined hierarchy sizes.
Color Contrast Rule: Body text is always #333333 (21:1 contrast on white). Secondary text is #515559 (7.5:1 contrast). Primary blue (#0069B4) on white maintains 7.3:1 contrast. Never use text colors with contrast ratios below 4.5:1. Ensure all interactive states provide sufficient color contrast and never rely on color alone to convey information.
Navigation Rule: Header navigation is 16px Hind regular weight, #333333 text on white background, 53px height. Links are undecorated by default; hover state adds #0069B4 color and bottom border. Active links are #0069B4 with 2px bottom border. Dropdowns have white background, soft shadow, 4px radius, and 8px internal padding with links at 12px/16px padding. Mobile navigation collapses to hamburger icon with 44px tap target.
Input & Form Rule: All text inputs have white background, 1px solid #ABB8C3 border, 4px border-radius, 12px vertical/16px horizontal padding, 16px Hind font. Focus state adds 2px primary blue border with 0px 0px 0px 3px rgba(0, 105, 180, 0.1) shadow. Labels are 16px Hind 600 weight, #333333 color. Error states use #CF2E2E border and helper text. Disabled state uses #EEEAE4 background with #515559 text.
Accessibility Rule: All interactive elements have visible 2px #0069B4 focus outlines with 2px offset. Touch targets minimum 44×44px, recommended 48×48px. Maintain minimum 8px spacing between adjacent interactive elements. Use semantic HTML; pair color changes with text/icon changes. Ensure all text meets WCAG AA contrast standards (4.5:1 minimum for body text, 3:1 for large text). Never remove focus indicators or rely solely on color for meaning.