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

# Websmith Studio · Design System

> Quiet canvas, confident type, vivid work.

**Theme:** light · **Industry:** agency · **Source:** https://websmith.studio/ · **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._

Websmith Studio pairs a warm off-white canvas and oversized, near-black typography with polished collaboration imagery. Pastel service cards add the page’s only prominent colour, while spacious two-column sections keep the portfolio feeling calm and considered.

## North star

Keep the interface quiet and spacious so oversized typography, project imagery, and a few pastel cards carry the visual emphasis.

## Overview

The visual system is built around a warm off-white canvas (#f8f8f2) and near-black text (#1a1a1a), producing a restrained editorial frame for the work. A large, tightly tracked headline leads the first viewport; supporting copy and navigation stay relatively quiet. Project imagery is arranged in a two-column gallery, with rounded image cards and restrained white overlay labels. Service content uses a four-card grid: white for Plan, pale blue for Build, mint for Deploy, and pink for Maintain. These pastels are confined to the cards rather than spread across the page. Later sections retain the same canvas and generous separation: a two-column testimonial pairs monochrome portrait photography with text, followed by dark blog thumbnails. Buttons reverse the palette with near-black fills and white labels. The layout favors broad margins, spacious section intervals, and clear alignment over decorative borders or shadow. Keep the interface flat and let project photography provide the richest visual detail.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#1a1a1a` | `--color-soft-ink` | brand | Primary text, headings, navigation, links, button fills, and the measured border colour. |
| Warm Canvas | `#f8f8f2` | `--color-warm-canvas` | surface | Main page canvas and navigation background; the continuous warm off-white field behind sections. |
| Clean Paper | `#ffffff` | `--color-clean-paper` | neutral | White Plan card, button labels, and text placed over dark project imagery. |
| Muted Stone | `#6b6b68` | `--color-muted-stone` | neutral | Measured gradient-related colour; not a defining interface colour in the screenshots. |
| Sky Wash | `#bedbff` | `--color-sky-wash` | accent | Pale blue Build service card, a contained pastel accent among otherwise neutral sections. |
| Mint Wash | `#a4f4cf` | `--color-mint-wash` | accent | Mint Deploy service card; keep this accent local to the service-card grid. |
| Blush Wash | `#ffc9c9` | `--color-blush-wash` | accent | Pink Maintain service card; a soft pastel surface rather than a global page colour. |

### Semantic aliases

`--color-canvas` → `#f8f8f2` (Warm Canvas) · `--color-surface` → `#ffffff` (Clean Paper) · `--color-surface-2` → `#bedbff` (Sky Wash) · `--color-surface-3` → `#a4f4cf` (Mint Wash) · `--color-surface-4` → `#ffc9c9` (Blush Wash) · `--color-text` → `#1a1a1a` (Soft Ink) · `--color-text-muted` → `#ffffff` (Clean Paper) · `--color-border` → `#1a1a1a` (Soft Ink) · `--color-accent` → `#a4f4cf` (Mint Wash) · `--color-accent-2` → `#ffc9c9` (Blush Wash)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1a1a1a` | `#f8f8f2` | 16.33:1 | AAA |
| `#1a1a1a` | `#ffffff` | 17.4:1 | AAA |
| `#1a1a1a` | `#bedbff` | 12.24:1 | AAA |
| `#1a1a1a` | `#a4f4cf` | 13.61:1 | AAA |
| `#ffffff` | `#f8f8f2` | 1.07:1 | fail |
| `#ffffff` | `#bedbff` | 1.42:1 | fail |
| `#ffffff` | `#a4f4cf` | 1.28:1 | fail |
| `#a4f4cf` | `#f8f8f2` | 1.2:1 | fail |
| `#a4f4cf` | `#ffffff` | 1.28:1 | fail |
| `#a4f4cf` | `#bedbff` | 1.11:1 | fail |

### Gradients

- `linear-gradient(to top, rgba(0, 0, 0, 0) 0%, oklab(0.161741 -0.00277131 0.00346287 / 0.6) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| -apple-system | `--font-body` | system | 500, 400, 600, 700 | Headlines, body copy, navigation, links, captions, and buttons throughout the page. | Inter |

- **-apple-system:** Use a clean sans-serif feel; display and headings are semibold with tight negative tracking, while body and navigation remain understated.

### Type scale — Perfect Fifth (ratio ≈ 1.48, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 600 | 1 | -0.025em | — | -apple-system | Oversized hero headline, set prominently against the open canvas. |
| h1 | 88px | 600 | 1 | -0.025em | — | -apple-system | Primary page heading, visually similar to the hero display treatment. |
| h2 | 48px | 600 | 1 | -0.025em | — | -apple-system | Section headings including What we do and Latest blogs. |
| h3 | 30px | 500 | 1.2 | -0.025em | — | -apple-system | Service-card titles and supporting subsection headings. |
| body | 20px | 400 | 1.4 | 0 | — | -apple-system | Hero introduction and substantial service or testimonial copy. |
| caption | 14px | 400 | 1.43 | 0 | — | -apple-system | Project labels, collaboration credits, dates, and compact attribution. |
| button | 20px | 400 | 1.4 | 0 | — | -apple-system | White text on dark calls to action such as View more collaborations. |
| nav | 16px | 400 | 1.5 | 0 | — | -apple-system | Header links and the Websmith wordmark text. |
| link | 16px | 500 | 1.5 | 0 | — | -apple-system | Project names and other inline or content links. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 8, 16, 24, 32, 40, 43, 48, 64, 92, 96, 112, 176, 183 px.
- Section rhythm 112px · element gap 2px · card padding 32px · max content width 1254px.

Use a centered, spacious composition within the measured 1254px maximum page width. The opening viewport aligns the hero headline and supporting copy to the left, with navigation spread across the header; project cards form a two-column grid below. Continue with a two-column service grid, a split testimonial, and a two-column blog feed. Section spacing is generous, and headings anchor the left edge of their content. The overall density stays low, with room around both text and imagery.

## Shape & elevation

- Radius: button `8px` · card `12px` · media `12px` · nav `50%` · xs `8px` · sm `12px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface reads as flat: no measured shadows, and cards rely on fill colour and rounded corners rather than outlines. Keep the warm canvas continuous between sections. Layer only content that needs to sit on photography, using restrained white project labels; avoid adding ornamental depth or extra border treatments.

## Imagery

Use polished project photography and device mockups as the main visual texture: work samples appear in rounded, two-column image cards with small white labels overlaid near the upper left. The testimonial uses a monochrome portrait beside the quote. Blog thumbnails are dark, graphic-led images. Keep imagery rectangular and contained within cards; the screenshots do not establish a broader illustration or video style.

## Components

### Header navigation

A quiet horizontal header on the warm canvas, with the Websmith mark at left, centered text links, and a small green status dot with local time at right.

### Hero

Large, near-black, tightly tracked headline above a compact two-line introduction; generous empty canvas separates it from the work gallery.

### Project gallery cards

Two-column project imagery with rounded corners and small white title and collaborator labels overlaid on each image.

### Dark CTA button

Near-black fill with white 20px system-sans text, 8px radius, and measured 16px vertical by 32px horizontal padding.

### Service cards

Four rounded cards in a two-column grid: white Plan, pale-blue Build, mint Deploy, and pink Maintain; dark text with a small category label and icon.

### Testimonial split

Monochrome portrait on the left and a quote, quotation mark, and compact author attribution on the right.

### Blog cards

Two dark image thumbnails in a two-column feed, with compact white post titles and dates placed over the imagery.

### Measured component styles

- **Primary button** (“View more collaborations”): background #1a1a1a · text #ffffff · radius 8px · padding 16px 32px · 400 20px -apple-system
- **Link** (“Medical Forum Collab with Studio Scotts”): transparent background · text #1a1a1a · radius 0px · padding 0px · 400 16px -apple-system
- **Card** (“Plan Work closely with leading creatives”): background #ffffff · text #1a1a1a · radius 12px · padding 32px · 400 16px -apple-system
- **Navigation item** (“Websmith”): transparent background · text #1a1a1a · radius 0px · padding 0px · 400 16px -apple-system

## Do

- Use #f8f8f2 as the continuous page canvas.
- Set primary type and dark CTA fills in #1a1a1a.
- Reserve #bedbff, #a4f4cf, and #ffc9c9 for service-card surfaces.
- Give project work and testimonial photography room to breathe.
- Align section headings and content to consistent column edges.
- Use rounded image and card corners without adding shadows.

## Don't

- Do not turn the pastel card colours into full-width section bands.
- Do not add gradients as a defining brand treatment.
- Do not crowd the hero with extra copy or decorative elements.
- Do not add heavy borders or drop shadows to cards.
- Do not use bright colours for navigation or primary text.
- Do not treat colours inside project photographs as brand palette.

## Agent prompt

Build a new Websmith Studio page as a spacious editorial portfolio, not a generic agency template. Use Warm Canvas (#f8f8f2) across the page and Soft Ink (#1a1a1a) for headings, body text, links, and dark CTA fills. Set a large, tightly tracked sans-serif headline over a short introduction, then organize content in broad two-column layouts with generous section breaks. Use project photography in rounded cards with restrained white overlay labels. For feature or service cards, keep colour contained: Sky Wash (#bedbff), Mint Wash (#a4f4cf), Blush Wash (#ffc9c9), and white. Keep buttons flat, dark, and clearly legible. Make testimonial photography monochrome and blog thumbnails dark and graphic-led. Avoid shadows, decorative gradients, excessive borders, and invented brand colours; maintain the calm canvas around every element.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Two-column project gallery on the warm canvas, with an introductory hero above and a centered dark CTA below. | Clickable project cards, View more collaborations CTA | Rounded image tiles, White overlay labels, Two-column grid |
| 2 | feature-grid | Two-column, two-row service-card grid beneath a left-aligned section heading. | Service overview, View FAQs CTA | Four pastel and white cards, Small category labels, Corner icons |
| 3 | testimonials | Two-column split with a portrait on the left and testimonial copy on the right. | Partner endorsement, Author attribution | Monochrome portrait, Large quote mark, Compact role caption |
| 4 | content-feed | Left-aligned section heading above a two-column row of image-led blog cards and a centered CTA. | Article preview cards, View all blogs CTA | Dark thumbnails, White text overlays, Compact date captions |

## Source CSS custom properties (selected)

```css
--font-inter: Inter-983e7a88e410b943,"Inter-983e7a88e410b943 fallback: Arial","Inter-983e7a88e410b943 fallback: Arial Bold",sans-serif;
```

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