---
title: "SquadEasy design system"
variant: extended
source: https://www.squadeasy.com/
captured_at: 2026-10-12
theme: light
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/squadeasy-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# SquadEasy · Design System

> People-first energy in bold, playful blocks.

**Theme:** light · **Industry:** saas · **Source:** https://www.squadeasy.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

SquadEasy pairs oversized, uppercase typography with candid employee photography and vivid blocks of colour. Expansive white sections give the playful visuals room to breathe while keeping the page focused on team engagement.

## North star

Let oversized black type and candid employee imagery lead, using bright colour blocks as punctuation within generous white space.

## Overview

The page balances a mostly white canvas with a warm sand-coloured hero, vivid lime CTAs, lavender testimonial cards and occasional blue or purple section panels. Black is the anchor: it carries navigation, body copy and the oversized uppercase headings, while hot pink appears selectively in headline emphasis and branding imagery. Typography is deliberately emphatic and compact at display scale, then small and plain for supporting copy and navigation. The opening hero places a centered message amid loose, tilted portraits, giving the people imagery a scrapbook-like feel. Below it, unusually generous white intervals separate product, proof and story sections instead of relying on repeated coloured bands. Content alternates between centered panels, split layouts and horizontally browsable cards. Flat colour surfaces and minimal borders keep the geometry clear; restrained navigation shadow and rounded pill CTAs provide the principal depth and interaction cues.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Team Ink | `#000000` | `--color-team-ink` | neutral | Primary text, uppercase display headings, navigation, link text, card copy and dark CTA backgrounds. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and breathing space between sections; also appears in navigation and on dark CTA labels. |
| Playful Lilac | `#adabff` | `--color-playful-lilac` | brand | Lavender feature panels and testimonial cards, with black text set directly on the flat surface. |
| Electric Lime | `#e4ff60` | `--color-electric-lime` | accent | Primary demo CTA and prominent employee-ambassador and closing callout panels. |
| Open Sky | `#7fb6e6` | `--color-open-sky` | accent | Blue customer-proof panel and an alternate button surface; paired with black text. |
| Warm Sand | `#e1c19e` | `--color-warm-sand` | brand | Large opening hero field behind the headline and scattered portraits. |
| Soft Mist | `#f6f6f6` | `--color-soft-mist` | surface | Pale awards and recognition section background, distinct from the white page canvas. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#adabff` (Playful Lilac) · `--color-surface-2` → `#e1c19e` (Warm Sand) · `--color-surface-3` → `#7fb6e6` (Open Sky) · `--color-surface-4` → `#f6f6f6` (Soft Mist) · `--color-text` → `#000000` (Team Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#000000` (Team Ink) · `--color-accent` → `#adabff` (Playful Lilac) · `--color-accent-2` → `#7fb6e6` (Open Sky)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#adabff` | 10.05:1 | AAA |
| `#000000` | `#e1c19e` | 12.32:1 | AAA |
| `#000000` | `#7fb6e6` | 9.74:1 | AAA |
| `#ffffff` | `#adabff` | 2.09:1 | fail |
| `#ffffff` | `#e1c19e` | 1.7:1 | fail |
| `#ffffff` | `#7fb6e6` | 2.16:1 | fail |
| `#adabff` | `#ffffff` | 2.09:1 | fail |
| `#adabff` | `#e1c19e` | 1.23:1 | fail |
| `#adabff` | `#7fb6e6` | 1.03:1 | fail |

### Gradients

