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

# Deta Surf · Design System

> A bright editorial canvas for thinking with AI

**Theme:** light · **Industry:** ai · **Source:** https://deta.surf/ · **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._

Deta Surf pairs an open white canvas with a vivid sky-blue product hero and elegant display serif typography. Floating product artifacts make the browser’s research and note-taking capabilities tangible without changing the restrained rhythm of the page.

## North star

Keep the page mostly white and editorial, reserving the vivid sky-blue gradient for the product-led opening and clear actions.

## Overview

The page contrasts a distinctive blue-sky hero with an otherwise nearly all-white canvas. The hero’s saturated blue fades toward pale cloudlike white near its lower edge, making the opening feel spacious while giving the product demo strong contrast. White, black, and quiet grays handle most text and surfaces; blue is reserved for the primary action and occasional illustrative treatments. Gambarino gives major headings an editorial, literary character, balanced by Switzer for navigation, body copy, and controls. The centered opening aligns a compact navigation, a large headline, short explanatory copy, a floating prompt interface, and a prominent Download button. Across the long page, centered statement sections alternate with compact feature groupings and product media. Soft corners, faint borders, and restrained shadows separate interface cards without creating heavy panels. The overall strategy is bright and product-led: use generous white space and carefully framed interface artifacts to make a browser feel like a thinking tool.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, light card surfaces, and reversed text over the blue hero. |
| Mist Panel | `#f3f4f6` | `--color-mist-panel` | surface | Quiet pale-gray surface for secondary card and interface areas. |
| Soft Ink | `#000000` | `--color-soft-ink` | neutral | Primary headings and body text; also appears on inverse surfaces and controls. |
| Azure Depth | `#007de6` | `--color-azure-depth` | accent | Blue gradient and button-related accent; use sparingly for stronger emphasis. |
| Surf Blue | `#0097ff` | `--color-surf-blue` | brand | Core brand accent associated with blue actions and product highlights. |
| Slate Copy | `#4b5563` | `--color-slate-copy` | neutral | Muted supporting text where primary black would feel too strong. |
| Quiet Gray | `#7f7f7f` | `--color-quiet-gray` | neutral | Secondary text and subdued links; not a defining brand color. |
| Graphite Gray | `#52525b` | `--color-graphite-gray` | neutral | Muted supporting copy and interface text. |
| Cloud Line | `#e5e7eb` | `--color-cloud-line` | semantic | Fine card and control borders separating elements from the white canvas. |
| Ice Blue | `#d8e6fd` | `--color-ice-blue` | accent | Dotted outline treatment on the team message link; a subtle decorative accent. |
| Clearwater | `#0396df` | `--color-clearwater` | accent | Blue gradient and button treatment; supporting variation rather than a separate section band. |
| Deep Charcoal | `#27272a` | `--color-deep-charcoal` | neutral | Occasional stronger heading tone within the otherwise black-and-gray text system. |
| Ocean Blue | `#008ad7` | `--color-ocean-blue` | accent | Blue product illustration and gradient imagery, not a broad page background. |
| Open Sky | `#43a3e2` | `--color-open-sky` | accent | Midtone in blue gradients and illustrative product media. |
| Bright Current | `#009dfc` | `--color-bright-current` | accent | Bright blue highlight in gradients and product-oriented imagery. |
| Sky Glow | `#4a9eff` | `--color-sky-glow` | accent | Lighter blue gradient color used in the hero and illustrative treatments. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f3f4f6` (Mist Panel) · `--color-surface-2` → `#000000` (Soft Ink) · `--color-text` → `#000000` (Soft Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#4b5563` (Slate Copy) · `--color-border` → `#e5e7eb` (Cloud Line) · `--color-accent` → `#0097ff` (Surf Blue) · `--color-accent-2` → `#008ad7` (Ocean Blue) · `--color-accent-3` → `#43a3e2` (Open Sky)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f3f4f6` | 19.08:1 | AAA |
| `#ffffff` | `#f3f4f6` | 1.1:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#4b5563` | `#ffffff` | 7.56:1 | AAA |
| `#4b5563` | `#f3f4f6` | 6.87:1 | AA |
| `#4b5563` | `#000000` | 2.78:1 | fail |
| `#0097ff` | `#ffffff` | 3.06:1 | AA-large |
| `#0097ff` | `#f3f4f6` | 2.78:1 | fail |
| `#0097ff` | `#000000` | 6.87:1 | AA |

