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

# Viewport · Design System

> A calm canvas for showing the work behind the work

**Theme:** light · **Industry:** design · **Source:** https://viewport.co/ · **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._

Viewport pairs a quiet, pale canvas with vivid product imagery to make design-process archives the focus. Its editorial split layout gives the message room to breathe while keeping the product visible alongside it.

## North star

Keep the interface quiet and spacious so the project imagery and a single luminous gradient action carry the visual emphasis.

## Overview

The page is built on a cool, very light gray canvas (#f1f3f5), with white reserved mainly for the product interfaces inside the showcase imagery. Black headings provide the strongest typographic contrast; muted grays handle explanatory copy, captions, and understated navigation links. A cyan-to-indigo accent brings energy to the primary “Try for free” action, while the imagery itself contains richer greens and other colors that belong to project mockups rather than the site’s core brand palette. Typography is sans serif throughout: a bold display face distinguishes the headline, while Silka carries the body and supporting text with relaxed line spacing. The composition uses a broad two-column feel: concise, left-aligned copy sits opposite a large vertical sequence of project boards. Generous blank space and low visual density keep the page calm, while rounded media and pill-shaped actions soften its precise editorial structure.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas Mist | `#f1f3f5` | `--color-canvas-mist` | brand | Page canvas and the continuous pale backdrop behind the hero and project showcases. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | White surfaces within media and light link areas; most prominent inside the embedded project boards. |
| Soft Graphite | `#919293` | `--color-soft-graphite` | neutral | Primary muted gray for explanatory body copy and supporting text. |
| Border Haze | `#e3e6ec` | `--color-border-haze` | semantic | Fine outline around the understated sign-in button. |
| Slate Whisper | `#7f8087` | `--color-slate-whisper` | neutral | Secondary muted text for captions and less prominent supporting copy. |
| Signal Cyan | `#00caf2` | `--color-signal-cyan` | accent | Bright endpoint of the CTA gradient and the cyan glow beneath the primary action. |
| Electric Indigo | `#4d4dff` | `--color-electric-indigo` | accent | Indigo endpoint of the CTA gradient, paired with cyan for the main action. |
| Ink Black | `#000000` | `--color-ink-black` | neutral | Headline and button text, providing crisp contrast against the pale canvas. |
| Link Gray | `#78797a` | `--color-link-gray` | neutral | Subdued text-link treatment for the lower-left navigation links. |

### Semantic aliases

`--color-canvas` → `#f1f3f5` (Canvas Mist) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Ink Black) · `--color-text-muted` → `#919293` (Soft Graphite) · `--color-text-subtle` → `#7f8087` (Slate Whisper) · `--color-border` → `#e3e6ec` (Border Haze) · `--color-accent` → `#00caf2` (Signal Cyan) · `--color-accent-2` → `#4d4dff` (Electric Indigo)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f1f3f5` | 18.88:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#919293` | `#f1f3f5` | 2.8:1 | fail |
| `#919293` | `#ffffff` | 3.12:1 | AA-large |
| `#7f8087` | `#f1f3f5` | 3.54:1 | AA-large |
| `#7f8087` | `#ffffff` | 3.93:1 | AA-large |
| `#00caf2` | `#f1f3f5` | 1.76:1 | fail |
| `#00caf2` | `#ffffff` | 1.96:1 | fail |

### Gradients

