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

# Coinshift · Design System

> Institutional finance in a quiet, onchain dark mode

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

A restrained dark homepage introduces iUSPC as a liquid, composable route to institutional credit yield. Sparse typography, expansive dark sections, and a few carefully placed borders keep the experience sober and finance-led.

## North star

Let spacious near-black surfaces and precise, low-contrast typography carry the page; use borders and gradients only as quiet structure.

## Overview

The visual strategy is built around a near-black navy canvas (#020617), with a darker-blue alternate band (#0a0e1a) creating subtle sectional separation rather than conspicuous cards. Pale slate headings (#e2e8f0) contrast with muted slate supporting copy, while the opening hero uses an understated tonal gradient and a wave-like graphic to add depth without breaking the restrained palette. Inter is used throughout; large, semibold, tightly tracked headings are balanced by compact, regular-weight body copy and small uppercase eyebrow labels. The page is unusually spacious: content sits in a centered, bounded column, while long sections and wide gaps give the dark canvas room to dominate. Layouts shift between centered hero content, a two-column explanatory section, and a three-column feature area. Buttons remain transparent and outlined, with restrained corner rounding; cards and section divisions rely on thin borders instead of filled panels or prominent shadows. Partner marks are supporting proof, not decorative color sources.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#020617` | `--color-midnight-canvas` | brand | Dominant page canvas, hero background, and footer foundation. |
| Deep Navy | `#0a0e1a` | `--color-deep-navy` | surface | Alternate broad section band that separates content without a bright contrast break. |
| Slate Copy | `#94a3b8` | `--color-slate-copy` | neutral | Primary muted body copy and secondary explanatory text. |
| Quiet Slate | `#64748b` | `--color-quiet-slate` | neutral | Low-emphasis navigation, footer text, and secondary labels. |
| Night Hairline | `#111525` | `--color-night-hairline` | surface | Subtle section and footer border treatment; may also appear in tonal gradients. |
| Shadow Slate | `#475569` | `--color-shadow-slate` | neutral | Low-priority text and small supporting interface details. |
| Frosted Text | `#e2e8f0` | `--color-frosted-text` | neutral | Primary headings, prominent interface text, and outlined CTA labels. |
| Gradient Navy | `#060c1e` | `--color-gradient-navy` | surface | Intermediate dark tone within section and background gradients. |
| Card Edge | `#1c1f2f` | `--color-card-edge` | surface | Thin borders around card-like content; structure rather than a filled card surface. |
| Pale Link | `#cbd5e1` | `--color-pale-link` | neutral | Emphasized inline link text, including the strategy-mix link. |
| Button Outline | `#353845` | `--color-button-outline` | semantic | Thin outline around transparent Launch App buttons. |
| Muted Detail | `#334155` | `--color-muted-detail` | neutral | Occasional low-emphasis supporting text. |

### Semantic aliases

`--color-canvas` → `#020617` (Midnight Canvas) · `--color-surface` → `#0a0e1a` (Deep Navy) · `--color-text` → `#e2e8f0` (Frosted Text) · `--color-text-muted` → `#94a3b8` (Slate Copy) · `--color-text-subtle` → `#64748b` (Quiet Slate) · `--color-border` → `#111525` (Night Hairline)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#e2e8f0` | `#020617` | 16.36:1 | AAA |
| `#e2e8f0` | `#0a0e1a` | 15.62:1 | AAA |
| `#94a3b8` | `#020617` | 7.87:1 | AAA |
| `#94a3b8` | `#0a0e1a` | 7.51:1 | AAA |
| `#64748b` | `#020617` | 4.24:1 | AA-large |
| `#64748b` | `#0a0e1a` | 4.05:1 | AA-large |

### Gradients

- `linear-gradient(rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.35) 15%, rgba(15, 23, 42, 0.35) 85%, rgba(15, 23, 42, 0))`
- `conic-gradient(at 78% 3%, rgba(0, 0, 0, 0) 75%, rgb(15, 23, 42) 0deg), conic-gradient(at 78% 3%, rgba(0, 0, 0, 0) 75%, rgb(15, 23, 42) 0deg), conic-gradient(at 78% 3%, rgba(0, 0, 0, 0) 75%, rgb(15, 23, 42) 0deg), conic-g`
- `conic-gradient(at 50% 5%, rgba(0, 0, 0, 0) 75%, rgb(15, 23, 42) 0deg), conic-gradient(at 50% 5%, rgba(0, 0, 0, 0) 75%, rgb(15, 23, 42) 0deg), conic-gradient(at 5% 50%, rgba(0, 0, 0, 0) 75%, rgb(15, 23, 42) 0deg), conic-g`
- `linear-gradient(rgb(2, 6, 23), rgba(0, 0, 0, 0), rgb(2, 6, 23))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500, 600, 300 | All page typography, from navigation and body copy to headings and buttons. | Inter |

- **Inter:** Use measured weights from 300 to 600; headings are semibold with tight negative tracking, while labels use compact uppercase styling.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 600 | 1.08 | -0.025em | — | Inter | Large centered hero headline. |
| h1 | 48px | 600 | 1 | -0.025em | — | Inter | Primary page or major section headline. |
| h2 | 36px | 600 | 1.11 | -0.025em | — | Inter | Prominent section headings, including explanatory content. |
| h3 | 30px | 600 | 1.2 | -0.025em | — | Inter | Feature and card-level headings. |
| h4 | 24px | 500 | 1.33 | -0.025em | — | Inter | Smaller subsection and supporting headings. |
| body | 14px | 400 | 1.63 | 0 | — | Inter | Main explanatory paragraphs and descriptive copy. |
| caption | 12px | 400 | 1.33 | 0 | — | Inter | Compact supporting details and footer metadata. |
| button | 16px | 500 | 1.5 | 0 | — | Inter | Launch App call-to-action labels. |
| nav | 14px | 400 | 1.43 | 0 | — | Inter | Header and footer navigation links. |
| link | 14px | 400 | 1.63 | 0 | — | Inter | Inline strategy and legal links. |
| eyebrow | 12px | 400 | 1.33 | 0.2em | uppercase | Inter | Small uppercase section labels such as BACKED BY. |

## Spacing & layout

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

Use a centered content frame capped at the measured 1152px maximum, with generous horizontal breathing room and spacious vertical section rhythm. The hero is centered, while explanatory content uses a two-column split and a later feature area uses three columns. Keep large stretches of dark canvas between content groups; measured section spacing is 160px, with a spacious overall density. Align section headings consistently to their content grid and avoid crowding the viewport with panels.

## Shape & elevation

- Radius: button `12px` · nav `8px` · xs `8px` · sm `12px` · pill `9999px`
- Shadow `sm` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(250, 56, 18, 0.15) 0px 0px 8px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is largely flat: broad background bands, hairline borders, and tonal gradients provide hierarchy instead of raised cards. Outlined buttons sit directly on the canvas, and card-like rows are separated by thin borders. Avoid prominent drop shadows; any glow should be barely perceptible and subordinate to the dark surface.

## Imagery

The opening view uses an abstract, low-contrast wave and faint technical linework against the dark canvas, not photography. Partner logos appear in a restrained horizontal proof row. Their individual colors belong to the marks themselves; keep the surrounding interface monochrome and dark. Avoid prominent illustrations, glossy 3D, or large product screenshots that would overpower the typography.

## Components

### Header navigation

Compact horizontal navigation on the dark canvas, with the iUSPC mark, muted links, social icons, and an outlined Launch App button.

### Hero headline

Centered two-line display message; the second line is visibly more muted than the main pale heading.

### Primary CTA

Transparent Launch App button with #e2e8f0 text, #353845 outline, and measured 12px corner radius in the hero.

### Trust markers

Small muted regulatory claims sit below the hero action, introduced by tiny warm-colored dots.

### Partner logo row

A small uppercase BACKED BY label precedes a centered row of investor and ecosystem logos.

### Content rows

Feature and tier-like entries use thin #1c1f2f borders and open layouts rather than filled, rounded cards.

### Footer

A quiet dark closing band with brand mark, brief product statement, navigation links, and compact legal text.

### Measured component styles

- **Primary button** (“Launch App”): transparent background · text #e2e8f0 · border 1px solid #353845 · radius 12px · padding 16px 40px · 500 16px Inter
- **Link** (“Full strategy mix live onchain.”): transparent background · text #cbd5e1 · radius 0px · padding 0px · 400 14px Inter
- **Card** (“TIER 2: MONTHLY”): transparent background · text #f1f5f9 · border 1px solid #1c1f2f · radius 0px · padding 64px 0px 16px 0px · 400 16px Inter
- **Navigation item** (“iUSPC Season 1 Points Analytics Legal La”): transparent background · text #f1f5f9 · radius 0px · padding 0px · 400 16px Inter

## Do

- Keep the canvas near-black navy and the overall contrast restrained.
- Use pale slate for primary headings and muted slate for supporting copy.
- Center the hero and preserve generous negative space around it.
- Use thin borders to divide rows and outline actions.
- Keep gradients subtle and confined to background atmosphere.
- Use Inter consistently with compact, precise heading typography.

## Don't

- Do not introduce bright accent colors across interface surfaces.
- Do not turn every content group into a filled card.
- Do not use heavy shadows or glossy elevation.
- Do not compress the long vertical rhythm into a dense dashboard.
- Do not make supporting copy as bright as the main heading.
- Do not treat partner-logo colors as brand interface colors.

## Agent prompt

Build a new institutional crypto-finance page in Coinshift's restrained dark style. Use Midnight Canvas (#020617) as the dominant background and Deep Navy (#0a0e1a) for occasional broad section bands. Set all copy in Inter; use Frosted Text (#e2e8f0) for important headings and CTA labels, Slate Copy (#94a3b8) and Quiet Slate (#64748b) for secondary text. Create hierarchy with spacious section gaps, centered hero content, and clear grid alignment rather than decorative cards. Keep outlined actions transparent with Button Outline (#353845); use Night Hairline (#111525) or Card Edge (#1c1f2f) for subtle divisions. Add only restrained tonal gradients and abstract background detail. Favor flat surfaces, precise typography, and quiet institutional confidence over bright accents, heavy shadows, or dense layouts.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero beneath a compact top navigation, with headline, supporting copy, CTA, and atmospheric background. | Primary Launch App action, Trust and regulatory cues | Two-line headline, Subtle wave gradient, Outlined button |
| 2 | logo-cloud | Centered proof row with a small uppercase label and partner marks in one horizontal band. | Institutional credibility | BACKED BY eyebrow, Partner logo row |
| 3 | feature-split | Two-column explanatory section on the primary dark canvas, with left-aligned heading and supporting content. | Problem framing, Supporting explanation | Two-column grid, Strong section heading |
| 4 | other | Broad single-column section on a darker navy band, with generous vertical breathing room. | Long-form product explanation | Alternate dark surface, Open content area |
| 5 | feature-grid | Three-column content grid on the primary canvas, aligned to the shared centered frame. | Feature scanning | Three-column grid, Multiple section headings |
| 6 | other | Single-column section on the dark canvas with a clear heading and open surrounding space. | Strategy discovery | Single-column content, Inline link styling |
| 7 | other | Broad single-column area with minimal visible framing and generous separation from neighboring sections. | Onchain information | Dark canvas, Low-contrast boundaries |
| 8 | cta | Single-column closing content on the dark canvas before the compact footer. | Conversion prompt | Primary action styling, Spacious section |
| 9 | footer | Compact single-column footer with brand content, navigation, social links, and legal details. | Secondary navigation, Legal access | Brand mark, Muted links, Small legal text |

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