# Glob Land · Design system migration spec

> Source: https://glob.land  ·  Curated by OpenDesign  ·  en

> This site is worth including as a prime example of a premium, accessible e-commerce interface that balances refined aesthetics with strong functional utility.

## 1. Identity DNA

Glob Land's design system is constructed like a premium design journal, presenting its components with editorial clarity and restraint. Its identity is built on a foundation of **functional accessibility** and material focus, delivering a refined e-commerce experience where the interface itself recedes to let the products take center stage.

**One-liner:** A refined e-commerce experience for lifestyle products with a strong emphasis on accessibility.
**Keywords:** Premium · Functional · Accessible · Material-focused · Clean
**Analogy:** A premium design journal showcasing high-quality material goods.

## 2. Color

The color system operates with the discipline of a monochromatic print publication, relying on a precise spectrum of whites and cool greys to establish space and hierarchy. A single, bold purple serves as a functional signal, marking interactive elements with purpose.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#EFF1F7` | card background |
| `--bg-quiet` | `#F8F9FC` | quiet area |
| `--ink` | `#212121` | body text |
| `--ink-soft` | `#474747` | secondary text |
| `--muted` | `#69727B` | placeholder |
| `--accent` | `#574CD5` | single accent |
| `--line` | `rgba(71, 71, 71, 0.1)` | divider |

**Color principle:** A predominantly monochrome palette with crisp whites and cool greys, using a single bold purple for functional UI elements.

The core principle is restraint; color is used to direct action, not to decorate.

## 3. Typography

Typography employs a clean, humanist sans-serif to maintain a voice that is both professional and accessible. The scale is tight and functional, with clear distinctions for page titles, navigation, body copy, and supporting metadata.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 32px | 1.2 | 500 | -0.5px | Page titles and error messages |
| heading | 18px | 1.3 | 600 | 0px | Section headings and navigation |
| body | 16px | 1.2 | 400 | 0px | Primary body text and links |
| small | 14px | 1.3 | 400 | 0px | Supporting text and footer links |
| tiny | 12px | 1.2 | 400 | 0px | Labels and metadata |

## 4. Spacing

Every element breathes within a consistent 4px base grid, establishing a predictable rhythm for padding, margin, and structural alignment.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 10 / 12 / 15 / 20 / 24 / 25 / 50 px
- **Rhythm:** A consistent 4px base grid is used for all spacing, padding, and layout structures.

## 5. Surfaces

Depth is suggested, not declared, through minimal surface treatments. Shadows are whisper-quiet at low opacity, and borders are defined by a delicate, translucent rule.

- **Radius:** sm 4px · md 8px · lg 9999px · pill 9999px
- **Shadows:**
  - shadow-sm: 0 0 5px 0 rgba(25, 27, 30, 0.03)
  - shadow-lg: 0 4px 40px 0 rgba(25, 27, 30, 0.2)
- **Borders:** 1px solid rgba(71, 71, 71, 0.1)

## 6. Layout

The layout skeleton is built on a standard 12-column grid, offering a spacious framework that prioritizes content hierarchy. Ample white space is the primary organizing principle, creating a gallery-like environment for product presentation.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A spacious, clean layout with ample white space, prioritizing readability and clear content hierarchy.

## 7. Motion & Interaction

Motion is employed with surgical precision, using fades and smooth cubic-bezier transitions to guide focus without fanfare. The philosophy is one of feedback and state change, not spectacle.

- **Durations:** micro 250ms · small 500ms · medium 1000ms
- **Easing:** `cubic-bezier(0.215, 0.61, 0.355, 1)`
- **Patterns:**
  - Fade-in and fade-out for UI elements
  - Smooth transitions for state changes
  - Subtle movement for interactive feedback

- **Hover:** Subtle changes in border color or background opacity, maintaining a refined feel.
- **Click:** Immediate visual feedback with slight scale or opacity shifts, followed by a transition back to the base state.
- **Transition:** Smooth, fast transitions using cubic-bezier easing for a polished feel.
- **Keyboard:** Visible focus states, primarily indicated by border or outline changes, supporting full keyboard navigation.

## 8. Voice & Don'ts

The editorial voice is consistently friendly, helpful, and professional, using direct headlines and concise calls-to-action. Language avoids technical jargon, aggressive promotion, and ambiguous phrasing in favor of clarity.

- **Tone:** Friendly, helpful, and professional.
- **Headline style:** Direct, clear, and often uses a mix of standard and bold weights for emphasis.
- **CTA style:** Action-oriented and concise, often using uppercase text in pill-shaped buttons.
- **Avoid:** Overly technical jargon / Aggressive or loud marketing language / Vague or ambiguous phrasing

### Don'ts
- ❌ Don't use heavy drop shadows — the screenshot shows very subtle, low-opacity shadows for depth.
- ❌ Don't apply bright, clashing colors — the palette is restrained to whites, greys, and a single purple accent.
- ❌ Don't use overly decorative fonts — the typography is clean, functional, and highly readable.
- ❌ Don't clutter the layout with excessive elements — the design uses ample white space and a clear hierarchy.
- ❌ Don't use sharp, aggressive corners — the design favors soft, rounded corners (5px to 8px) or fully rounded pills.
- ❌ Don't ignore accessibility — the interface includes a dedicated, comprehensive accessibility options panel.

The system deliberately avoids decorative fonts, clashing colors, and heavy drop shadows, defining its identity as much by what it omits as by what it includes.

## System Prompt (paste into AI tool)

```
A refined, accessible e-commerce site for premium lifestyle products. Key colors are crisp white (#FFFFFF), deep ink (#212121), and a functional purple accent (#574CD5). Typography is humanist-sans (Neue Haas Unica) at a 16px base with a tight 1.2 line height. The layout is spacious, using a 4px base grid and subtle shadows. Critical donts: don't use heavy drop shadows, don't apply clashing colors, and don't clutter the layout. This system is designed for clarity, refinement, and inclusive access.
```