### Gradients

- `linear-gradient(rgb(74, 158, 255) 0%, rgb(123, 184, 255) 50%, rgb(168, 213, 255) 100%)`
- `linear-gradient(to top, rgb(255, 255, 255) 20%, rgba(255, 255, 255, 0))`
- `radial-gradient(116.05% 111.85% at 44.33% 115.39%, color(display-p3 0.2048 0.5316 0.8202), rgb(67, 163, 226) 57.27%, color(display-p3 0.2 0.6039 0.9608)), none`
- `linear-gradient(to top, rgb(44, 148, 230), rgb(100, 196, 255))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Switzer | `--font-body` | webfont | 400, 500 | Navigation, body copy, captions, and interface controls. | Inter |
| Gambarino | `--font-display` | webfont | 400, 500 | Display and heading typography, plus selected editorial links. | Cormorant Garamond |
| Tanker | `--font-tanker` | webfont | 400 | Small decorative or special display accent, used sparingly. | Bebas Neue |

- **Switzer:** Clean sans-serif with regular and medium weights; keep case natural and avoid overly tight tracking.
- **Gambarino:** Elegant serif display voice; headings use regular weight and a lightly tight H1 setting.
- **Tanker:** Single-weight display face with a distinct, condensed character; keep to brief accents.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 500 | 1 | 0 | — | Gambarino | Oversized editorial display moments and prominent hero typography. |
| h1 | 48px | 400 | 1.2 | -0.01em | — | Gambarino | Primary page headline and major section titles. |
| h2 | 40px | 400 | 1.2 | 0 | — | Gambarino | Secondary feature and content section headings. |
| h3 | 36px | 400 | 1.11 | 0 | — | Gambarino | Smaller feature-card and subsection headings. |
| body | 20px | 400 | 1.4 | 0 | — | Switzer | Introductory and explanatory paragraphs. |
| caption | 14px | 400 | 1.43 | 0 | — | Switzer | Small metadata, labels, and supporting interface details. |
| nav | 16px | 400 | 1.5 | 0 | — | Switzer | Header navigation and standard interface labels. |
| link | 16px | 400 | 1.5 | 0 | — | Gambarino | Editorial links and selected text-link treatments. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 1, 4, 6, 7, 8, 9, 11, 12, 16, 17, 20, 22, 24, 27, 32, 48 px.
- Section rhythm 32px · element gap 12px · card padding 16px · max content width 768px.

The measured content max width is 768px, with a compact underlying spacing scale and section gaps. The hero is centered and visually expansive, with its navigation and headline aligned on the central axis and product artifacts floating around the main prompt interface. Following sections keep a white background and alternate centered title-and-copy bands with three-column feature areas. The long page uses generous vertical breathing room between content groups, while cards and controls remain compact. Keep section headings centered where shown and preserve the clear distinction between display copy and functional UI.

## Shape & elevation

- Radius: button `16px` · card `12px` · media `8px` · nav `9999px` · link `8px` · xs `3px` · sm `7px` · md `8px` · lg `9px` · xl `12px` · 2xl `16px` · pill `9999px`
- Shadow `hairline` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 2.354px 0.785px 0px, rgba(0, 0, 0, 0.01) 0px 1.569px 0.785px 0px, rgba(0, 0, 0, 0.05) 0px 0.785px 0.785px 0px`
- Shadow `inset` (button): `color(display-p3 0.0265 0.4186 0.7582) 0px -4.35px 0px 0px inset`
- Shadow `md` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`
- Shadow `inset-2` (other): `rgba(40, 71, 97, 0.063) 0px -4.8px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 2.4px 4.8px 0px`
- Shadow `sm-2` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.18) 0px 0px 0.492px 0px, rgba(0, 0, 0, 0.1) 0px 0.984px 2.953px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most of the page reads as flat white space. Product cards use fine pale borders, modest corner rounding, and subtle shadows that lift them just enough from the canvas. The hero prompt and floating media create depth through overlap and soft shadowing; avoid heavy panel fills or dramatic elevation on ordinary content.

## Imagery

The hero uses a blue-to-white atmospheric gradient behind floating browser artifacts, including document previews, a notebook, and the central prompt UI. Treat these as product demonstrations, not as a general color palette. Later sections mix interface screenshots, video, and compact image cards; keep their framing clean, softly rounded, and integrated into the white page rather than adding decorative illustration everywhere.

## Components

### Header navigation

Lightweight header over the hero with Deta branding, compact links, and white text against the blue backdrop.

### Hero prompt

Large white rounded interface panel with a short prompt, subdued utility actions, and a bright blue Create Note control.

### Download CTA

Prominent blue button with white Switzer text, generous horizontal padding, rounded corners, and a subtle inset lower edge.

### Feature cards

Compact white cards with black Switzer copy, soft rounded corners, pale borders, and restrained shadow.

### Centered section intro

Centered Gambarino headline followed by concise supporting copy on the white canvas.

### Message link

Team message presented as a lightly outlined link block with pale blue dotted border and rounded corners.

### FAQ area

Simple white-background FAQ and editorial content area using understated links and minimal dividers.

### Measured component styles

- **Primary button** (“Create Note”): background #009afc · text #000000 · radius 30.75px · padding 0px · 400 16px Switzer
- **Secondary button**: background #e5e5e5 · text #000000 · radius 9999px · padding 0px · 400 16px Switzer
- **Link** (“Frequently Asked Questions”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Switzer
- **Card** (“Citations Your notes include citations t”): transparent background · text #000000 · border 1px solid #f3f2f1 · radius 12px · padding 16px · 400 16px Switzer · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“Deta”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Switzer

## Do

- Keep the long-page canvas predominantly white.
- Use Gambarino for expressive headings and Switzer for functional text.
- Reserve blue gradients and saturated blue for the hero, product media, and primary actions.
- Center major hero and section-intro content as measured.
- Use product screenshots and interface artifacts as the main visual storytelling.
- Separate cards with soft borders and restrained shadows.

## Don't

- Do not turn the whole page into blue section bands.
- Do not use the illustration palette as a replacement brand system.
- Do not make body copy or navigation decorative serif.
- Do not add dense, high-contrast card grids where the page uses open white space.
- Do not use heavy drop shadows or thick outlines.
- Do not invent color values, spacing, or corner sizes outside the measurements.

## Agent prompt

Build a new Deta Surf page with a bright, editorial product aesthetic. Use Gallery White (#ffffff) as the dominant canvas, Soft Ink (#000000) for primary copy, and quiet gray tones for supporting text. Bring in Surf Blue (#0097ff) and the measured sky-blue family—Sky Glow (#4a9eff), Ocean Blue (#008ad7), and Open Sky (#43a3e2)—only for actions, hero atmosphere, and product imagery. Set headings in Gambarino or a close editorial serif and functional copy in Switzer or a clean sans-serif substitute. Favor centered section introductions, a spacious hero with layered browser artifacts, compact rounded product cards, faint Cloud Line (#e5e7eb) borders, and subtle shadows. Keep the overall page calm and white between product-led moments; make interface details legible and avoid decorative color bands.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width blue-sky hero with centered headline and product UI, framed by floating artifacts. | primary download action, interactive prompt preview | gradient backdrop, floating product cards, centered headline |
| 2 | announcement | Short centered press-quote strip directly after the hero. | social proof, external links | compact quotation, small publication marks |
| 3 | other | Centered heading and supporting copy on a white canvas. | feature introduction | serif heading, short sans-serif copy |
| 4 | video | Wide product video following the introductory statement. | product walkthrough | large video media |
| 5 | other | Centered section headline and short supporting line. | feature introduction | white space, serif heading |
| 6 | feature-grid | Three-column feature area with product media and supporting copy. | feature discovery | three-column grid, media cards |
| 7 | other | Centered heading and brief statement on white. | trust positioning | centered serif heading, minimal copy |
| 8 | feature-grid | Three-column feature presentation with media and supporting actions. | trust details, feature exploration | three-column grid, video and image media |
| 9 | testimonials | Centered testimonial section heading followed by social proof content. | social proof | centered title, open white canvas |
| 10 | feature-grid | Three-column feature-card grid under a centered section title. | feature discovery | rounded cards, small product images |
| 11 | faq | White-background FAQ and team-message content in a single-column area. | answer discovery, read team message | simple links, dotted message outline |
| 12 | cta | Centered closing headline, brief supporting text, and a prominent download action. | download conversion, social link | centered CTA, blue primary button |

## Source CSS custom properties (selected)

```css
--tw-text-opacity: 1;
```

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