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

# Swwim · Design System

> Bold blue storytelling with a playful editorial edge

**Theme:** dark · **Industry:** agency · **Source:** https://www.weswwim.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._

Swwim pairs saturated blue fields and oversized white typography with playful cutout imagery to give its agency homepage an energetic, editorial character. A light news feed and deep-blue footer create a clear transition from brand storytelling to practical information.

## North star

Let oversized white editorial typography lead across vivid blue fields, using cropped imagery as playful interruptions rather than decoration.

## Overview

The homepage is built around a vivid blue canvas, using #1658b3 as the defining field and #ffffff for high-contrast type, navigation, and pill-shaped contact buttons. Large uppercase display lettering sets an assertive editorial tone: the hero headline spreads across the viewport and shares space with compact copy and cropped photographs. Greycliff provides a more conversational counterpoint for body copy, navigation, and article details. Deep blue #0d3c88 appears in darker section treatments and card-like areas; the brighter #015fee is a limited footer accent, while #8bacd9 belongs to fine border details rather than the main color story. The layout alternates expansive, image-led blue brand sections with a restrained white news feed. Photography and flat illustrations are layered into the composition, sometimes overlapping the typography. Hairlines and generous section breaks organize content without relying on shadows or elaborate card chrome.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | White news canvas, main headings, navigation, and the filled Contact Us pill. |
| Swwim Blue | `#1658b3` | `--color-swwim-blue` | brand | Signature blue hero and brand-story backgrounds, with white copy and large display type. |
| Deep Current | `#0d3c88` | `--color-deep-current` | accent | Darker blue section and card treatment, especially in deep-blue footer and layered fields. |
| Electric Tide | `#015fee` | `--color-electric-tide` | accent | Sparse footer accent; not a dominant canvas or text color. |
| Mist Blue | `#8bacd9` | `--color-mist-blue` | semantic | Fine border detail and subtle blue rules, not a primary surface. |

### Semantic aliases

`--color-canvas` → `#1658b3` (Swwim Blue) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#ffffff` (Gallery White) · `--color-border` → `#8bacd9` (Mist Blue) · `--color-accent` → `#1658b3` (Swwim Blue) · `--color-accent-2` → `#0d3c88` (Deep Current) · `--color-accent-3` → `#015fee` (Electric Tide)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#1658b3` | 6.82:1 | AA |
| `#1658b3` | `#ffffff` | 6.82:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Greycliff | `--font-body` | webfont | 400, 500, 700 | Body copy, navigation, article details, and supporting interface text. | Nunito Sans |
| Baton Turbo | `--font-display` | webfont | 400 | Oversized display headlines and uppercase section titles. | Oswald |

- **Greycliff:** Use regular body text and medium navigation; bold weights appear on compact calls to action and selected headings.
- **Baton Turbo:** Regular-weight uppercase display lettering dominates; keep tracking close to neutral and preserve the large, tightly stacked headline feel.

### Type scale — Perfect Fifth (ratio ≈ 1.53, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 151px | 400 | 1 | 0 | uppercase | Baton Turbo | Oversized uppercase hero message, spanning the blue opening canvas. |
| h1 | 48px | 400 | 1 | 0 | uppercase | Baton Turbo | Uppercase primary hero and major page headline. |
| h2 | 36px | 400 | 1.11 | 0 | — | Baton Turbo | Section headings and supporting editorial statements. |
| h3 | 30px | 700 | 1.2 | 0 | — | Greycliff | Bold article titles and prominent supporting headings. |
| h4 | 29px | 400 | 1.5 | 0 | uppercase | Baton Turbo | Uppercase small section labels and editorial eyebrows. |
| body | 18px | 400 | 1.56 | 0 | — | Greycliff | Agency descriptions, article copy, and supporting paragraphs. |
| caption | 16px | 400 | 1.5 | 0 | — | Greycliff | Compact article metadata and secondary details. |
| nav | 16px | 500 | 1.5 | 0 | — | Greycliff | Header navigation and footer browse links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 4, 8, 10, 12, 16, 20, 24, 36, 40, 48, 64, 128 px.
- Section rhythm 64px · element gap — · card padding — · max content width 1392px.

The page uses a wide, responsive canvas, with measured maximum content width of 1392px. The hero is deliberately loose: an oversized headline occupies most of the width while short copy and cropped images fill gaps in the composition. Blue storytelling sections follow, including a single-column feature statement and an image-led split layout. A white editorial feed then resets the visual density with stacked, image-and-text rows separated by fine rules. The footer shifts to a three-column information layout. Section spacing is generous and the overall density remains comfortable.

## Shape & elevation

