Official Brand & Design System Reference Guide

Geekworkers Sàrl

Your Web & Marketing Agency in Lausanne

More than 25 dedicated experts combining creativity and Swiss engineering rigor to design high-performance digital solutions and maximize the return on investment for SMEs and entrepreneurs in French-speaking Switzerland.

+7 Years Activity & Excellence
+25 Experts Developers, Designers, SEO & AI
+500 Projects SMEs & Companies in French-speaking Switzerland
+12 million CHF Generated for Our Clients
DESIGN specification.md
01

Structured Color Palette

Invariable fundamental colors defining the visual universe and hierarchy of action of Geekworkers.

Main Color

Master Blue

Unchanging Master Color

Systematic color of ALL titles (H1, H2, H3) and ALL action buttons (CTA) on a light background.

Exclusive Overview

Hover Deep Blue

Exclusive Overflight Status

Unique hover substitute exclusive to all Master Blue buttons and links.

Page Background

Surface Light Canvas

Page Background & Soft Contrast

The overall soft nuance of the HTML page background structures the white cards without being dazzling.

Dark Mode

Pure Black

Dark Mode & Dense Backgrounds

Dense dark backgrounds, contrasting sections and high-impact typography.

Micro-Accents

Magenta Accent

Micro-Pulses & Key Figures

Warning lights, micro-pulses, key figures. NEVER for pimples.

Delimitation

Subtle Border

Fine Delineation of Maps

Fine delineation of white cards and highlighting dots.

02

Action Button Hierarchy

Fundamental rules: strict text-icon harmony, buttons with light shadows and STRICTLY BORDERLESS.

On a Light Background (Canvas #F6F8FF or Carte Blanche)

Main button in Master Blue with pure white text, secondary button in white with Master Blue text.

Dark Mode (Dark Hero)

Contrast inversion: Main button in pure white with Master Blue text, secondary button in Master Blue with white text.

03

Typography: Full Nunito & 1.1 line spacing

A single Google Fonts Nunito font for all titles and texts with JetBrains Mono for technical data.

H1 - Major Title Nunito 900 (Black) | Color: #19389F | Line-height: 1.1

Your Web & Marketing Agency in Lausanne

H2 - Section Title Nunito 800 (Extra-Bold) | Color: #19389F | Line-height: 1.1

Partner for the Growth of SMEs in French-speaking Switzerland

Standard Body Text Nunito 600 (Semi-Bold) | Color: #2D3748 | Line-height: 1.1

More than 25 in-house experts based in Lausanne combine creativity and technical mastery to design high-performance, scalable and ROI-oriented web platforms.

Code & Metadata JetBrains Mono 600 | Color: #19389F | Line-height: 1.2
const geekworkersBrand = { primaryColor: '#19389F', typography: 'Nunito', lineHeight: 1.1 };
04

Directory of the 12 Official Vector Assets (SVGs)

Pure vector files ready for web, print, social media and application interfaces.

☀️ Light Background

Main Logotype (Blue #19389F)

Official default vector format on a white or light background.

☀️ Light Background

Blue Logotype (Web Agency Mention)

Official variant with subtitle 'Web Agency'.

☀️ Light Background

Blue logo (Mention Web Agency & Switzerland)

Official version with Swiss cross and agency mention.

☀️ Light Background

Round Blue Icon (Avatar & Favicon)

Official monogram on a blue circle, ideal for profiles and applications.

☀️ Light Background

Blue Square Icon (Pure Blue Square)

Blue square symbol for software applications and interfaces.

☀️ Light Background

Blue Square Icon with Swiss Flag

Official symbol with Swiss emblem for proximity certification.

🌙 Dark Background

Pure White Logotype (Without Mention)

White vector format for high contrast on dark backgrounds.

🌙 Dark Background

White logo (Web Agency mention)

White variant with 'Web Agency' mention for dark mode.

🌙 Dark Background

White logo (Mention Web Agency & Switzerland)

White variant with full subtitles and Swiss flag.

🌙 Dark Background

White Round Icon (icone-white-gw.svg)

White circular icon for dark headers and contrasting banners.

🌙 Dark Background

White Square Icon (White Background)

Square icon with a white background for integration in dark mode.

🌙 Dark Background

White Square Icon with Swiss Flag

Contrasting square symbol with Swiss flag for dark environments.

05

Design Tokens for Developers & AI Agents (@google/design.md)

Standardized design tokens compatible with Tailwind CSS v3/v4, W3C DTCG and consumable by code agents.

Official specification @google/design.md (Alpha version)
--- version: "alpha" name: "Geekworkers Design System" colors: primary: "#19389F" on-primary: "#FFFFF" secondary: "#122B7A" on-secondary: "#FFFFFF" surface: "#FFFFFF" neutral: "#F6F8FF" dark-surface: "#000000" accent: "#D90562" border: "#D8E2FF" typography: headings: fontFamily: "Nunito" fontWeight: "800" lineHeight: "1.1" color: "#19389F" body: fontFamily: "Nunito" fontWeight: "600" lineHeight: "1.1" ---
Configuration for tailwind.config.js
module.exports = { theme: { extends: { colors: { gw: { blue: '#19389F', hoverDeep: '#122B7A', white: '#FFFFFF', surface: '#F6F8FF', black: '#000000', magenta: '#D90562', border: '#D8E2FF' } }, fontFamily: { sans: ['Nunito', 'sans-serif'], heading: ['Nunito', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] }, lineHeight: { tight: '1.1', brand: '1.1' } } } }
Tailwind CSS Theme v4 (@theme)
@theme {
  --color-gw-blue: #19389F;
  --color-gw-hover: #122B7A;
  --color-gw-surface: #F6F8FF;
  --color-gw-magenta: #D90562;
  --color-gw-border: #D8E2FF;
  --font-sans: 'Nunito', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --leading-brand: 1.1;
}
Schema.org Organization Semantic Tag
<script type="application/ld+json" id="geekworkers-brand-tokens">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "Geekworkers Sàrl",
  "url": "https://geekworkers.ch",
  "logo": "https://geekworkers.ch/assets/gw-logo-original-blue-default.svg",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Lausanne",
    "addressRegion": "Vaud",
    "addressCountry": "CH"
  }
}
</script>
06

