# Squadeasy · Design system migration spec

> Source: https://www.squadeasy.com  ·  Curated by OpenDesign  ·  en

> This site effectively demonstrates how to create a warm, approachable brand personality through bold typography, dynamic photography, and vibrant color choices that break conventional corporate design patterns.

## 1. Identity DNA

The design language of Squadeasy functions like a community bulletin board, where vibrant, overlapping photographs and bold, encouraging messages create an immediate sense of human connection. This identity is built on warmth, dynamism, and approachability, rejecting sterile corporate aesthetics in favor of a lively, personal feel.

**One-liner:** A warm, vibrant employee engagement platform that uses dynamic photography and bold typography to foster connection.
**Keywords:** employee engagement · approachable · dynamic · connection · warm
**Analogy:** A friendly community bulletin board with vibrant, overlapping photos and bold, encouraging messages.

## 2. Color

The color system is anchored by a warm beige ground, establishing a human-centric foundation. Vibrant pink and neon yellow accents inject energy and direct attention, always set against high-contrast black for legibility and punch.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#E1C19E` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#666666` | secondary text |
| `--muted` | `#E1C19E` | placeholder |
| `--accent` | `#FF5A8F` | single accent |
| `--line` | `rgba(0,0,0,0.12)` | divider |

**Color principle:** Warm and vibrant palette emphasizing human connection and approachability.

The palette's core principle is to convey approachability and energy, ensuring every hue serves the goal of fostering connection.

## 3. Typography

Typographic voice is defined by extreme weight and declarative uppercase headlines that create urgency and excitement. Ultra-bold grotesque-sans for display contrasts with clean humanist-sans for body text, establishing a clear hierarchy that feels both powerful and friendly.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 900 | -2px | Hero headline |
| heading | 56px | 1.0 | 700 | -1px | Section headline |
| body | 16px | 1.3 | 400 | -0.25px | Paragraphs and UI text |

**Type rules:**
- Use uppercase for all major headlines
- Use extreme weight (900) for primary display text
- Tight letter spacing (-2px) for large headlines

## 4. Spacing

Generous padding and breathing room around large content blocks establish a rhythm that allows the dynamic photography and bold type to resonate without feeling cramped.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous padding (40px 24px 140px 24px) creates breathing room around large content blocks.

## 5. Surfaces

Surfaces are defined by soft, elevated shadows that give cards and overlapping elements a tangible, layered quality. Borders are reserved and functional, appearing as thin lines on active elements to define state without adding visual noise.

- **Radius:** sm 4px · md 14px · lg 100px · pill 100px
- **Shadows:**
  - rgba(0, 0, 0, 0.12) 0px 1.52px 8px 0px
- **Borders:** 1px solid black on active elements

## 6. Layout

The foundational layout skeleton is a full-width hero section defined by overlapping, rotated images and centered text. This organic structure intentionally breaks from rigid grids, allowing compositions to feel dynamic and spontaneous.

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

**Skeleton:** Full-width hero section with overlapping, rotated images and centered text

## 7. Motion & Interaction

Motion philosophy favors subtle, purposeful transformations that enhance the organic, lively character of the interface. Transform animations rotate images into place, while opacity fades reveal sections, creating a fluid, engaging narrative.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Transform animations for image rotations (0.2s)
  - Opacity fades for section reveals (0.4s - 0.8s)

- **Hover:** Scale transform on interactive elements
- **Click:** Immediate visual feedback
- **Transition:** All properties transitioned (all 0.2s)
- **Keyboard:** Visible focus states on interactive elements

## 8. Voice & Don'ts

The editorial voice is enthusiastic, encouraging, and fundamentally human-centric, matching the warmth of the visual system. Headlines are bold, uppercase declarations, and CTAs are clear, action-oriented commands, often paired with directional cues.

- **Tone:** Enthusiastic, encouraging, and human-centric
- **Headline style:** Bold, uppercase declarations that create urgency and excitement
- **CTA style:** Clear, action-oriented (DEMANDER UNE DÉMO) with directional arrows
- **Avoid:** Corporate jargon / Passive voice / Small, timid typography

### Don'ts
- ❌ Don't use a cold, corporate color palette — screenshot shows warm, human-centric colors instead
- ❌ Don't use thin, lightweight typography — screenshot shows ultra-bold, high-impact fonts
- ❌ Don't create rigid, grid-locked layouts — screenshot shows organic, overlapping, rotated images
- ❌ Don't use small, cramped spacing — screenshot shows generous padding and breathing room
- ❌ Don't use subtle, muted buttons — screenshot shows high-contrast, pill-shaped CTAs with neon accents
- ❌ Don't avoid photography — screenshot uses multiple dynamic, human-focused photos throughout

The system deliberately avoids corporate jargon, passive voice, and any visual element—like thin typography or muted buttons—that would undermine its energetic, human-scale personality.

## System Prompt (paste into AI tool)

```
A warm, vibrant employee engagement platform that uses dynamic photography and bold typography to foster connection. Key colors include warm beige (#E1C19E) backgrounds, black (#000000) typography, vibrant pink (#FF5A8F) accents, and neon yellow (#E4FF60) highlights. Typography features ultra-bold grotesque-sans for display text with tight letter spacing, and clean humanist-sans for body content. Critical design rules: embrace overlapping, rotated images for organic energy; use extreme typographic weight for maximum impact; maintain generous spacing and breathing room; avoid cold corporate aesthetics, thin fonts, rigid grid layouts, small cramped spacing, subtle buttons, and avoid human photography. The system emphasizes enthusiastic, encouraging communication with action-oriented CTAs.
```