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

# Slash · Design System

> Quietly confident finance, framed in dark editorial contrast

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

Slash pairs a near-black canvas and restrained serif headlines with practical, product-focused financial storytelling. The homepage moves from an immersive card hero through capability, trust, pricing, and editorial sections, using grayscale imagery and sparse copper accents.

## North star

Keep the page almost entirely near-black, then use editorial serif headlines and carefully lit financial-product imagery to create contrast without visual noise.

## Overview

The visual system is anchored by Canvas Black (#040406), used across nearly the entire page, with a slightly lifted footer surface (#08080a) and dark media panels separating content without relying on bright section bands. White (#ffffff) carries the main headlines, navigation, and high-contrast calls to action; muted gray text supports descriptions and dense legal content. Copper (#cc9166) is a restrained editorial-link accent, not a broad UI fill. IvyPresto-style serif typography gives the large headlines an editorial, financial-publication character, while Inter handles navigation, controls, captions, and body copy. The hero combines a left-aligned message and email form with a large, darkened card-and-phone photograph. Below, centered feature introductions alternate with modular media cards, metrics, pricing columns, FAQ rows, and article tiles. Generous vertical intervals keep the long page calm; thin borders and rounded pills define controls and badges without adding prominent shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas Black | `#040406` | `--color-canvas-black` | brand | Primary page canvas and dominant section background; also anchors dark image fades. |
| Editorial Copper | `#cc9166` | `--color-editorial-copper` | accent | Restrained accent for editorial links; avoid using it as a large surface fill. |
| Quiet Slate | `#5e616e` | `--color-quiet-slate` | semantic | Low-emphasis supporting copy, especially footer text and secondary descriptions. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Primary headlines, navigation, links, and the filled high-contrast CTA. |
| Lifted Charcoal | `#08080a` | `--color-lifted-charcoal` | surface | Slightly raised footer and dark interface surface against the page canvas. |
| Line Silver | `#9b9b9b` | `--color-line-silver` | semantic | Measured border tone; use sparingly for subtle separators and outlined details. |
| Soft Pewter | `#acafb9` | `--color-soft-pewter` | semantic | Secondary body copy and subdued link text. |
| Navigation Haze | `#9194a1` | `--color-navigation-haze` | neutral | Muted navigation and lower-priority interface labels. |
| Night Graphite | `#121317` | `--color-night-graphite` | surface | Dark end of a subtle media or interface gradient. |
| Shadow Graphite | `#0b0c0e` | `--color-shadow-graphite` | surface | Gradient endpoint for dark image and interface treatments. |
| Panel Charcoal | `#18181b` | `--color-panel-charcoal` | surface | Raised media-panel tone visible behind product and interface imagery. |
| Warm Umber | `#2e2a26` | `--color-warm-umber` | surface | Warm gradient detail seen in selected section treatments, not a primary brand field. |
| Border Coal | `#1c1d22` | `--color-border-coal` | surface | Dark control and footer details, including low-contrast outlined elements. |
| Absolute Black | `#000000` | `--color-absolute-black` | surface | Deepest image shadows and selected section or media details. |
| Cool Silver | `#c7c9d1` | `--color-cool-silver` | neutral | Occasional brighter secondary copy within supporting content. |
| Muted Steel | `#777a88` | `--color-muted-steel` | neutral | Badges, small labels, buttons, and tertiary links. |

### Semantic aliases

`--color-canvas` → `#040406` (Canvas Black) · `--color-surface` → `#08080a` (Lifted Charcoal) · `--color-surface-2` → `#18181b` (Panel Charcoal) · `--color-surface-3` → `#000000` (Absolute Black) · `--color-text` → `#ffffff` (Paper White) · `--color-text-muted` → `#5e616e` (Quiet Slate) · `--color-text-subtle` → `#acafb9` (Soft Pewter) · `--color-border` → `#9b9b9b` (Line Silver) · `--color-accent` → `#cc9166` (Editorial Copper)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#040406` | 20.48:1 | AAA |
| `#ffffff` | `#08080a` | 20.01:1 | AAA |
| `#ffffff` | `#18181b` | 17.72:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#5e616e` | `#040406` | 3.33:1 | AA-large |
| `#5e616e` | `#08080a` | 3.25:1 | AA-large |
| `#5e616e` | `#18181b` | 2.88:1 | fail |
| `#5e616e` | `#000000` | 3.41:1 | AA-large |
| `#acafb9` | `#040406` | 9.35:1 | AAA |
| `#acafb9` | `#08080a` | 9.14:1 | AAA |

### Gradients

- `linear-gradient(201deg, rgb(18, 19, 23) 13.96%, rgb(11, 12, 14))`
- `linear-gradient(to top, rgb(4, 4, 6), rgba(4, 4, 6, 0.2), rgba(0, 0, 0, 0))`
- `linear-gradient(rgba(0, 0, 0, 0), rgb(46, 42, 38))`
- `linear-gradient(to top, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __Inter_f367f3 | `--font-body` | webfont | 400, 500, 300, 600, 700 | Interface and supporting copy: navigation, body text, buttons, labels, and links. | Inter |
| __ivyPresto_6eafe2 | `--font-display` | webfont | 400, 500 | Display and large editorial headings throughout the hero and major sections. | Cormorant Garamond |

- **__Inter_f367f3:** Use measured weights from 300–700; compact negative tracking on body and controls. Keep interface text in sentence case.
- **__ivyPresto_6eafe2:** Regular-weight serif with open leading and subtle positive tracking; use for prominent display lines, not dense UI.

### Type scale — Perfect Fourth (ratio ≈ 1.355, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 400 | 1.05 | 0.01em | — | __ivyPresto_6eafe2 | Oversized editorial display statements in major hero or section moments. |
| h1 | 52px | 400 | 1.13 | 0.01em | — | __ivyPresto_6eafe2 | Primary hero headline and page-level statement. |
| h2 | 44px | 400 | 1.38 | 0.01em | — | __ivyPresto_6eafe2 | Major section headings, often centered or split across lines. |
| h3 | 24px | 500 | 1.38 | -0.04em | — | __Inter_f367f3 | Feature-card headings and prominent subsection titles. |
| h4 | 20px | 500 | 1.38 | -0.04em | — | __Inter_f367f3 | Compact card, pricing, and FAQ subsection headings. |
| body | 14px | 400 | 1.5 | -0.02em | — | __Inter_f367f3 | Descriptions, feature explanations, and standard paragraph copy. |
| caption | 13px | 600 | 1 | -0.02em | — | __Inter_f367f3 | Small uppercase-like category labels, dates, and compact metadata. |
| button | 16px | 400 | 1.38 | -0.02em | — | __Inter_f367f3 | CTA labels and other interactive control text. |
| nav | 16px | 400 | 1.38 | -0.02em | — | __Inter_f367f3 | Top-level navigation items and menu labels. |
| link | 20px | 500 | 1.38 | -0.04em | — | __Inter_f367f3 | Prominent inline links and editorial or product destinations. |

## Spacing & layout

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

Use a spacious, long-form desktop layout within the measured 1152px maximum content width. The 12-column hero aligns its copy and email capture to the left while full-bleed product media occupies the remaining canvas. Later sections shift among centered introductions, two- to four-column feature arrangements, split trust and security areas, and two-column pricing. Keep generous measured section intervals and avoid crowding; use compact gaps only inside cards, lists, and controls. The footer is denser and organized into multiple link columns.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · media `10px` · badge `9999px` · nav `2px` · link `2px` · xs `2px` · sm `8px` · md `10px` · lg `12px` · pill `9999px`
- Shadow `hairline` (media): `rgb(255, 255, 255) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is predominantly flat and relies on tonal separation rather than drop shadows. Use near-black surfaces and media panels for layering, with thin, low-contrast borders around pills, badges, FAQ rows, and controls. A measured hairline media shadow can define an edge, but avoid floating-card effects or conspicuous elevation.

## Imagery

Lead with cinematic product photography: a phone displaying a Slash card on a textured pedestal, framed large and darkened into the canvas. Customer videos and testimonials add human proof, while later sections use product-card photography, interface mockups, and chart-like visuals. Keep imagery low-key, with controlled highlights and black fades; grayscale logos and subdued thumbnails preserve the page's monochrome atmosphere.

## Components

### Announcement and navigation

A narrow announcement strip sits above a dark horizontal nav; white brand and primary links contrast with muted secondary items and a bordered pill CTA.

### Hero email capture

Pair a large serif headline and short muted description with a pill-shaped email field and compact white Get Started button; place over the dark product-photo hero.

### Trust media cards

Use a row of customer video or image cards with dark overlays, small attribution, and concise proof points beneath.

### Feature media tiles

Arrange product capabilities in dark modular panels with concise sans-serif headings, subdued copy, and embedded product or interface imagery.

### Pricing columns

Present Free and Pro in side-by-side plans with prominent prices, short descriptions, outlined or white pill actions, and dense checkmarked feature lists.

### FAQ rows

Set a serif section heading beside a stacked list of question rows with fine separators and compact disclosure indicators.

### Editorial cards

Show a horizontal article feed with wide image thumbnails, small copper category links, dates, and readable white titles.

### Measured component styles

- **Primary button** (“Get Started”): background #ffffff · text #000000 · radius 6px · padding 0px 32px · 600 15px __Inter_f367f3
- **Secondary button** (“Get Started”): transparent background · text #ffffff · border 1px solid #464853 · radius 9999px · padding 0px 14px · 500 14px __Inter_f367f3
- **Link** (“Checking and Treasury Free domestic wire”): transparent background · text #ffffff · radius 2px · padding 0px · 400 16px __Inter_f367f3
- **Input**: transparent background · text #ffffff · radius 9999px · padding 10px 10px 10px 14px · 400 16px __Inter_f367f3
- **Badge** (“Silver — $1M+”): transparent background · text #ffffff · border 1px solid #232324 · radius 9999px · padding 8px 12px · 500 12px __Inter_f367f3
- **Navigation item** (“FAQ”): transparent background · text #9194a1 · radius 2px · padding 0px · 400 16px __Inter_f367f3

## Do

- Keep the page canvas at #040406 and reserve #08080a for subtle surface shifts.
- Set major statements in an editorial serif and supporting UI in Inter.
- Use white as the primary text and CTA color, with muted grays for hierarchy.
- Keep #cc9166 limited to small editorial or contextual accents.
- Use cinematic dark product photography with controlled highlights.
- Preserve generous section breathing room and sparse, low-contrast borders.

## Don't

- Do not introduce bright section backgrounds or saturated accent colors.
- Do not use copper as a large CTA fill or dominant surface.
- Do not replace the serif display voice with a uniform sans-serif system.
- Do not add heavy shadows, glossy cards, or elevated dashboard-style panels.
- Do not crowd the page with dense grids or excessive decorative elements.
- Do not brighten product photography until it competes with headlines.

## Agent prompt

Build a new Slash-style fintech page on Canvas Black (#040406), with Lifted Charcoal (#08080a) reserved for subtle footer or panel separation. Use large IvyPresto-like serif headings and Inter for navigation, body copy, labels, and controls. Keep primary text Paper White (#ffffff), secondary copy in Soft Pewter (#acafb9) or Quiet Slate (#5e616e), and use Editorial Copper (#cc9166) only for small editorial links. Compose the page within the measured 1152px content width, with spacious section rhythm, restrained borders, and low visual density. Lead with cinematic dark financial-product imagery; follow with modular feature media, trust proof, pricing, FAQ, and editorial content. Favor flat tonal layering, pill-shaped CTAs, subtle dividers, and clearly tiered text. Avoid bright fills, heavy shadows, and decorative clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned copy and email capture over full-bleed hero media. | email signup, primary CTA, review proof | serif headline, pill form, dark product photography, customer logo row |
| 2 | testimonials | Section heading above a three-column row of customer media and proof points. | social proof, customer stories | video cards, image overlays, small attributions |
| 3 | feature-grid | Centered introduction followed by a two-column feature arrangement and wide card showcase. | feature discovery, product benefits | dark media cards, banking interface imagery, card showcase |
| 4 | feature-grid | Centered heading and introduction above three capability columns. | capability overview, product exploration | three media tiles, interface mockups, compact captions |
| 5 | testimonials | Single-column centered quote with attribution and carousel controls. | testimonial carousel, quote attribution | large serif quote, small profile detail, pagination dots |
| 6 | feature-grid | Metrics lead into a centered feature introduction and mixed three-plus-two tile grid. | performance proof, feature discovery | metrics row, dark interface mockups, mixed-width cards |
| 7 | feature-split | Centered section introduction above a split media-and-accordion composition. | security reassurance, expandable details | product illustration, accordion rows, muted descriptions |
| 8 | pricing | Left-aligned introduction above two side-by-side plan columns. | plan comparison, signup CTA | Free and Pro columns, large prices, checklists, pill buttons |
| 9 | logo-cloud | Centered partner caption and subdued logo groups. | trust proof | monochrome logos, compact grouping |
| 10 | faq | Two-column layout with heading and contact prompt beside stacked questions. | accordion disclosure, contact support | serif heading, divided question rows, chevron indicators |
| 11 | content-feed | Section heading and description above a horizontal article-card carousel. | editorial browsing, carousel navigation | thumbnail cards, copper category links, date and read time |
| 12 | cta | Centered headline, supporting line, and email capture form. | email signup, conversion CTA | serif heading, pill input, white action button, soft dark gradient |
| 13 | footer | Dark footer with multiple link columns and dense legal details below. | site navigation, legal resources | multi-column links, social icons, fine-print text |

## Source CSS custom properties (selected)

```css
--shiki-highlighted-line-background: rgba(37,37,40,.8);
--shiki-removed-line-background: rgba(72,31,30,.9);
--shiki-added-line-background: rgba(45,73,46,.9);
--background: 240 10% 3.9%;
--page-background: 240 20% 2%;
--foreground: 0 0% 98%;
--card-foreground: 0 0% 98%;
--popover-foreground: 0 0% 98%;
--primary: 217 91 60%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--radius: 0.5rem;
--footer-safe-area-spacing: 0rem;
```

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