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

# Public · Design System

> Editorial investing, framed in confident black and white

**Theme:** light · **Industry:** fintech · **Source:** https://public.com/ · **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._

Public presents a broad investing platform through restrained editorial typography, high-contrast black-and-white sections, and detailed product UI. Spacious white layouts lead into dark feature bands, using concise navigation and clear calls to action to balance brand storytelling with financial-product detail.

## North star

Let editorial serif headlines and spacious black-and-white layouts lead; use product imagery and restrained blue only to clarify the investing story.

## Overview

The page uses Gallery White (#ffffff) as its main canvas, letting large Denton serif headlines create an editorial, confident first impression. Ink (#000000) anchors compact navigation, pill-shaped CTAs, text, and several full-width feature sections; the alternating black bands make product claims and security information feel distinct without adding a busy colour system. Inter carries most interface and body copy, while Invest Pro appears in selected headings and CTA labels. The layout moves between generous single-column storytelling, centered asset links, and multi-column product cards, with broad media panels and substantial white space separating content groups. Screenshots and interface mock-ups supply most of the visual detail; restrained blue accents are secondary rather than a dominant page-wide treatment. Pale neutral surfaces and fine borders organize cards and legal material while keeping the overall composition flat and legible.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, light content sections, and reversed text on black buttons. |
| Slate Harbor | `#516880` | `--color-slate-harbor` | semantic | Primary muted copy, including supporting text and footer descriptions. |
| Ink | `#000000` | `--color-ink` | brand | Headlines, body text, black CTA pills, and full-width dark feature and trust sections. |
| Cloud Tint | `#f1f4f7` | `--color-cloud-tint` | surface | Soft card and section surfaces, subtle badges, and fine separators. |
| Silver Haze | `#a8b4bf` | `--color-silver-haze` | semantic | Secondary muted text and low-emphasis supporting interface details. |
| Graphite Edge | `#262626` | `--color-graphite-edge` | neutral | Subtle card and footer outlines, especially on dark or inverse surfaces. |
| Soft Pewter | `#bfbfbf` | `--color-soft-pewter` | neutral | Appears in section gradients; treat as a subtle transition, not a core brand fill. |
| Frosted Slate | `#dce2ea` | `--color-frosted-slate` | neutral | Low-emphasis text and interface details, including footer and button-related states. |
| Mist Line | `#e9edf3` | `--color-mist-line` | neutral | Subtle footer dividers and low-contrast border details. |
| Midnight Slate | `#1b222c` | `--color-midnight-slate` | neutral | Dark-toned navigation text and compact interface labels. |
| Signal Cobalt | `#0027b3` | `--color-signal-cobalt` | accent | Sparse blue accent, most clearly visible in footer links and brand details. |
| Harbor Blue | `#566e8c` | `--color-harbor-blue` | neutral | Occasional muted navigation detail; not a broad background or CTA colour. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Ink) · `--color-surface-2` → `#f1f4f7` (Cloud Tint) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#516880` (Slate Harbor) · `--color-text-subtle` → `#a8b4bf` (Silver Haze) · `--color-border` → `#f1f4f7` (Cloud Tint) · `--color-accent` → `#0027b3` (Signal Cobalt)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f1f4f7` | 19.02:1 | AAA |
| `#516880` | `#ffffff` | 5.77:1 | AA |
| `#516880` | `#000000` | 3.64:1 | AA-large |
| `#516880` | `#f1f4f7` | 5.22:1 | AA |
| `#a8b4bf` | `#ffffff` | 2.11:1 | fail |
| `#a8b4bf` | `#000000` | 9.95:1 | AAA |
| `#a8b4bf` | `#f1f4f7` | 1.91:1 | fail |
| `#0027b3` | `#ffffff` | 10.82:1 | AAA |
| `#0027b3` | `#000000` | 1.94:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 0.22%, rgba(0, 0, 0, 0.25) 36.56%, rgb(0, 0, 0) 46.55%), linear-gradient(0deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 100%), linear-gradient(rgba(0, 0, 0, 0) 0.22%, rgba(0, 0, 0, 0.25) 36.56%, rgb`
- `linear-gradient(to right, rgb(241, 244, 247) 0%, rgb(241, 244, 247) 49.9%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%)`
- `conic-gradient(rgba(255, 255, 255, 0.95) 0deg, rgba(255, 255, 255, 0) 80deg, rgba(255, 255, 255, 0) 280deg, rgba(255, 255, 255, 0.95) 360deg)`
- `linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.08) 28.81%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 600 | Primary body copy, navigation, captions, and many compact interface labels. | Inter |
| Invest Pro | `--font-invest-pro` | webfont | 400, 500 | Selected product headings and CTA labels. | Inter |
| Denton | `--font-display` | webfont | 300 | Large editorial hero and feature headings, including asset-category links. | Instrument Serif |