- `linear-gradient(0deg, rgb(0, 202, 242) 0%, rgb(77, 77, 255) 173.214%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Silka Medium | `--font-body` | webfont | 400 | Body copy, captions, and standard text links. | Inter |
| HK Sentiments Bold | `--font-display` | webfont | 700 | Hero headline. | Montserrat |
| Silka SemiBold | `--font-silka-semibold` | webfont | 600 | Primary CTA and sign-in button labels. | Inter |

- **Silka Medium:** Regular weight; slightly tight tracking on body copy, with comfortable line spacing and sentence case.
- **HK Sentiments Bold:** Bold display treatment with subtly negative tracking; sentence case and compact line height.
- **Silka SemiBold:** Semibold, compact button text in sentence case; avoid all-caps styling.

### Type scale — Golden Ratio (ratio ≈ 1.611, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 29px | 700 | 1.2 | -0.014em | — | HK Sentiments Bold | The left-aligned hero headline introducing the product proposition. |
| body | 18px | 400 | 1.65 | -0.011em | — | Silka Medium | The explanatory paragraph beneath the headline. |
| caption | 15px | 400 | 1.4 | 0 | — | Silka Medium | Descriptions directly beneath the project showcase images. |
| button | 15px | 600 | normal | 0 | — | Silka SemiBold | Semibold labels on sign-in and the primary CTA. |
| link | 15px | 400 | 1.4 | 0 | — | Silka Medium | Supporting navigation links such as Use cases, Mac app, and Pricing. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 10, 16, 18, 26, 32, 34, 41, 44, 68, 72 px.
- Section rhythm 68px · element gap 10px · card padding — · max content width —.

Use a wide, open composition with a left-aligned text and CTA column beside a vertically stacked showcase column. Keep the canvas continuous rather than dividing content into colored bands. The hero headline and paragraph align to the left; navigation links sit low in the left column, separated from the main message by generous empty space. Maintain comfortable spacing between sections and image captions. The measured data does not specify a page maximum width, so match the screenshot’s broad margins without inventing a fixed width.

## Shape & elevation

- Radius: button `9999px` · media `14px` · link `9999px` · xs `14px` · pill `9999px`
- Shadow `hairline` (media): `rgba(16, 24, 40, 0.04) 0px 1px 2px 0px`
- Shadow `md` (link): `rgba(0, 202, 242, 0.6) 0px 4px 12px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The page is mostly flat, with no prominent section cards or heavy shadowing. Media uses a very subtle hairline shadow to separate its rounded frames from the canvas. The primary CTA is the exception: its cyan-indigo fill and soft cyan glow lift it forward. Keep borders delicate, as on the sign-in button, and avoid stacked panels.

## Imagery

Show large, rounded screenshots of visual project archives, with boards containing identity systems, sketches, references, and finished work. Place each image in a softly colored or atmospheric mockup frame and pair it with a small muted caption. Greens, dark tones, and bright colors within the boards are product content, not the core site palette. Keep imagery crisp and let the embedded project material supply most of the page’s color variation.

## Components

### Sign-in button

Quiet, transparent pill control with black semibold text and a fine #e3e6ec outline.

### Primary CTA

Rounded “Try for free” link with white semibold text, a cyan-to-indigo gradient, and a soft cyan shadow.

### Hero copy

Bold, dark headline above a muted explanatory paragraph, both aligned to the start of the left column.

### Project showcase

Large rounded project-board media arranged vertically, with a muted caption immediately below each image.

### Text navigation

Simple, understated links for Use cases, Mac app, and Pricing; no filled navigation container.

### Footer note

Small, muted copyright text positioned beneath the lower-left navigation links.

### Measured component styles

- **Primary button** (“Sign in”): transparent background · text #000000 · border 1px solid #e3e6ec · radius 100px · padding 0px 26px · 600 15px Silka SemiBold
- **Link** (“Use cases”): transparent background · text #000000 · radius 0px · padding 0px · 400 15px Silka Medium

## Do

- Use #f1f3f5 as the uninterrupted page canvas.
- Keep hero copy left-aligned and visually concise.
- Reserve the cyan-indigo gradient for the primary action.
- Let large project boards provide the main visual color.
- Use muted gray for descriptions, captions, and secondary links.
- Keep media rounded and its elevation subtle.

## Don't

- Do not add saturated color bands behind page sections.
- Do not treat greens inside project boards as brand accents.
- Do not use heavy card borders or deep shadows.
- Do not center the hero copy or turn it into a dense text block.
- Do not style every link as a filled button.
- Do not add uppercase labels or decorative type effects.

## Agent prompt

Build a new page in Viewport’s quiet editorial style. Use Canvas Mist (#f1f3f5) as a continuous backdrop, Ink Black (#000000) for strong headings, and Soft Graphite (#919293) or Slate Whisper (#7f8087) for supporting text and captions. Arrange a concise, left-aligned message and CTA beside large, vertically stacked rounded project imagery. Use Gallery White (#ffffff) primarily within the showcased work, not as a new page band. The main action may use a cyan-to-indigo gradient from Signal Cyan (#00caf2) to Electric Indigo (#4d4dff), with white semibold text and a soft glow; keep secondary controls understated with a fine Border Haze (#e3e6ec) outline. Use sans-serif typography, generous whitespace, subtle media elevation, and quiet text links. Treat colors inside screenshots as project content.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Open split composition: left-aligned headline, copy and CTA beside a vertically stacked project-showcase column. | Primary free-trial CTA, Sign-in access, Supporting text navigation | Pale continuous canvas, Rounded project media, Muted image captions, Cyan-indigo CTA gradient |

## Source CSS custom properties (selected)

```css
--cta-shadow: 0 4px 12px 0 rgba(0, 202, 242, 0.6);
--shot-gap: 88px;
```

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