---
version: "alpha"
name: "Geekworkers Design System"
description: "Official visual identity, design tokens, and component specifications of Geekworkers Sàrl (Lausanne, Switzerland)."
colors:
  primary: "#19389F"
  on-primary: "#FFFFFF"
  secondary: "#122B7A"
  on-secondary: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#1A202C"
  neutral: "#F6F8FF"
  on-neutral: "#2D3748"
  border: "#D8E2FF"
  dark-surface: "#000000"
  on-dark-surface: "#FFFFFF"
  accent: "#D90562"
  on-accent: "#FFFFFF"
typography:
  h1:
    fontFamily: "Nunito"
    fontSize: "2.5rem"
    fontWeight: "900"
    lineHeight: "1.1"
  h2:
    fontFamily: "Nunito"
    fontSize: "2rem"
    fontWeight: "800"
    lineHeight: "1.1"
  h3:
    fontFamily: "Nunito"
    fontSize: "1.5rem"
    fontWeight: "800"
    lineHeight: "1.1"
  body-md:
    fontFamily: "Nunito"
    fontSize: "1rem"
    fontWeight: "600"
    lineHeight: "1.1"
  label-caps:
    fontFamily: "Nunito"
    fontSize: "0.75rem"
    fontWeight: "800"
    lineHeight: "1.1"
  code:
    fontFamily: "JetBrains Mono"
    fontSize: "0.875rem"
    fontWeight: "600"
    lineHeight: "1.2"
rounded:
  sm: "6px"
  md: "12px"
  lg: "16px"
  full: "9999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
    padding: "12px 24px"
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    rounded: "{rounded.md}"
    padding: "12px 24px"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: "12px 24px"
  button-secondary-hover:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: "12px 24px"
  button-dark-cta:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: "12px 24px"
  button-dark-cta-hover:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: "12px 24px"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    padding: "24px"
  badge-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    rounded: "{rounded.full}"
    padding: "4px 12px"
  tag-category:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: "6px 14px"
  dark-card:
    backgroundColor: "{colors.dark-surface}"
    textColor: "{colors.on-dark-surface}"
    rounded: "{rounded.lg}"
    padding: "24px"
---

## Overview

Architectural Engineering meets Swiss Precision. The Geekworkers design system blends bold Swiss typographic structure with modern decoupled cloud engineering.

Geekworkers Sàrl is a premier web engineering and growth agency based in Lausanne, Switzerland, partnering with SMEs and entrepreneurs across the French-speaking Swiss market (Suisse Romande).

## Colors

The palette is structured around high-contrast trust anchors, a crisp canvas foundation, and high-impact functional signals.

- **Primary (#19389F) :** Master Blue : The invariant anchor of the brand. Applied systematically to all titles (H1, H2, H3), all call-to-action (CTA) buttons on light backgrounds, and light-theme logos. Contrast ratio on white: 8.68:1 (exceeds WCAG AAA).
- **Secondary (#122B7A) :** Hover Deep Blue : The exclusive interaction hover state for all Master Blue buttons, interactive cards, and primary text links.
- **Surface (#FFFFFF) :** Pure White : The dominant surface for all content cards, modules, modals, and secondary buttons.
- **Neutral (#F6F8FF) :** Surface Light Canvas : Soft, low-strain background tint providing subtle structural contrast behind pure white cards without glare.
- **Dark Surface (#000000) :** Pure Black : Dense contrast for dark mode sections, high-impact footers, and inverted Hero displays.
- **Accent (#D90562) :** Vibrant Magenta : Highly targeted micro-accents: status indicators, live pulsing badges, key metrics. NEVER used for action buttons.
- **Border (#D8E2FF) :** Subtle Border : Delicate perimeter delineation for white cards and container separation.

## Typography

Universal typographic harmony built exclusively on Google Fonts Nunito with JetBrains Mono for code.

- **Headings (H1, H2, H3) :** Nunito, 800 (Extra-Bold) / 900 (Black), strictly colored in Master Blue (`#19389F`) on light backgrounds, with line-height firmly locked at 1.1.
- **Body & Editorial :** Nunito, 600 (Semi-Bold) default across all platforms, ensuring high legibility and solid typographic presence, with line-height at 1.1.
- **Code & Technical :** JetBrains Mono (400 / 600) with line-height 1.2 for API schemas, tokens, and code snippets.

## Layout

- **Container :** Max-width 1280px (`max-w-7xl`) centered with responsive 16px to 32px gutters.
- **Grid :** 12-column flexible grid system with 24px gutters.
- **Spacing Scale :** Strict 4px/8px modular rhythm (xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 32px, 2xl: 48px, 3xl: 64px).

## Elevation & Depth

Subtle, clean elevation mimicking modern physical stationery without heavy drop shadows.

- **Card Shadow :** `0 4px 20px -2px rgba(25, 56, 159, 0.06), 0 2px 6px -1px rgba(0, 0, 0, 0.04)`
- **Hover Card Shadow :** `0 12px 30px -4px rgba(25, 56, 159, 0.12), 0 4px 10px -2px rgba(0, 0, 0, 0.06)`
- **Button Shadow :** `0 2px 8px 0 rgba(25, 56, 159, 0.20)`

## Shapes

- **Small Radius (6px) :** Tags, chips, input fields, and inline badges.
- **Medium Radius (12px) :** Buttons, interactive cards, dropdown menus, and alerts.
- **Large Radius (16px) :** Content containers, preview mockups, and dialog modals.
- **Full Radius (9999px) :** Pills, status indicators, and avatar circles.

## Components

### Buttons & Action Hierarchy
1. **Rule 1 : Text & Icon Harmony :** The SVG icon inside a button is ALWAYS the exact same color as the button text (white text = white icon; blue text = blue icon).
2. **Rule 2 : Borderless with Shadow :** All buttons feature a subtle shadow (`shadow-md`) and are STRICTLY BORDERLESS (`border-0`).
3. **Rule 3 : Dark Mode Inversion :**
   - *Light Background :* Primary CTA = Master Blue (`#19389F`), Secondary = Pure White (`#FFFFFF`).
   - *Dark Background :* Primary CTA = Pure White (`#FFFFFF`), Secondary = Master Blue (`#19389F`).

## Do's and Don'ts

### Do
- Always render H1, H2, and H3 headings in Master Blue (`#19389F`) on light canvas backgrounds.
- Keep line-height locked at 1.1 across all headings and editorial copy.
- Use Nunito 600 as the baseline weight for body text.
- Pair Primary CTA and Secondary buttons side-by-side with identical borderless shadow styling.
- Provide direct copy buttons for color hex tokens and design specifications.

### Don't
- Never use Vibrant Magenta (`#D90562`) as a background color for action buttons.
- Never add borders (`border: 1px solid ...`) to buttons.
- Never use em-dashes (—) in French text; use colons (:), commas, or short dashes (-).
- Never mix different font families for headings; maintain full Nunito cohesion.