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

# Poly · Design System

> A cinematic workspace for intelligent file discovery

**Theme:** dark · **Industry:** ai · **Source:** https://poly.app/ · **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._

Poly opens with a full-bleed, warm-toned workspace photograph, placing a compact product message over the scene. High-contrast white typography and restrained calls to action keep the focus on the laptop display and the physical world around it.

## North star

Let one authentic, full-bleed workspace image carry the page, while keeping the overlaid message crisp, centered, and easy to act on.

## Overview

The first viewport uses a full-bleed photograph as its defining canvas: warm wood, paper, plants, and a laptop create a lived-in workspace rather than a sterile software backdrop. The measured palette identifies black, white, and pale gray as interface colors, but the screenshot’s dominant brown tones come from the photograph, not brand surfaces. White hero text sits over a darkened portion of the image for legibility. A centered headline and short supporting copy form a compact stack near the top, while two contrasting buttons sit directly below. The logo and small account actions occupy opposite ends of the top edge. Haffer Variable gives the headline a clean, contemporary shape; the page’s restrained typography leaves the product image to carry much of the visual detail. The composition is spacious in the upper area and dense around the large laptop near the bottom, with a small scroll cue inviting exploration.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas Black | `#000000` | `--color-canvas-black` | neutral | Measured dark canvas and muted-text value; the screenshot’s dark image areas are photographic, not flat brand panels. |
| Soft Chalk | `#f4f4f4` | `--color-soft-chalk` | neutral | Primary measured text and link color; use for the hero headline and copy over darker image areas. |
| Studio White | `#ffffff` | `--color-studio-white` | surface | Measured inverse surface; appears in the light hero action and interface contrast, not as the visible page canvas. |
| Quiet Silver | `#bebec0` | `--color-quiet-silver` | neutral | Measured border color for subtle separators and hairlines where interface edges need definition. |
| Graphite Muted | `#292930` | `--color-graphite-muted` | neutral | Muted text and link tone; also appears within measured dark gradients. |
| Fog Gradient | `#eaeaea` | `--color-fog-gradient` | neutral | Pale endpoint in measured text/link gradients; not a defining flat color in the screenshot. |
| Night Gradient | `#19191d` | `--color-night-gradient` | neutral | Dark endpoint in measured muted gradients; use only for restrained gradient treatments. |
| Ember Orange | `#f4824d` | `--color-ember-orange` | accent | Warm accent gradient endpoint; measured in link styling, while the screenshot’s warm setting is photographic. |
| Signal Vermilion | `#f42919` | `--color-signal-vermilion` | accent | Red-orange accent gradient endpoint; reserve for small emphasis rather than broad page fills. |

### Semantic aliases

`--color-canvas` → `#000000` (Canvas Black) · `--color-surface` → `#ffffff` (Studio White) · `--color-text` → `#f4f4f4` (Soft Chalk) · `--color-text-muted` → `#000000` (Canvas Black) · `--color-text-subtle` → `#292930` (Graphite Muted) · `--color-border` → `#bebec0` (Quiet Silver) · `--color-accent` → `#f4824d` (Ember Orange) · `--color-accent-2` → `#f42919` (Signal Vermilion)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f4f4f4` | `#000000` | 19.09:1 | AAA |
| `#f4f4f4` | `#ffffff` | 1.1:1 | fail |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#292930` | `#000000` | 1.45:1 | fail |
| `#292930` | `#ffffff` | 14.44:1 | AAA |
| `#f4824d` | `#000000` | 8.15:1 | AAA |
| `#f4824d` | `#ffffff` | 2.58:1 | fail |

### Gradients

- `linear-gradient(100.81deg, rgb(244, 244, 244) 7.89%, rgb(234, 234, 234) 91.16%)`
- `linear-gradient(100.81deg, rgb(41, 41, 48) 7.89%, rgb(25, 25, 29) 91.16%)`
- `linear-gradient(134.77deg, rgb(244, 130, 77) 25.1%, rgb(244, 41, 25) 74.9%)`
- `linear-gradient(100.81deg, rgba(41, 41, 48, 0.2) 7.89%, rgba(25, 25, 29, 0.2) 91.16%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-inter` | system | 400, 600 | Compact utility text and small account or action labels | Inter |
| Haffer | `--font-body` | webfont | 400 | Supporting body copy and concise explanatory text | Inter |
| Haffer Variable | `--font-display` | webfont | 450 | Large hero headline and display messaging | Inter |
| Bogue | `--font-bogue` | webfont | 400 | Secondary expressive serif accent, if needed for editorial emphasis | Cormorant Garamond |

- **Inter:** Measured weights 400 and 600; small labels remain legible and use no forced uppercase.
- **Haffer:** Measured regular weight; keep copy compact with slightly tight tracking.
- **Haffer Variable:** Measured weight 450; generous scale, tight tracking, and a close 1.1 line height.
- **Bogue:** Measured regular serif with limited overall share; keep usage occasional and subordinate.