- **Inter:** Use regular and semibold; keep interface copy compact, sentence-case, and unornamented.
- **Invest Pro:** Measured regular and medium weights; retain a clean sans-serif character and avoid display styling.
- **Denton:** Light serif weight, natural tracking, mixed case; use for expressive large-scale headlines.

### Type scale — Augmented Fourth (ratio ≈ 1.388, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 52px | 300 | 1.11 | 0 | — | Denton | Oversized Denton hero headline introducing the investing platform. |
| h2 | 48px | 300 | 1.12 | 0 | — | Denton | Large serif section headlines for feature and product narratives. |
| h3 | 24px | 400 | 1.17 | 0 | — | Invest Pro | Product or feature headings in Invest Pro. |
| h4 | 20px | 400 | 1.2 | 0 | — | Invest Pro | Smaller feature and card headings in Invest Pro. |
| body | 14px | 400 | 1.42 | 0 | — | Inter | Main explanatory copy and product descriptions in Inter. |
| caption | 12px | 400 | 1.5 | 0 | — | Inter | Compact supporting labels, notes, and secondary content. |
| nav | 14px | 400 | 1.5 | 0 | — | Inter | Header navigation and primary menu labels in Inter. |
| link | 11px | 400 | 1.54 | 0 | — | Inter | Small inline and card links, including learn-more actions. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 1, 2, 3, 4, 6, 8, 9, 12, 14, 16, 18, 20, 24, 32, 40, 56 px.
- Section rhythm 32px · element gap 24px · card padding — · max content width 1376px.

The page uses a measured maximum content width of 1376px, with the hero and video media spanning a broad centered container. The composition alternates between single-column editorial sections, a centered multi-line asset-category navigation, card-led feature grids, and black three-column product bands. Headings are often centered in feature sections, while trust and footer content align to the start. Section spacing is generous, with comfortable density; cards sit in light neutral groupings rather than tightly packed dashboard grids.

## Shape & elevation

- Radius: button `9999px` · card `16px` · badge `6px` · link `6px` · xs `1px` · sm `4px` · md `6px` · lg `8px` · xl `16px` · pill `9999px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.08) 0px 1px 10px 0px`
- Shadow `xl` (button): `rgba(255, 196, 250, 0.25) 8px -8px 20px 0px, rgba(56, 205, 255, 0.25) -8px 8px 30px 0px`
- Motion: standard transition `0.1s ease-in-out` on interactive elements.

Most surfaces are flat, with whitespace and alternating black and white section bands doing the structural work. Cards use restrained outlines or pale backgrounds rather than heavy shadows; the measured card radius is 16px. The main CTA is a black pill, while occasional product imagery sits above a subtle card shadow. Thin dividers provide structure in dark trust sections.

## Imagery

Large, wide video and photographic panels anchor the hero and closing account-funding section. Product UI screenshots and interface mock-ups recur throughout the feature cards, giving the page a concrete platform-demo quality. The imagery is framed cleanly with rounded media corners and ample surrounding white or black space. Dark product visuals belong to the media itself; avoid treating their screen colours as the page palette.

## Components

### Header navigation

Compact black Inter menu links across the top, with the Public mark at left and black login and outlined sign-up pills at right.

### Primary CTA

Black, fully rounded button with white Invest Pro text; the measured Get started control uses a 100px radius.

### Asset category links

Centered multi-line row of large Denton serif asset names, separated by small dot-like dividers and occasional compact yield badges.

### Product feature cards

Light cards with concise heading and copy, a product screenshot, and a small learn-more link; measured card radius is 16px.

### Dark feature band

Full-width black section with light serif headline and aligned feature columns, fine outlines, product visuals, and compact links.

### Trust and legal footer

White link directory above a pale legal-information band, with muted compact copy, divider lines, and sparse blue link accents.

### Measured component styles