- Radius: button `9999px` · media `50%` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The design is primarily flat: no measured shadows or gradients define its hierarchy. Contrast comes from blue and white section fields, dark-blue overlays, and thin horizontal rules. The hero’s photos, illustration, and decorative marks layer visually over the canvas, while the news list is divided by hairlines rather than card elevation.

## Imagery

Photography appears as small, sharply cropped windows within the hero and as larger editorial thumbnails in the news feed. The blue feature section mixes a flat lifestyle illustration with decorative botanical imagery. Images sit directly in the layout rather than inside raised cards; playful overlap with headline lettering helps the opening feel assembled and energetic. Preserve image crops and aspect variation instead of forcing a uniform tile system.

## Components

### Header

White wordmark and service label sit at the left; a white pill Contact Us button and compact Menu control align to the right.

### Hero headline

Oversized uppercase white display type spans the blue canvas, interrupted by cropped photos, a megaphone illustration, and short supporting copy.

### Contact button

White 9999px-radius pill with blue text, bold 16px Greycliff, and measured 8px 24px padding.

### Editorial feature

Blue feature area pairs large uppercase messaging and a lifestyle illustration with a compact bold heading and supporting copy.

### News row

White-background editorial entry combines a rectangular image, blue title, small metadata, author detail, and a thin separator.

### Footer

Deep-blue field groups a contact message and pill CTA with browse links, contact details, social links, and a small illustration.

### Measured component styles

- **Primary button** (“Contact Us”): background #ffffff · text #1658b3 · radius 9999px · padding 8px 24px · 700 16px Greycliff
- **Link** (“Why B2B Social Media Marketing Should Be”): transparent background · text #1658b3 · radius 0px · padding 40px 0px · 400 16px Greycliff
- **Card**: background #0d3c88 · text #ffffff · radius 0px · padding 0px · 400 16px Greycliff
- **Navigation item** (“About”): transparent background · text #ffffff · radius 0px · padding 0px · 500 16px Greycliff

## Do

- Use #1658b3 as the primary brand canvas.
- Set major display headlines in uppercase Baton Turbo or a close condensed alternative.
- Keep primary text and navigation white on blue.
- Use cropped photography as intentional interruptions in the hero.
- Separate editorial rows with thin rules rather than elevated cards.
- Reserve rounded pills for prominent contact actions.

## Don't

- Do not replace the blue-and-white identity with a neutral-first palette.
- Do not shrink the hero headline into conventional page-title scale.
- Do not enclose every content block in a shadowed card.
- Do not make #015fee or #8bacd9 dominant surface colors.
- Do not treat the playful illustration as a substitute for editorial photography.
- Do not crowd the news feed with decorative elements.

## Agent prompt

Build a new agency page in Swwim’s bold editorial style. Use Swwim Blue (#1658b3) as the main brand field and Gallery White (#ffffff) for high-contrast typography and key controls. Use Deep Current (#0d3c88) sparingly for darker section or footer areas, with Electric Tide (#015fee) and Mist Blue (#8bacd9) limited to subtle accents and rules. Set display headlines in a Baton Turbo-like condensed sans, uppercase and oversized; use a friendly Greycliff-like sans for body copy, navigation, and metadata. Compose photography as cropped, varied windows and allow occasional flat illustration to overlap the visual field. Alternate expansive blue storytelling areas with a clean white editorial feed. Keep surfaces mostly flat, use hairlines to structure rows, and reserve rounded white pills for contact actions. Preserve generous section breaks and an energetic, uncluttered hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Logo and service descriptor align left; contact and menu controls sit right. | persistent-looking header, direct contact, menu access | white wordmark, text label, pill CTA, menu icon |
| 2 | hero | Full-width blue composition with oversized headline, floating imagery, and supporting copy. | scroll invitation, brand introduction, contact route | uppercase display type, cropped photos, megaphone illustration, horizontal service ticker |
| 3 | feature-split | Blue feature area pairs a large statement with a lifestyle illustration and right-aligned copy. | service explanation, case study link | oversized heading, flat illustration, decorative botanical imagery |
| 4 | content-feed | White editorial feed with heading, view-all link, and stacked image-and-text entries. | browse latest articles, open article | blue titles, thumbnail imagery, compact metadata, hairline separators |
| 5 | content-feed | Single editorial row with image on the left and title plus metadata alongside. | article discovery, read metadata | rectangular thumbnail, blue headline, horizontal rule |
| 6 | content-feed | Single editorial row matching the preceding thumbnail-and-copy treatment. | article discovery, read metadata | rectangular thumbnail, blue headline, horizontal rule |
| 7 | footer | Blue social strip above a deep-blue, three-column footer with contact, browse, and company details. | contact conversion, social discovery, footer navigation | color-block bands, white contact pill, social icons, small illustration |

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