- `linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Body | `--font-body` | webfont | 400, 700 | Main copy, links, testimonial text, buttons, and body-scale headings. | Inter |
| Black | `--font-display` | webfont | 700, 400 | Display and main headings, including the hero and oversized section statements. | Archivo Black |
| Regular | `--font-regular` | webfont | 400 | CTA button text and selected uppercase secondary links. | Inter |
| Medium | `--font-medium` | webfont | 400 | Compact dark demo CTA labels, especially in navigation and repeated calls to action. | Inter |

- **Body:** Measured weights 400 and 700; compact negative tracking on most roles, with uppercase links and display treatments.
- **Black:** Bold, tightly tracked and frequently uppercase; preserve the dense, poster-like headline silhouette.
- **Regular:** Measured regular weight; button labels are uppercase, with tracking kept neutral.
- **Medium:** Measured regular weight from a distinct family; use concise uppercase labels.

### Type scale — Custom (ratio ≈ 1.71, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 700 | 1 | -0.025em | uppercase | Black | Oversized uppercase campaign headlines and prominent statements. |
| h1 | 56px | 700 | normal | -0.036em | uppercase | Black | Main page and section headlines, set in heavy uppercase. |
| h2 | 22px | 400 | normal | -0.011em | — | Body | Supporting section headings and secondary statements. |
| body | 16px | 400 | normal | -0.016em | — | Body | Paragraphs, testimonial text, and explanatory copy. |
| caption | 14px | 400 | normal | -0.018em | — | Body | Small supporting labels and compact metadata. |
| button | 16px | 400 | normal | 0 | uppercase | Regular | CTA labels, generally uppercase. |
| nav | 14px | 400 | 1.21 | -0.018em | — | Regular | Header navigation labels. |
| link | 16px | 400 | normal | -0.016em | uppercase | Body | Uppercase text links such as learn-more actions. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 4, 8, 10, 14, 15, 16, 20, 22, 24, 30, 32, 40, 50, 100, 140 px.
- Section rhythm 100px · element gap 15px · card padding 57px · max content width 1240px.

Use a centered content frame capped at the measured 1240px, with a spacious rhythm and section gaps around the measured 100px. The page mixes a full-width hero, centered colour panels, split text-and-image features, and horizontally browsable testimonial cards. Keep alignment deliberate within each block: center prominent proof and CTA sections, but left-align editorial feature copy. The measured base spacing unit is 2px and the scale ranges from 4px to 140px; keep element spacing airy rather than dense. Most content sits on white, so reserve coloured bands for emphasis.

## Shape & elevation

- Radius: button `9999px` · nav `14px` · xs `10px` · sm `14px` · pill `9999px`
- Shadow `sm` (nav): `rgba(0, 0, 0, 0.12) 0px 1.52px 8px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

Surfaces are predominantly flat, with no heavy card shadows. Use black borders sparingly for controls and selected proof buttons; the measured customer-case card is square-cornered. The header is the key layered element, with a subtle measured shadow and rounded navigation container. Pill-shaped dark CTAs provide a compact contrast against the flat page.

## Imagery

Use candid employee photography as the core visual material. In the hero, treat portraits like loose, slightly rotated snapshots around the central headline; elsewhere, pair people or app imagery with explanatory copy and colour panels. Product screenshots and phone mockups support the story but do not define the palette. Avoid glossy stock-photo staging or decorative illustration that competes with the human focus.

## Components

### Floating navigation

A light, rounded navigation container layered over the hero with a subtle shadow, compact labels and a dark pill demo CTA.

### Hero

Warm sand field, huge centered uppercase headline, selective pink emphasis, scattered tilted employee portraits and a lime pill CTA.

### Customer proof panel

Large sky-blue rectangular panel with centered black headline and a small outlined customer-case button.

### Testimonial carousel

Horizontally browsable square-cornered lavender cards with black copy, compact links and simple circular arrow controls.

### Employee engagement feature

Split feature content and people imagery on white, with uppercase black heading, short copy and a secondary text link.

### Primary CTA

Electric-lime background or pill surface paired with black text; compact demo actions may instead use a black pill with white uppercase type.

### Awards strip

Pale grey recognition band with a prominent centered heading and compact award and app-rating labels.

### Measured component styles

