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

# Telescope · Design System

> A quiet canvas for trusted recommendations

**Theme:** light · **Industry:** media · **Source:** https://telescope.fyi/ · **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._

Telescope turns personal recommendations into an editorial discovery experience, pairing a quiet warm canvas with scattered imagery and a vivid lime accent. The long page moves from an image-led introduction to a curated product collection and an expressive closing section.

## North star

Keep the interface quiet and spacious so that curated imagery feels discovered, not presented as a conventional storefront.

## Overview

The visual system is built on a warm off-white canvas (#f4f3f0), used across most of the page to keep attention on the content rather than on interface chrome. Near-black (#1a1915) carries the central headline, wordmark, and other primary text; muted gray (#82868e) is reserved for secondary information. A single sharp lime (#e3f794) punctuates the otherwise restrained palette, appearing in the sign-up control and as a large, graphic closing band. Beausite supplies the approachable, clean sans-serif voice for headings and body copy, while DM Mono gives compact uppercase captions and metadata an editorial index-card quality. Product and lifestyle photographs are placed as small, loose, asymmetric fragments in the hero, then organized into a more legible collection grid. The generous blank intervals between page sections make the long scroll feel deliberate and gallery-like. White is used as a distinct panel surface for the collection rather than as the default canvas.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Gallery | `#f4f3f0` | `--color-warm-gallery` | brand | Dominant page canvas behind the hero, long scroll, and most content. |
| Soft Ink | `#1a1915` | `--color-soft-ink` | neutral | Primary headline, wordmark, interface labels, and footer text. |
| Signal Lime | `#e3f794` | `--color-signal-lime` | accent | High-visibility sign-up accent and bold closing section band. |
| Quiet Slate | `#82868e` | `--color-quiet-slate` | semantic | Secondary and supporting text, including collection details and metadata. |
| Clean Paper | `#ffffff` | `--color-clean-paper` | surface | Distinct white surface behind the curated collection and select interface elements. |

### Semantic aliases

`--color-canvas` → `#f4f3f0` (Warm Gallery) · `--color-surface` → `#ffffff` (Clean Paper) · `--color-text` → `#1a1915` (Soft Ink) · `--color-text-muted` → `#82868e` (Quiet Slate)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1a1915` | `#f4f3f0` | 15.85:1 | AAA |
| `#1a1915` | `#ffffff` | 17.59:1 | AAA |
| `#82868e` | `#f4f3f0` | 3.29:1 | AA-large |
| `#82868e` | `#ffffff` | 3.65:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Beausite | `--font-body` | webfont | 400 | Main headline, collection headings, and body copy | Inter |
| DM Mono | `--font-mono` | webfont | 400 | Uppercase captions, eyebrows, and compact collection metadata | Space Mono |
| CM Geom | `--font-display` | webfont | 400 | Oversized display lettering | Bodoni Moda |

- **Beausite:** Regular weight; clean sans-serif with subtly tight tracking, especially in body text.
- **DM Mono:** Regular monospaced text; uppercase with generous tracking for small labels.
- **CM Geom:** Used sparingly for extreme-scale display treatment; measured as regular weight.

### Type scale — Custom (ratio ≈ 2.361, base 19px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 250px | 400 | 1 | -0.002em | — | CM Geom | Oversized display lettering for expressive, large-scale moments. |
| h1 | 57px | 400 | 1.15 | -0.007em | — | Beausite | Main hero headline and prominent section heading. |
| h2 | 23px | 400 | 1.05 | -0.017em | — | Beausite | Collection and supporting section titles. |
| body | 19px | 400 | 1.15 | -0.02em | — | Beausite | Introductory copy and recommendation descriptions. |
| caption | 12.5px | 400 | 1.1 | 0.03em | uppercase | DM Mono | Compact labels, item credits, and collection metadata. |
| eyebrow | 12.5px | 400 | 1.1 | 0.03em | uppercase | DM Mono | Uppercase pre-heading labels such as Collection. |
| code | 12.5px | 400 | 1.1 | 0.03em | uppercase | DM Mono | Small monospaced utility or metadata labels. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 6, 7, 10, 14, 19, 24, 29, 41, 48, 108, 135 px.
- Section rhythm 225px · element gap 48px · card padding — · max content width 602px.

The page uses a spacious single-column scroll with a measured content max width of 602px, while the hero imagery and closing color field read broadly across the canvas. The opening headline is centered amid dispersed image fragments; later collection content sits on a white panel with a denser multi-column product arrangement. Sections are separated by unusually generous vertical intervals, preserving a slow, gallery-like rhythm. Keep alignment varied but intentional: centered for the introduction, structured for product browsing, and expansive at the close.

## Shape & elevation

- Radius: xs `2px`
- No box shadows measured: the page is flat.

The interface is predominantly flat: no measured shadows or prominent borders define its surfaces. Separate the white collection panel from the warm canvas through color contrast and generous surrounding space. Use image placement and the sharp change to lime at the closing section as the primary layering devices.

## Imagery

Use real product and lifestyle photography rather than decorative illustration. In the hero, frame images as small, unevenly distributed glimpses with varied crops and ample space around them. In the collection, give product images room to read clearly in a structured grid, with concise names and maker details nearby. Keep imagery natural and editorial; avoid uniform mockup treatments.

## Components

### Floating hero imagery

A loose arrangement of small, asymmetric photographs around a centered headline on the warm canvas.

### Bottom-centered signup bar

A compact white bar anchors the hero, pairing the Telescope wordmark and login text with a lime sign-up control.

### Collection introduction

A small monospaced Collection eyebrow precedes a centered title, short description, and compact freshness metadata.

### Product collection grid

A white panel organizes product photos with short names and understated maker labels in a multi-column arrangement.

### Product quick action

Small, unobtrusive square controls sit alongside product imagery without overpowering the item.

### Lime closing field

A large vivid lime section uses a bold, graphic shape against the otherwise pale page.

### Measured component styles

- **Primary button**: transparent background · text #1a1915 · radius 0px · padding 0px · 400 19px Beausite

## Do

- Use #f4f3f0 as the default canvas.
- Keep primary text in #1a1915.
- Reserve #e3f794 for high-impact accents.
- Use DM Mono for compact uppercase metadata.
- Scatter hero photos asymmetrically with generous breathing room.
- Give the collection a distinct white surface.

## Don't

- Do not add decorative gradients or shadows.
- Do not turn the hero into a conventional banner.
- Do not use lime as a general background color.
- Do not crowd imagery with labels or controls.
- Do not make secondary copy compete with the headline.
- Do not replace editorial photography with generic illustrations.

## Agent prompt

Build a new discovery page in Telescope’s editorial style. Use Warm Gallery (#f4f3f0) as the main canvas, Soft Ink (#1a1915) for primary text, Quiet Slate (#82868e) for supporting details, and Clean Paper (#ffffff) for a distinct content surface. Apply Signal Lime (#e3f794) sparingly to a primary action or bold closing element. Use a clean Beausite-like sans for headlines and body copy, with a widely tracked monospaced face for uppercase metadata. Start with a centered message and loosely scattered real photographs, then shift to a clear, image-led collection grid. Preserve generous whitespace and long pauses between sections. Keep surfaces flat, avoid ornamental borders and shadows, and let image framing, typography, and negative space create the hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline on a warm canvas, surrounded by loosely scattered photographs and a bottom-centered signup bar. | Scroll cue, Login and sign-up actions | Floating image collage, Centered headline, Bottom-fixed style bar |
| 2 | gallery | Long, sparse visual transition on the warm canvas with a small set of media elements. | Long-scroll pacing | Open canvas, Sparse image and icon accents |
| 3 | category-nav | Compact collection heading and metadata on the warm canvas, leading into the white product surface. | Collection context, Freshness metadata | Small eyebrow, Category title, Compact metadata |
| 4 | product-grid | White, image-led product area arranged in a multi-column collection grid. | Browse products, Quick item action | Product photography, Item names, Maker labels, Small square controls |
| 5 | recommendations | Section heading aligned to the start with a supporting list and numerous recommendation images. | Explore recommendations | Left-aligned heading, Image-led content, Compact list |
| 6 | cta | Large closing section filled with lime and shaped by a bold, sweeping graphic edge. | Curate call to action | Full-width lime field, Oversized graphic treatment |

## Source CSS custom properties (selected)

```css
--ease-in-power1: cubic-bezier(.55,.085,.68,.53);
--ease-out-power1: cubic-bezier(.25,.46,.45,.94);
--ease-in-out-power1: cubic-bezier(.455,.03,.515,.955);
--ease-in-power2: cubic-bezier(.55,.055,.675,.19);
--ease-out-power2: cubic-bezier(.215,.61,.355,1);
--ease-in-out-power2: cubic-bezier(.645,.045,.355,1);
--ease-in-power3: cubic-bezier(.895,.03,.685,.22);
--ease-out-power3: cubic-bezier(.165,.84,.44,1);
--ease-in-out-power3: cubic-bezier(.77,0,.175,1);
--ease-in-power4: cubic-bezier(.755,.05,.855,.06);
--ease-out-power4: cubic-bezier(.23,1,.32,1);
--ease-in-out-power4: cubic-bezier(.86,0,.07,1);
--ease-in-circ: cubic-bezier(.6,.04,.98,.335);
--ease-out-circ: cubic-bezier(.075,.82,.165,1);
--ease-in-out-circ: cubic-bezier(.785,.135,.15,.86);
--ease-in-expo: cubic-bezier(.95,.05,.795,.035);
--ease-out-expo: cubic-bezier(.19,1,.22,1);
--ease-in-out-expo: cubic-bezier(1,0,0,1);
--ease-in-sine: cubic-bezier(.47,0,.745,.715);
--ease-out-sine: cubic-bezier(.39,.575,.565,1);
--ease-in-out-sine: cubic-bezier(.445,.05,.55,.95);
--ease-in-back: cubic-bezier(.6,-.28,.735,.045);
--ease-out-back: cubic-bezier(.175,.885,.32,1.275);
--ease-in-out-back: cubic-bezier(.68,-.55,.265,1.55);
--ease-bounce: cubic-bezier(.47,1.64,.41,.8);
--ease-out-bounce: cubic-bezier(.17,.67,.3,1.33);
--ease-out: cubic-bezier(.37,.31,0,1);
--ease-out-swift: cubic-bezier(.55,0,.1,1);
--ease-smooth-out: cubic-bezier(.4,0,0,1);
--ease-smooth-in-out: cubic-bezier(.75,0,.25,1);
--ease-out-gentle: cubic-bezier(.17,1.38,.35,.96);
--color-black: #1a1915;
--color-white: #fff;
--color-beige: #f4f3f0;
--color-blue: #0671ff;
--color-yellow: #e3f794;
--color-gray: #82868e;
--color-red: #d80000;
```

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