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

# Cosmos · Design System

> A quiet canvas for discovering and collecting inspiration

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

Cosmos pairs a warm, restrained interface with a visual feed for discovering and organizing creative references. Oversized typography, soft section transitions, and image-led cards keep the experience calm while making exploration feel immediate.

## North star

Keep the interface quiet and warm so bold type and collected imagery—not decorative UI—lead discovery.

## Overview

The page uses a warm off-white canvas (#f7f5f3) for its spacious hero and footer, contrasted with broad white content sections. Near-black (#0d0d0d) anchors headings, navigation, and pill-shaped calls to action; muted grays make supporting labels and secondary brand names recede. Cosmos Oracle is used throughout, with bold, tightly tracked display text and compact supporting copy. The hero centers a two-line headline above a rounded search field and black CTA, with ample open space around them. Below, content moves into a horizontal feature-card row, a sparse typographic brand list, and a dense creator-card feed. Photography and video previews provide color and texture without changing the neutral interface. Thin pale borders define cards and controls; shadows remain subtle, preserving a mostly flat, gallery-like feel. Rounded pills and cards soften the otherwise crisp grid and editorial hierarchy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#f7f5f3` | `--color-warm-canvas` | brand | Main hero and footer canvas; also appears in selected soft card and control backgrounds. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Broad content-section backgrounds, search-field interior, and light card surfaces. |
| Cosmos Ink | `#0d0d0d` | `--color-cosmos-ink` | neutral | Primary headings, navigation, body emphasis, and black pill-shaped CTAs. |
| Soft Graphite | `#6e6a69` | `--color-soft-graphite` | semantic | Muted navigation and supporting text where a softer contrast than the main ink is needed. |
| Mist Text | `#9a9796` | `--color-mist-text` | semantic | Low-emphasis supporting copy and secondary text. |
| Quiet Line | `#e2e2e2` | `--color-quiet-line` | neutral | Fine outlines around inspiration cards and controls. |
| Faded Type | `#d0cdcd` | `--color-faded-type` | semantic | De-emphasized brand-link text, notably the secondary names in the brand list. |
| Pale Divider | `#dbd9d7` | `--color-pale-divider` | neutral | Additional faint card, button, and footer outlines; use as a subtle boundary, not a section fill. |

### Semantic aliases

`--color-canvas` → `#f7f5f3` (Warm Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#0d0d0d` (Cosmos Ink) · `--color-text-muted` → `#6e6a69` (Soft Graphite) · `--color-text-subtle` → `#9a9796` (Mist Text) · `--color-border` → `#e2e2e2` (Quiet Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0d0d0d` | `#f7f5f3` | 17.87:1 | AAA |
| `#0d0d0d` | `#ffffff` | 19.44:1 | AAA |
| `#6e6a69` | `#f7f5f3` | 4.92:1 | AA |
| `#6e6a69` | `#ffffff` | 5.35:1 | AA |
| `#9a9796` | `#f7f5f3` | 2.67:1 | fail |
| `#9a9796` | `#ffffff` | 2.9:1 | fail |

### Gradients

- `linear-gradient(lab(96.648 0.426352 1.20401) 0%, lab(96.648 0.426352 1.20401) 15%, color(srgb 0.968422 0.960817 0.952972 / 0.92) 26%, color(srgb 0.968422 0.960818 0.952972 / 0.78) 36%, color(srgb 0.968422 0.960817 0.9529`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| cosmosOracle | `--font-body` | webfont | 500, 400, 700 | All page typography, from display headings and navigation to buttons and captions. | Inter |

- **cosmosOracle:** Use a geometric, compact sans feel; display and headings are bold with tight negative tracking, while navigation and body copy favor medium weight.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 700 | 1 | -0.042em | — | cosmosOracle | Large, bold hero headline and prominent closing message. |
| h1 | 48px | 500 | 1 | -0.04em | — | cosmosOracle | Primary section headings and high-emphasis page titles. |
| h2 | 26px | 500 | 1.15 | -0.04em | — | cosmosOracle | Feature titles and secondary section headings. |
| body | 20px | 500 | 1.15 | -0.1em | — | cosmosOracle | Feature descriptions and prominent supporting copy. |
| caption | 16px | 400 | 1.4 | -0.125em | — | cosmosOracle | Card metadata, helper text, and small labels. |
| nav | 20px | 500 | 1.15 | -0.1em | — | cosmosOracle | Primary navigation and prominent menu labels. |

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 80 px.
- Section rhythm 32px · element gap 4px · card padding — · max content width —.

The page alternates a full-width warm hero and footer with white content bands. The hero centers its headline, search control, and CTA, while subsequent sections align content to the left. Feature cards form a horizontally browsable row; brand names use a sparse vertical list; creator recommendations become a dense multi-column card strip. Preserve generous open space around the hero and larger section transitions, with more compact spacing inside card groups. No measured maximum content width is available.

## Shape & elevation

- Radius: button `9999px` · card `16px` · nav `50%` · xs `8px` · sm `12px` · md `16px` · pill `9999px`
- Shadow `sm` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, 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 8px 0px`
- Shadow `lg` (card, footer): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.02) 0px 2px 12px 0px, rgba(0, 0, 0, 0.1) 0px 4px`
- Shadow `inset` (card): `rgba(255, 255, 255, 0.7) 0px 1px 1.5px 0px inset, rgba(0, 0, 0, 0.03) 0px -1px 1.5px 0px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rg`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat, with white content bands against a warm canvas. Thin pale outlines separate cards and controls; card shadows are subtle and should not create a floating-dashboard appearance. Use rounded card corners and pill controls for softness, reserving stronger layering for compact overlays or card previews.

## Imagery

Use collected reference imagery as the main visual content: editorial objects, interiors, fashion, and creator-saved images. Cards show cropped image previews with restrained borders and minimal chrome. Feature previews can include video or interface captures. Keep the hero mostly typographic and calm; the small multicolor search mark is a UI detail, not the core palette.

## Components

### Pill CTA

Near-black button with white text, a fully rounded silhouette, and no prominent shadow; used for sign-up and Follow actions.

### Search control

Centered white search field inside a softly outlined rounded container, paired with a circular action area.

### Feature preview cards

Horizontal row of image or video previews with rounded corners, short dark titles, and muted explanatory captions.

### Brand list

Sparse vertical brand names, mixing dark emphasis with faded gray text to distinguish prominence.

### Creator cards

Image-led cards with creator name, handle, and a black Follow pill; separated by fine pale borders.

### Get-the-app panel

Small QR-code download panel placed at the right edge of the hero and footer areas.

### Measured component styles

- **Primary button** (“Follow”): background #0d0d0d · text #ffffff · border 1px solid · radius 3.35544e+07px · padding 16px 20px · 500 14px cosmosOracle
- **Secondary button** (“Log in”): transparent background · text #6e6a69 · border 1px solid · radius 3.35544e+07px · padding 16px 24px · 500 15px cosmosOracle
- **Link** (“Phaidon”): transparent background · text #0d0d0d · radius 0px · padding 0px · 400 16px cosmosOracle
- **Input**: transparent background · text #0d0d0d · radius 0px · padding 0px · 400 20px cosmosOracle
- **Card** (“laurent del rey @laurentdelrey Follow”): transparent background · text #0d0d0d · border 1px solid #e2e2e2 · radius 16px · padding 0px · 400 16px cosmosOracle · 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** (“Sequence”): transparent background · text #0d0d0d · radius 0px · padding 0px · 500 20px cosmosOracle

## Do

- Use #f7f5f3 as the warm canvas for the hero and footer.
- Keep broad content areas white and visually quiet.
- Set primary headings and CTAs in Cosmos Ink (#0d0d0d).
- Use the measured Cosmos Oracle family or a close sans substitute consistently.
- Make primary actions fully rounded black pills with white labels.
- Let reference imagery carry color while keeping surrounding UI neutral.

## Don't

- Do not introduce a saturated brand accent across the interface.
- Do not fill every open area with cards or decoration.
- Do not use heavy shadows to lift ordinary cards.
- Do not make secondary captions as prominent as headings.
- Do not turn the editorial brand list into a dense logo wall.
- Do not mistake colors inside reference imagery for interface palette colors.

## Agent prompt

Build a new Cosmos-style page with a quiet, editorial discovery feel. Use Warm Canvas (#f7f5f3) for the hero and footer, Gallery White (#ffffff) for content bands, and Cosmos Ink (#0d0d0d) for headings, navigation, and pill CTAs. Use Soft Graphite (#6e6a69), Mist Text (#9a9796), and Faded Type (#d0cdcd) sparingly for secondary text; use Quiet Line (#e2e2e2) for fine borders. Set all typography in Cosmos Oracle or a close sans substitute, with bold tightly tracked display headings. Center a spacious hero around a headline, search field, and CTA; follow with image-led feature cards, a sparse brand list, and creator cards. Favor rounded shapes, restrained shadows, broad white space, and authentic editorial imagery. Avoid decorative gradients or loud interface colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Warm full-width canvas; centered headline, search field, and CTA beneath a slim top navigation. | Search-led discovery, Sign-up CTA, App download access | Centered bold headline, Rounded search control, Black pill button, Minimal navigation |
| 2 | feature-grid | White content band with a left-aligned section heading and horizontally browsable feature previews. | Browse feature carousel, Preview collection tools | Image and video cards, Short captions, Quiet card surfaces |
| 3 | category-nav | White band with a left-aligned title and vertically stacked brand names. | Browse by brand, Follow brand links | Large typographic links, Dark and faded text hierarchy |
| 4 | recommendations | White band with a heading, explore link, and horizontally arranged creator cards. | Explore creators, Follow profiles | Image-led cards, Creator metadata, Black Follow pills |
| 5 | stats | Sparse white band with a single muted line of supporting copy and a broad logo-image field. | Social proof | Low-contrast supporting text, Logo imagery |
| 6 | footer | Warm canvas with a large left-side invitation, account actions, link columns, and an app QR panel. | Sign up or log in, Browse utility links, Get the app | Oversized closing heading, Pill account actions, Compact link columns, QR panel |

## Source CSS custom properties (selected)

```css
--font-weight-light: 300;
--font-weight-book: 350;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
--color-black: lab(0% 0 0);
--color-gray-1000: lab(3.63782% -.00000745058 0);
--color-gray-975: lab(6.32376% 0 0);
--color-gray-950: lab(12.358% .483178 .174305);
--color-gray-900: lab(20.4326% .451043 .162351);
--color-gray-850: lab(14.1948% 0 0);
--color-gray-800: lab(28.077% .451058 .162232);
--color-gray-700: lab(38.404% 0 -.00000596046);
--color-gray-600: lab(49.308% 0 0);
--color-gray-500: lab(60.212% -.0000298023 0);
--color-gray-400: lab(70.884% 0 0);
--color-gray-300: lab(82.6468% 1.06323 .382411);
--color-gray-200: lab(88.632% -.0000298023 0);
--color-gray-100: lab(95.1978% .212193 .601578);
--color-gray-50: lab(98.6778% .212163 .601566);
--color-gray-0: lab(100% 0 0);
--color-white: lab(100% 0 0);
--color-warm-gray-light-600: lab(45.1621% 1.47596 1.15491);
--color-warm-gray-light-400: lab(62.6934% .986487 .930774);
--color-warm-gray-dark-400: lab(70.2337% 1.09535 .394309);
--color-warm-gray-dark-600: lab(59.5722% .773162 .278139);
--color-red-600: lab(45.142% 51.5013 46.3381);
--color-red-400: lab(64.192% 45.5196 38.864);
--color-green-600: lab(44.4773% -66.5849 34.1214);
--color-green-500: lab(38.9548% -27.1994 18.4429);
--color-green-400: lab(62.9183% -59.3567 33.111);
--color-green-300: lab(81.252% -14.9946 8.59857);
--color-blue-300: lab(46.1924% 23.7292 -79.4691);
--color-blue-400: lab(47.6265% 20.901 -75.9898);
--color-blue-500: lab(39.7458% 52.8191 -94.9762);
--color-blue-600: lab(29.6864% 68.3486 -111.829);
--color-orange-400: lab(64.192% 45.5196 38.864);
--color-orange-600: lab(45.142% 51.5013 46.3381);
--color-amber-400: lab(65.4542% 17.2887 77.3662);
--color-amber-600: lab(46.4326% 22.268 113.66);
```

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