- **Primary button** (“DEMANDER UNE DÉMO DEMANDER UNE DÉMO”): background #e4ff60 · text #0000ee · radius 500px · padding 14.4px 32px · 400 16px Body
- **Secondary button** (“DÉCOUVREZ NOS CAS CLIENTS”): background #7fb6e6 · text #000000 · border 1px solid #000000 · radius 0px · padding 8px 12px · 400 18px Epilogue
- **Link** (“TOUS LES CAS CLIENTS”): transparent background · text #000000 · radius 0px · padding 0px 0px 8px 0px · 400 16px Body · uppercase
- **Card** (“"C’est une expérience qui fait du bien p”): background #adabff · text #000000 · radius 0px · padding 40px 24px 140px 24px · 400 16px Body
- **Navigation item** (“Solution”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Body

## Do

- Use oversized uppercase black headings as the strongest typographic element.
- Keep the page canvas white and spend colour on selected hero, proof and CTA areas.
- Pair candid employee portraits with the warm sand hero.
- Use Electric Lime for prominent calls to action.
- Preserve generous white intervals between major content blocks.
- Make testimonial cards flat, lavender and easy to scan.

## Don't

- Do not turn every section into a coloured band.
- Do not use heavy shadows or layered card effects.
- Do not replace the human photography with generic product decoration.
- Do not use delicate display typography where the page calls for heavy uppercase type.
- Do not crowd the page with dense copy or tight section spacing.
- Do not add unmeasured colour values to the brand palette.

## Agent prompt

Build a new SquadEasy-style SaaS page around candid employee imagery, oversized uppercase headings and generous white space. Use Team Ink (#000000) for display type and most copy on a Gallery White (#ffffff) canvas. Reserve Warm Sand (#e1c19e) for a people-led hero, Electric Lime (#e4ff60) for strong CTA moments, Playful Lilac (#adabff) for testimonials or stats, Open Sky (#7fb6e6) for occasional customer proof, and Soft Mist (#f6f6f6) for quiet recognition content. Keep headlines heavy and tightly tracked; make supporting copy compact and plain. Mix centered colour panels with split editorial features and horizontal testimonial cards. Keep surfaces flat, use pill CTAs and restrained borders, and maintain spacious transitions instead of adding colour to every section.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width warm-sand hero with an overlaid floating navigation bar, centered headline and portraits around the edges. | Primary demo CTA, Scroll cue | Oversized uppercase headline, Tilted employee portraits, Lime pill button |
| 2 | product-showcase | Minimal white product area with a centered phone visual and substantial open space. | Learn-more link | Mobile app mockup, White canvas, Small underlined link |
| 3 | logo-cloud | Centered blue proof panel within a white section. | Customer-case CTA, Learn-more link | Sky-blue rectangle, Centered black heading, Outlined button |
| 4 | feature-split | Two-column editorial section with heading on one side and mission copy on the other. | Mission link | Black uppercase title, Compact body copy, Pink accent detail |
| 5 | stats | Full-width lavender band with a centered oversized metric and stacked headline. | Metric-led proof | Lavender background, Large black numerals, Small heart motif |
| 6 | feature-grid | White feature section with heading, compact copy, category labels and product visuals. | Feature-category selection, Carousel arrows | Uppercase heading, Compact text, App and activity visuals |
| 7 | testimonials | Left-aligned heading beside a horizontally scrolling row of testimonial cards. | Horizontal browsing, Carousel arrows, Case-study links | Lavender square-corner cards, Black text, Compact uppercase links |
| 8 | reviews | Pale-grey recognition band with a centered heading and a compact grid of awards and ratings. | Recognition proof, App-store ratings | Soft grey background, Small outlined badges, Compact rating labels |
| 9 | feature-split | Two-column employee-ambassador feature with copy and a people-focused image. | Learn-more CTA | Electric-lime panel, Bold black heading, Employee photograph |
| 10 | product-showcase | Centered white product-personalization section with visual and headline grouped as a light composition. | Brand-customization message | Large uppercase typography, Pink heading emphasis, Minimal product imagery |
| 11 | cta | Centered call-to-action statement and link inside a broad lime panel. | Learn-more CTA | Lime background, Bold uppercase headline, Dark pill action |
| 12 | footer | Full-width footer divided into four navigation columns with links and dark CTA buttons. | Grouped site navigation, Repeated demo CTA | Four-column link layout, Compact lists, Dark pill buttons |

## Source CSS custom properties (selected)

```css
--color-4: #c2ebb8;
--color-5: #ea5da3;
--color-6: #6fb853;
--color-7: #e1c19e;
--color-8: #e0493c;
--color-9: #7fb6e6;
--color-11: #f6f6f6;
--color-1: #fff;
--color-2: #000;
--color-3: #adabff;
--color-10: #e4ff60;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/squadeasy-com