- **Primary button** (“Sign up”): background #000000 · text #ffffff · border 1px solid #ffffff · radius 999px · padding 0px 16px · 400 14px Invest Pro
- **Secondary button** (“Apply now”): transparent background · text #ffffff · border 1px solid #1a1a1a · radius 100px · padding 0px 40px · 500 16px Invest Pro · shadow rgba(255, 196, 250, 0.25) 8px -8px 20px 0px, rgba(56, 205, 255, 0.25) -8px 8px 3
- **Link** (“Stocks Build your portfolio with over 9,”): transparent background · text #0000ee · radius 0px · padding 8px · 400 16px Inter
- **Card** (“Market briefing Get a detailed breakdown”): background #fafafa · text #000000 · radius 16px · padding 0px · 400 16px Inter
- **Badge** (“New”): background #000000 · text #ffffff · radius 4px · padding 0px 4px · 400 10px Inter
- **Navigation item** (“Products Agents Reserve Resources Compan”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Inter

## Do

- Use Denton-style serif headlines for the hero and key editorial moments.
- Keep the page canvas white and reserve black for text, CTAs, and select section bands.
- Give large headlines and media generous surrounding whitespace.
- Use Inter for readable navigation, body copy, and compact labels.
- Show product interfaces in clean, restrained cards.
- Use blue accents sparingly and only where the measured palette calls for them.

## Don't

- Do not make blue the dominant colour or use unmeasured colours.
- Do not turn every section into a dark panel.
- Do not replace the editorial serif headlines with generic heavy sans-serif display type.
- Do not crowd the hero with extra controls or dense copy.
- Do not add strong gradients or decorative shadows across ordinary cards.
- Do not treat colours inside product mock-ups as core brand colours.

## Agent prompt

Build a new Public-style investing page with an editorial, high-contrast visual system. Use Gallery White (#ffffff) as the main canvas and Ink (#000000) for headlines, body text, pill CTAs, and selected full-width feature bands. Set large headlines in a light Denton-like serif, with Inter for navigation, body copy, and compact labels; use a restrained Invest Pro-like sans-serif for selected product headings and buttons. Keep the content centered in a broad max-width layout, alternating spacious single-column storytelling with clean product-card grids and occasional dark feature sections. Use pale Cloud Tint (#f1f4f7) for subtle surfaces and borders. Apply Signal Cobalt (#0027b3) sparingly. Feature genuine-looking investing UI imagery, preserve whitespace, and keep elevation understated.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned serif headline and benefit row above a wide, rounded video panel. | primary signup action, quick benefit scan | editorial headline, black pill CTA, wide media frame |
| 2 | category-nav | Centered, multi-line collection of large asset links on white. | browse by asset, direct category links | serif link labels, inline separators, yield badges |
| 3 | content-feed | Horizontal feature feed with intro at left and compact cards to the right. | carousel browsing, learn more links | product thumbnails, small card copy, round carousel controls |
| 4 | product-showcase | Centered headline and description above a wide product-interface panel. | learn more action, product demonstration | light showcase surface, dashboard screenshot, centered copy |
| 5 | product-showcase | Centered explanatory content above a broad generated-assets interface. | learn more action, feature discovery | product screenshot, light background, serif section title |
| 6 | feature-grid | Black band with a centered headline and three aligned feature columns. | compare trading benefits, learn more links | inverse palette, outlined columns, dark product visuals |
| 7 | product-showcase | Centered headline and short description above a product interface visual. | learn more action, tax strategy discovery | light product panel, interface screenshot, spacious layout |
| 8 | stats | Minimal centered statement with short supporting copy on white. | benefit-led message, account caveat | large serif heading, small accent icon, open whitespace |
| 9 | cta | Black section with left-aligned eligibility message and benefits panel. | check eligibility, apply now | inverse typography, benefit checklist, glowing product-style panel |
| 10 | feature-grid | Black trust section with a lead heading and three-column information grid. | review trust details, follow disclosure links | thin dividers, compact trust copy, dark photographic detail |
| 11 | cta | Black split layout with signup message at left and device imagery at right. | sign up, read review proof | serif headline, device mock-up, review snippet |
| 12 | footer | White multi-column link directory with contact and brand details. | navigate product links, contact support | column headings, social and app badges, brand mark |
| 13 | footer | Pale blue-gray full-width band filled with dense legal text and links. | read disclosures, open policy links | compact muted text, inline links, low-contrast background |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--font-family-heading: 'Denton', 'Times New Roman', serif;
--font-family-text: Inter, Helvetica, Arial, sans-serif;
--font-family-alpha-mono: 'Alpha Mono', ui-monospace, 'Courier New', monospace;
--font-family-graphik: 'Graphik', Helvetica, Arial, sans-serif;
--font-family-invest-pro: 'Invest Pro', Helvetica, Arial, sans-serif;
--font-family-denton: 'Denton', 'Times New Roman', serif;
--h1-font-size: 76px;
--h2-font-size: 52px;
--h3-font-size: 48px;
--h4-font-size: 32px;
--h5-font-size: 24px;
--h6-font-size: 20px;
--xxl-font-size: 102px;
--xl-font-size: 92px;
--text-larger-font-size: 20px;
--text-larger-line-height: 30px;
--text-large-font-size: 18px;
--text-large-line-height: 27px;
--text-regular-font-size: 16px;
--text-regular-line-height: 24px;
--text-small-font-size: 14px;
--text-small-line-height: 21px;
--text-tiny-font-size: 12px;
--text-tiny-line-height: 18px;
--blue-brand: #00379a;
--color-text: #2b3746;
--color-heading: #000;
```

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