Gandi Design System Deep Dive

1. Brand Overview

Gandi’s visual language is rooted in tech credibility with a sharp, slightly intellectual tone. They’re not playing the “friendly startup” card — this is serious infrastructure with a human touch. You feel it the moment you hit the homepage: deep navy primaries, refined typography, and a lot of breathing space. This isn’t a brand screaming for attention; it’s a brand that knows its audience — domain buyers, hosting customers, and technical users who value clarity over noise.

The choice of Fraunces for headings is telling. It’s a serif with personality, a touch more editorial than your typical tech sans. That choice says: “We’re not just another registrar. We have authority.” For UI and body copy, they switch to Inter, a workhorse sans that keeps things legible at all sizes and weights. This dual-type approach balances sophistication with usability.

Color-wise, the palette leans heavy into deep blues and purples, with occasional warm accents. The primary (#0d0b30) is almost black, but with a violet undertone — it feels stable, secure, and subtly premium. Accent colors like #6640fe and #feb49f offer moments of contrast without breaking the overall mood.

The spacing system is disciplined — an 8px base grid, with occasional 4px sub-steps. This makes the UI modular and predictable. Breakpoints start at 1024px, which is a desktop-first mindset, but still responsive.

Component styling is restrained. Buttons have minimal shadows, links change color instead of over-decorating, and forms have clear focus states. When they use shadows, they’re soft and functional, not decorative. Border radii vary significantly — from tight 3px corners on inputs to big 160px pills — but they’re deliberate per component.

If you’re building with Gandi’s system, the philosophy is simple: keep it clean, keep it confident, and don’t dilute the brand’s deep color and type hierarchy. Everything feels intentional.

2. Color System

2.1 Primary Colors

The main brand color is Primary Navy (#0d0b30, rgb(13, 11, 48)). It’s dark, bordering on black, but with just enough saturation to avoid feeling flat. Psychologically, this color signals trust, seriousness, and technical competence — perfect for a brand in domain registration and hosting.

In the competitive landscape, a lot of registrars lean on bright blues (#0073e6 style) or reds. Gandi’s deep navy stands out as more premium and less transactional. It’s closer to a fintech or enterprise SaaS palette, which supports their positioning as a reliable infrastructure provider.

The secondary semantic color is transparent (rgba(0, 0, 0, 0)), essentially a non-color used for overlays or invisible elements.

2.2 Complete Palette

2.3 Color Relationships

The palette is high-contrast. White text on #0d0b30 easily exceeds WCAG AA and AAA standards for normal and large text. Accent purples (#6640fe) against white also pass comfortably.

Accessibility-wise, the only caution is warm peach (#feb49f) against white — that’s lower contrast and should be used for decoration, not critical text.

Dark mode isn’t explicitly implemented here, but the palette is already “dark mode friendly” — most surfaces are dark, with light text.

2.4 Usage Guide

• Workhorse combo: #0d0b30 background + #ffffff text. This is the brand’s default.
• Accent moments: Drop #6640fe into CTAs, link hovers, or section dividers.
• Warm highlights: Use #feb49f for non-critical callouts (featured articles, badges).
• Avoid: Putting peach or light lavender on white for text — too low contrast.
• Hover states: Keep to the purple family for visual consistency. Multiple indigo variants exist for nuanced hover/focus.

3. Typography

3.1 Font Families

• Fraunces — primary display font. No fallbacks specified. Used for headings and certain links.
• Inter — primary UI and body font. Falls back to system-ui. Used for buttons, captions, links, and body copy.
• Verdana — appears in captions. Fallback to Geneva.

No Google Fonts or Adobe Fonts sources detected in the data — likely self-hosted or loaded via other means.

3.2 Type Scale

3.3 Hierarchy

Fraunces sizes at 42px and 36px carry the hero and section headings. Drop to 24px and 20px for subheads. Inter fills in body at 16px and 14px, with captions at 12px. Weight shifts (400 vs 700) create a clear distinction between emphasis and body.

The combination keeps headings distinct even when sizes overlap — Fraunces’ serif form is unmistakable against Inter’s clean sans.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px — with common multiples and some in-between values.

4.2 Layout

Breakpoint at 1024px — desktop-first grid. No explicit container widths in the data, but spacing values suggest generous margins on desktop and tighter padding on mobile.

5. Visual Elements

• Border Radius: Highly variable. Small (3px, 4px) for inputs and nav. Large (25px, 40px) for buttons, cards. Massive (160px) for pill-shaped elements.
• Shadows: Two patterns:
  • Soft ambient: rgba(0, 0, 0, 0.05) 0px 4px 6px -2px, rgba(0, 0, 0, 0.1) 0px 12px 16px -4px
  • Brand-colored: rgba(12, 12, 48, 0.12) 0px 1px 3px, rgba(12, 12, 48, 0.24) 0px 1px 2px
• Borders: 1px solid variants in white, navy, gray. Used sparingly.

6. Components

6.1 Buttons

Search Bar Button (.search-bar__button):

• Default: bg #020202, white text, padding 1px 6px, radius 3px.
• Hover: White background, navy text (#0d0b30).
• Active: White background, navy text, opacity: 0.8, rotates -90deg.
• Focus: White background, navy text, box-shadow: #c2b3ff 0 0 0 3px.

Text-with-button White Variant:

• Default: White background, navy text, no padding, radius 0.
• Hover: #6640fe background, scaleX(1.02), near-black text.
• Active: Same as hover with purple text and orange outline (#fc440f).
• Focus: Orange outline.

6.2 Links

Multiple styles:

• Black text, underline. Hover to yellow (#fffd77).
• Navy text, underline. Hover to yellow.
• Dark gray text, no underline, weight 600. Hover to yellow.
• White text, underline. Hover to yellow.
• Purple text, no underline. Hover to yellow.

6.3 Forms

Text input:

• Default: White bg, black text, 1px solid #d3d3d3, radius 8px, padding 1px 72px 1px 12px.
• Focus: Blue outline (#3b99fc), border #158e8e.

Email input:

• Default: White bg, navy text, 1px solid rgba navy, radius 3px, padding 10px 20px 14px.
• Focus: Same blue outline/border as text input.

6.4 Cards

Cards use 1px solid white or navy borders, small radii (0px 15px 0px 0px). Occasional shadows.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-primary-navy: #0d0b30;
  --color-black: #000000;
  --color-bright-purple: #6640fe;
  --color-deep-midnight: #060614;
  --color-rich-purple: #533be2;
  --color-warm-peach: #feb49f;
  --color-dark-gray: #212121;
  --color-indigo: #5838de;
  --color-off-white: #f8f5ff;
  --color-lavender: #e0d9ff;
  --color-indigo-var1: #5838dd;
  --color-indigo-var2: #5737dc;
  --color-purple-glow1: #5c3ae6;
  --color-purple-glow2: #5c3ae7;
  --color-purple-glow3: #5b3ae6;
  --color-purple-glow4: #5d3ae8;
  --color-indigo-var3: #5837dd;

  /* Typography */
  --font-fraunces: 'Fraunces';
  --font-inter: 'Inter', system-ui;
  --font-verdana: 'Verdana', Geneva;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-60: 60px;
  --space-80: 80px;
  --space-120: 120px;

  /* Radius */
  --radius-0: 0px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-25: 25px;
  --radius-40: 40px;
  --radius-160: 160px;

  /* Shadows */
  --shadow-soft: rgba(0,0,0,0.05) 0px 4px 6px -2px, rgba(0,0,0,0.1) 0px 12px 16px -4px;
  --shadow-brand: rgba(12,12,48,0.12) 0px 1px 3px 0px, rgba(12,12,48,0.24) 0px 1px 2px 0px;
}

8. AI Coding Assistant Prompt

# Gandi Design System Specification

You are a Gandi design expert. Build UIs matching their visual language exactly.

## Brand Context
Gandi’s design language is serious, confident, and premium. It uses deep navy and purple accents, refined serif headings, and disciplined spacing. The audience is technical and expects clarity without gimmicks.

## Color Palette
- White: #ffffff — Background, text
- Primary Navy: #0d0b30 — Brand background, buttons, links
- Black: #000000 — Body text, accents
- Bright Purple: #6640fe — Accent buttons, hover states
- Deep Midnight: #060614 — Dark surfaces
- Rich Purple: #533be2 — Accent text
- Warm Peach: #feb49f — Featured news highlights
- Dark Gray: #212121 — Neutral text/background
- Indigo: #5838de — Hover/focus accents
- Off-White: #f8f5ff — Hover backgrounds
- Lavender: #e0d9ff — Hover/focus background
- Indigo Var1: #5838dd — Hover/focus states
- Indigo Var2: #5737dc — Hover/focus states
- Purple Glow1: #5c3ae6 — Hover/focus states
- Purple Glow2: #5c3ae7 — Hover/focus states
- Purple Glow3: #5b3ae6 — Hover/focus states
- Purple Glow4: #5d3ae8 — Hover/focus states
- Indigo Var3: #5837dd — Hover/focus states

## Typography
- Headings: 'Fraunces'
- Body/UI: 'Inter', system-ui
- Captions: 'Inter' or 'Verdana', Geneva

| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| H1    | Fraunces | 42px | 700 | 1.19 | Hero titles |
| H2    | Fraunces | 36px | 700 | 1.22 | Section titles |
| H3    | Fraunces | 24px | 700 | 1.33 | Subsections |
| Body L| Inter | 16px | 400 | 1.50 | Main text |
| Body S| Inter | 14px | 400 | 1.57 | Secondary text |
| Caption| Inter | 12px | 600 | 1.67 | Labels |

## Spacing & Grid
Base: 8px grid
Scale: 4px, 5px, 6px, 7px, 8px, 10px, 12px, 14px, 16px, 20px, 22px, 24px, 32px, 40px, 48px, 60px, 80px, 120px
Use multiples for padding/margins.

## Border Radius
- none: 0px — sharp cards
- sm: 3px — inputs
- md: 4px — small buttons
- lg: 25px — rounded blocks
- xl: 40px — large buttons/cards
- pill: 160px — pill shapes

## Shadows & Depth
- Soft: rgba(0,0,0,0.05) 0px 4px 6px -2px, rgba(0,0,0,0.1) 0px 12px 16px -4px
- Brand: rgba(12,12,48,0.12) 0px 1px 3px, rgba(12,12,48,0.24) 0px 1px 2px

## Components

### Primary Button
```css
.btn-primary {
  background: #020202;
  color: #ffffff;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 400;
  font-size: 16px;
  border: none;
}
.btn-primary:hover { background: #ffffff; color: #0d0b30; }
.btn-primary:focus { background: #ffffff; color: #0d0b30; box-shadow: #c2b3ff 0 0 0 3px; }
.btn-primary:active { background: #f9f9f9; color: #0d0b30; opacity: 0.8; transform: rotate(-90deg); }
```

### Secondary Button (White Variant)
```css
.btn-secondary {
  background: #ffffff;
  color: #0d0b30;
  font-size: 16px;
  border-radius: 0;
}
.btn-secondary:hover { background: #6640fe; color: #010104; transform: scaleX(1.02); }
.btn-secondary:focus { outline: 4px solid #fc440f; }
.btn-secondary:active { background: #6640fe; color: #533be2; outline: 4px solid #fc440f; }
```

### Input Field
```css
.input {
  background: #ffffff;
  color: #000000;
  border: 1px solid #d3d3d3;
  border-radius: 8px;
  padding: 1px 72px 1px 12px;
}
.input:focus {
  outline: 5px auto #3b99fc;
  border-color: #158e8e;
  box-shadow: #3b99fc 0 0 0 1px, #3b99fc 0 0 8px;
}
```

### Card
```css
.card {
  border: 1px solid #ffffff;
  border-radius: 0px 15px 0px 0px;
  padding: 16px;
}
```

## Layout & Responsive Rules
- Breakpoint: 1024px
- Desktop-first design
- Section spacing: 32px–40px

## Interaction Rules
- Use color shifts on hover
- Focus indicators must be visible (outline or box-shadow)
- State changes with ~150ms ease transitions

## DO
- Use only palette colors
- Maintain 8px grid
- Keep headings in Fraunces, body in Inter
- Use large radii for pills/CTAs consistently
- Keep hover states in purple family

## DON'T
- Invent new colors
- Mix serif and sans in same heading
- Use low-contrast text colors
- Apply shadows outside defined patterns

## Code Examples

Primary Button:
```css
<button class="btn-primary">Search</button>
```

Secondary Button:
```css
<button class="btn-secondary">Learn More</button>
```

Input:
```css
<input type="text" class="input" placeholder="Enter domain">
```

9. Summary

TL;DR — Gandi’s system is deep navy + editorial serif + disciplined spacing. It’s premium tech, not startup playful. If you stick to their grid, color rules, and type hierarchy, your UI will feel on-brand.

Brand Keywords: premium-tech, deep-navy, editorial-serious, grid-disciplined, purple-accent