4 Geekworkers Business Expertise Centers

Our integrated engineering and digital marketing departments are at your service to support your growth.

01. Website & E-commerce

Creation of WordPress websites & WooCommerce stores designed to convert visitors.

  • Native WordPress & Gutenberg
  • WooCommerce Stores
  • Redesign & Maintenance Pro
02. SEO & SEA Marketing

Profitable acquisition strategies (Google Ads, Meta, SEO) with 0.00% media commission.

  • Google Ads (Search/PMax)
  • Social Ads Meta & LinkedIn
  • Swiss & Local SEO
03. Custom & Mobile Development

Custom software engineering: modern web and mobile applications using Flutter iOS/Android.

  • React, Next.js, Laravel, Node
  • Flutter Mobile Applications
  • Dedicated Management & Outsourcing
04. Audit, ERP & AI

Performance audit, CRM/ERP connection and process automation by AI.

  • 360° Digital Audit & Performance
  • Enterprise CRM & ERP Integration
  • AI Agent & RAG Deployment
07

Official Taxonomy & Semantic Tags (Site & AI)

Complete taxonomy synchronized with Custom Post Types and categories of the Geekworkers ecosystem.

Location: French-speaking Switzerland
LausanneVaudGenevaWallisFreiburgNeuchâtelFrench-speaking SwitzerlandSwissSMEs in French-speaking SwitzerlandSwiss Entrepreneurs
Agency Typology (typical agency)
web agencyDigital AgencyE-Commerce AgencyMarketing AgencyWeb Development AgencySME Growth Partner
Areas of Expertise & Technologies (technology category)
Automation & AICreation of website & e-commerceWeb & Mobile application developmentGraphics & WebdesignSEO & Google AdsCreation of Media Content & Social NetworksWordPressWooCommerceElementorLaravelreactNext.jsFlutterGoogle Analytics 4
Products & Offers (products)
Creation of a websiteGoogle AdsWordPress MaintenanceMeta AdsStart OffersSEODigital Audit
Business sectors in French-speaking Switzerland (sectors)
Real estateTrusteeFinanceHealthLegalCraftsmanshipTradeRestorationHospitalityTrainingTechnologyTransportationIndustryAssociationEnvironmentEventsSportTherapyWell-being
Certifications & Key Figures
Google Ads Certified PartnerMeta Business PartnerInfomaniak Official Partner+25 In-house Experts+300 Clients Assisted+7 Years in Business+12 Million CHF Generated