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

# Pipe · Design System

> Human-centered finance on a confident dark canvas

**Theme:** dark · **Industry:** fintech · **Source:** https://pipe.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._

Pipe pairs a near-black canvas with restrained orange accents and direct, human-centered photography. A spacious split hero balances a concise message and a prominent demo action against an immersive photograph.

## North star

Keep the interface nearly black and spacious, letting crisp white copy, a single orange action, and authentic photography carry the page.

## Overview

Build around a nearly uninterrupted black canvas (#000000), using white (#ffffff) for the main headline and quiet gray (#808080) for supporting copy and subdued navigation. The orange (#e2572c) is a focused signal: highlight a short phrase in the headline, a demo link, and the primary call to action rather than spreading it across the page. Set copy in the measured Suisse-style sans serif with regular weights and clean, unembellished forms. The opening screen uses a broad two-part composition: headline, description, and CTA occupy the left, while a large, edge-clean photograph anchors the right. Keep generous negative space between navigation and hero content, and preserve clear separation between text and image. The overall treatment is flat and restrained: no decorative gradients or visible shadows. Image colors may be vivid, but they belong to the photograph, not the core interface palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Canvas | `#000000` | `--color-deep-canvas` | surface | Dominant page canvas and section background; also used for the primary CTA text. |
| Quiet Gray | `#808080` | `--color-quiet-gray` | neutral | Muted supporting copy and subdued navigation or link text. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | Main headline, logo, and high-contrast navigation and link text. |
| Signal Orange | `#e2572c` | `--color-signal-orange` | accent | Primary demo button, demo link, and selected phrase in the hero headline. |

### Semantic aliases

`--color-canvas` → `#000000` (Deep Canvas) · `--color-text` → `#ffffff` (Clean White) · `--color-text-muted` → `#808080` (Quiet Gray) · `--color-text-subtle` → `#000000` (Deep Canvas) · `--color-border` → `#000000` (Deep Canvas) · `--color-accent` → `#e2572c` (Signal Orange) · `--color-on-accent` → `#000000` (Deep Canvas)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#808080` | `#000000` | 5.32:1 | AA |
| `#e2572c` | `#000000` | 5.63:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __suisseFont_3f347b | `--font-body` | webfont | 400 | Headings, body copy, navigation, buttons, and links | Inter |

- **__suisseFont_3f347b:** Regular weight throughout; sentence case, restrained tracking, and clean sans-serif forms.

### Type scale — Custom (ratio ≈ 2.286, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 400 | 1.25 | 0.006em | — | __suisseFont_3f347b | Hero headline, with the opening brand phrase highlighted in orange. |
| body | 14px | 400 | 1.42 | 0 | — | __suisseFont_3f347b | Supporting hero description and explanatory page copy. |
| caption | 12px | 400 | 1.5 | 0 | — | __suisseFont_3f347b | Small secondary labels and compact supporting details. |
| button | 12px | 400 | 1.5 | 0 | — | __suisseFont_3f347b | Primary demo CTA and compact navigation buttons. |
| link | 13px | 400 | 1.4 | 0 | — | __suisseFont_3f347b | Navigation items and inline demo or resource links. |

OpenType features in use: `"kern"`.

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 12, 24, 35, 48, 72, 96 px.
- Section rhythm 48px · element gap 48px · card padding — · max content width 1344px.

Use a spacious, wide page frame with a measured maximum width of 1344px and left-aligned content. The opening hero is a split composition: text and CTA on the left, large full-bleed-style photography on the right. Keep the navigation on a single horizontal line above the hero, with generous open space separating it from the main content. The measured layout is spacious, with a 48px section gap and 8px base spacing unit; avoid dense stacks and decorative cards.

## Shape & elevation

- Radius: button `8px` · link `9999px` · xs `8px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

Keep surfaces flat against the black canvas; measured data reports no shadows or gradients. The screenshot shows no card framing or visible hairlines. Create hierarchy through spacing, contrast, and the difference between text and photography, rather than layered panels or ornamental effects.

## Imagery

Use large, natural documentary-style photography featuring people in real working environments. In the hero, frame the subject and surroundings as an immersive rectangular image beside the text, without a decorative border or overlay. The photograph can contribute strong blues and warm tones, but keep those colors confined to the image rather than extending them into interface chrome.

## Components

### Top navigation

A compact horizontal row on the black canvas; white logo and links are balanced by muted secondary navigation and a restrained orange Demo link.

### Hero headline

A regular-weight white headline aligned to the left, with the short opening phrase colored #e2572c.

### Supporting copy

Short, subdued gray text beneath the headline, set in the same regular sans serif.

### Primary demo CTA

Orange #e2572c button with black text, an 8px radius, and horizontal padding measured at 12px.

### Hero photograph

Large, clean-edged documentary photograph occupying the right side of the split hero.

### Measured component styles

- **Primary button** (“Book a demo”): background #e2572c · text #000000 · radius 8px · padding 0px 12px · 400 14px __suisseFont_3f347b
- **Link** (“Resources”): transparent background · text #ffffff · radius 0px · padding 0px · 400 13px __suisseFont_3f347b

## Do

- Use #000000 as the dominant canvas.
- Set primary headlines in #ffffff.
- Reserve #e2572c for focused emphasis and the main CTA.
- Keep supporting copy and secondary navigation subdued.
- Pair concise left-aligned copy with a large authentic photograph.
- Preserve generous negative space.

## Don't

- Do not introduce gradients or decorative shadows.
- Do not scatter orange across large areas.
- Do not add card borders absent from the reference.
- Do not crowd the hero with extra copy.
- Do not treat photograph colors as brand palette colors.
- Do not use heavy or all-caps typography.

## Agent prompt

Create a new Pipe-style fintech page with a spacious, nearly black #000000 canvas and flat surfaces. Use a clean regular-weight sans serif, such as Inter, with crisp #ffffff headlines and subdued #808080 supporting text. Treat #e2572c as a scarce signal for the primary action and a small amount of key text; use black text on the orange CTA. Build a clear horizontal navigation and a broad, left-aligned split hero: concise copy and action on one side, large documentary-style human photography on the other. Use generous negative space and the measured 8px spacing unit, keeping section rhythm open. Favor hierarchy from contrast, alignment, and image scale—not cards, gradients, shadows, or ornamental borders. Keep photograph colors inside the image, not as new interface colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Top horizontal navigation above a spacious split hero; left-aligned message and CTA sit beside a large right-hand photograph. | Primary demo CTA, Product navigation, Concise value proposition | Black canvas, Orange headline emphasis, White headline, Large documentary photo |

## Source CSS custom properties (selected)

```css
--chakra-ring-offset-color: #fff;
--chakra-ring-color: rgba(66, 153, 225, 0.6);
--chakra-ring-offset-shadow: 0 0 #0000;
--chakra-ring-shadow: 0 0 #0000;
--chakra-space-x-reverse: 0;
--chakra-space-y-reverse: 0;
--chakra-colors-transparent: transparent;
--chakra-colors-current: currentColor;
--chakra-colors-black: #000000;
--chakra-colors-white: #FFFFFF;
--chakra-colors-whiteAlpha-50: rgba(255, 255, 255, 0.04);
--chakra-colors-whiteAlpha-100: rgba(255, 255, 255, 0.06);
--chakra-colors-whiteAlpha-200: rgba(255, 255, 255, 0.08);
--chakra-colors-whiteAlpha-300: rgba(255, 255, 255, 0.16);
--chakra-colors-whiteAlpha-400: rgba(255, 255, 255, 0.24);
--chakra-colors-whiteAlpha-500: rgba(255, 255, 255, 0.36);
--chakra-colors-whiteAlpha-600: rgba(255, 255, 255, 0.48);
--chakra-colors-whiteAlpha-700: rgba(255, 255, 255, 0.64);
--chakra-colors-whiteAlpha-800: rgba(255, 255, 255, 0.80);
--chakra-colors-whiteAlpha-900: rgba(255, 255, 255, 0.92);
--chakra-colors-blackAlpha-50: rgba(0, 0, 0, 0.04);
--chakra-colors-blackAlpha-100: rgba(0, 0, 0, 0.06);
--chakra-colors-blackAlpha-200: rgba(0, 0, 0, 0.08);
--chakra-colors-blackAlpha-300: rgba(0, 0, 0, 0.16);
--chakra-colors-blackAlpha-400: rgba(0, 0, 0, 0.24);
--chakra-colors-blackAlpha-500: rgba(0, 0, 0, 0.36);
--chakra-colors-blackAlpha-600: rgba(0, 0, 0, 0.48);
--chakra-colors-blackAlpha-700: rgba(0, 0, 0, 0.64);
--chakra-colors-blackAlpha-800: rgba(0, 0, 0, 0.80);
--chakra-colors-blackAlpha-900: rgba(0, 0, 0, 0.92);
--chakra-colors-gray-50: #F7FAFC;
--chakra-colors-gray-100: #EDF2F7;
--chakra-colors-gray-200: #E2E8F0;
--chakra-colors-gray-300: #CBD5E0;
--chakra-colors-gray-400: #A0AEC0;
--chakra-colors-gray-500: #718096;
--chakra-colors-gray-600: #4A5568;
--chakra-colors-gray-700: #2D3748;
--chakra-colors-gray-800: #1A202C;
--chakra-colors-gray-900: #171923;
```

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