### Type scale — Custom (ratio ≈ 1.871, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 52.5px | 450 | 1.1 | -0.02em | — | Haffer Variable | Main centered hero headline over the workspace photograph. |
| h2 | 45px | 450 | 1.1 | -0.02em | — | Haffer Variable | Large secondary section heading below the opening viewport. |
| body | 15px | 400 | 1.2 | -0.02em | — | Haffer | Short hero explanation and supporting product copy. |
| caption | 12px | 400 | 1.5 | 0 | — | Inter | Compact utility labels, button text, and scroll cue. |

OpenType features in use: `"liga", "ss04"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 3, 5, 6, 9, 12, 18, 24, 72, 168 px.
- Section rhythm 72px · element gap 6px · card padding — · max content width 1428px.

The opening section fills the viewport with edge-to-edge photography, without a visible card grid. A small brand mark anchors the upper left while login and waitlist actions align to the upper right. The headline, explanatory copy, and paired actions form a centered stack in the upper portion; the laptop dominates the lower half. Measured page max width is 1428px, section gap 72px, and density is comfortable. Keep these relationships rather than adding arbitrary spacing values.

## Shape & elevation

- Radius: link `8px` · xs `8px`
- Shadow `inset` (link): `rgba(0, 0, 0, 0.2) 2px 2px 5px 0px, rgba(0, 0, 0, 0.15) -2px -2px 4px 0px inset, rgba(255, 255, 255, 0.15) 2px 2px 4px 0px inset`
- Shadow `inset-2` (link): `rgba(0, 0, 0, 0.2) 2px 2px 5px 0px, rgba(0, 0, 0, 0.15) -2px -2px 4px 0px inset, rgb(255, 255, 255) 2px 2px 4px 0px inset`
- Shadow `sm` (section): `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 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`
- Motion: standard transition `0.3s ease` on interactive elements.

The composition is led by photography rather than raised cards. Keep interface elements visually light; the measured small section shadow is subtle, while the link treatment includes an inset-style shadow. Use borders sparingly, with the measured silver reserved for quiet separation rather than prominent outlines.

## Imagery

Use cinematic, realistic workspace photography as the primary visual: a laptop showing the product sits among desk tools, paper, plants, and wall references. Frame the scene wide and close enough for the screen interface to read as a product cue. Natural warm browns belong to the image, not the interface palette. The measured section also reports substantial video and image media.

## Components

### Brand mark

Small Poly logo at the upper-left edge, visible over the photograph without a separate solid header band.

### Account actions

Compact Login text and Join waitlist action sit together at the top right; utility typography is measured in Inter at 12px and 600 weight.

### Hero headline

Centered display line in Haffer Variable, measured at 52.5px with 450 weight, 1.1 line height, and tight tracking.

### Hero copy

Short centered explanation beneath the title, set in measured 15px Haffer body text.

### Primary and secondary actions

Download Poly uses a light button treatment; Watch Video contrasts with a dark treatment. Keep both compact and adjacent beneath the copy.

### Scroll cue

Small centered 'Scroll to explore' label near the bottom of the hero image signals continuation.

### Measured component styles

- **Link** (“Join waitlist”): transparent background · text #f4f4f4 · radius 7.5px · padding 12px · 600 12px Inter · shadow rgba(0, 0, 0, 0.2) 2px 2px 5px 0px, rgba(0, 0, 0, 0.15) -2px -2px 4px 0px inset,

## Do

- Use one immersive workspace photo as the opening canvas.
- Keep hero copy centered and concise.
- Place the logo left and utility actions right.
- Maintain strong text contrast over busy photography.
- Let warm color come from the photograph, not added panels.
- Keep the paired calls to action compact and adjacent.

## Don't

- Do not replace the hero photograph with a flat dark canvas.
- Do not treat photographic browns as brand palette colors.
- Do not add decorative cards around the hero copy.
- Do not crowd the headline with secondary content.
- Do not use large saturated accent fills across the page.
- Do not invent spacing, sizes, or radii beyond measured values.

## Agent prompt

Build a new Poly-style page around one full-bleed, realistic workspace photograph, with a laptop or product context integrated naturally into the scene. Treat the warm browns as imagery, not interface colors. Overlay the opening message in Soft Chalk (#f4f4f4), keeping a centered Haffer Variable-style headline and concise supporting copy legible against the photograph. Use Canvas Black (#000000) and Graphite Muted (#292930) only for restrained dark treatments; reserve Ember Orange (#f4824d) and Signal Vermilion (#f42919) for small accent details. Put the logo at upper left and compact account actions at upper right. Place a light primary action and dark secondary action together below the copy. Preserve generous image area, clear hierarchy, subtle borders, and a small bottom scroll cue. Avoid card-heavy layouts and invented measurements.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed workspace image; logo and account actions at top corners, centered hero copy above a laptop filling the lower area. | Download and watch-video actions, Scroll-to-explore cue | Overlay white typography, Light and dark paired buttons, Edge-aligned compact navigation |

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