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

# Allfeat · Design System

> Dark infrastructure, vivid signals, music-data clarity.

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

Allfeat pairs a near-black canvas with vivid green and coral accents to present blockchain infrastructure for music rights. Editorial headlines, generous open space, rounded controls, and geometric illustrations make a complex platform feel approachable.

## North star

Let a nearly black canvas and generous breathing room frame ivory editorial type, with green and coral used as precise signals.

## Overview

The page is anchored by a near-black canvas (#151515), giving the content a quiet, high-contrast foundation. Warm ivory (#fffbeb) carries primary headings and the occasional light card, while muted gray (#b8b8b8) softens supporting copy. Green (#00b18c) marks solution-oriented actions and small labels; coral (#ff4a5f) appears as a contrasting call to action and in atmospheric gradients. TASA Orbiter is used throughout, with compact, confidently weighted headlines and restrained body copy. The layout moves from a centered hero into a two-column feature-card row, then alternates open narrative sections and wider visual blocks. Large intervals of dark canvas preserve a spacious rhythm. Artwork uses crisp geometric network and data motifs, often with deep teal and cream; these are illustrations, not the page’s foundational palette. Rounded pills, modest card corners, and thin inset borders keep the interface tactile without adding heavy shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#151515` | `--color-midnight-canvas` | brand | Dominant page background and dark foundation for hero, content sections, and footer. |
| Soft Ash | `#b8b8b8` | `--color-soft-ash` | neutral | Muted supporting text and secondary card copy against the dark canvas. |
| Warm Ivory | `#fffbeb` | `--color-warm-ivory` | neutral | Primary headings, navigation, light feature cards, and text on dark surfaces. |
| Coral Signal | `#ff4a5f` | `--color-coral-signal` | accent | Contrasting CTA accent and atmospheric gradient color; also appears within artwork. |
| Blockchain Green | `#00b18c` | `--color-blockchain-green` | accent | Primary solution buttons, small labels, and selected interface signals. |
| Graphite Panel | `#383835` | `--color-graphite-panel` | surface | Dark card and navigation surfaces, plus restrained inset card borders. |
| Shadow Surface | `#212120` | `--color-shadow-surface` | surface | Subtle dark link and control backgrounds, slightly lifted from the canvas. |
| Quiet Divider | `#504f4b` | `--color-quiet-divider` | semantic | Fine outlines around dark links and controls. |
| Muted Edge | `#6a6963` | `--color-muted-edge` | semantic | Low-emphasis border detail; not a prominent page color. |

### Semantic aliases

`--color-canvas` → `#151515` (Midnight Canvas) · `--color-surface` → `#212120` (Shadow Surface) · `--color-surface-2` → `#fffbeb` (Warm Ivory) · `--color-surface-3` → `#b8b8b8` (Soft Ash) · `--color-surface-4` → `#383835` (Graphite Panel) · `--color-text` → `#fffbeb` (Warm Ivory) · `--color-text-muted` → `#b8b8b8` (Soft Ash) · `--color-text-subtle` → `#151515` (Midnight Canvas) · `--color-border` → `#504f4b` (Quiet Divider) · `--color-accent` → `#00b18c` (Blockchain Green) · `--color-accent-2` → `#ff4a5f` (Coral Signal) · `--color-on-accent` → `#151515` (Midnight Canvas)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#fffbeb` | `#151515` | 17.61:1 | AAA |
| `#fffbeb` | `#212120` | 15.54:1 | AAA |
| `#fffbeb` | `#b8b8b8` | 1.91:1 | fail |
| `#b8b8b8` | `#151515` | 9.21:1 | AAA |
| `#b8b8b8` | `#212120` | 8.12:1 | AAA |
| `#b8b8b8` | `#fffbeb` | 1.91:1 | fail |
| `#151515` | `#212120` | 1.13:1 | fail |
| `#151515` | `#fffbeb` | 17.61:1 | AAA |
| `#151515` | `#b8b8b8` | 9.21:1 | AAA |
| `#00b18c` | `#151515` | 6.67:1 | AA |

### Gradients

- `linear-gradient(185deg, rgb(255, 251, 235) 0px, rgb(255, 74, 95) 40%, rgb(21, 21, 21) 77%)`
- `linear-gradient(rgb(21, 21, 21), rgb(255, 74, 95))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| TASA Orbiter | `--font-body` | webfont | 400, 600, 500 | All page typography, including display headings, body copy, navigation, buttons, and labels. | DM Sans |

- **TASA Orbiter:** Use semibold for headlines and buttons, regular for copy, and medium for navigation; headings are tightly tracked, with natural casing.

### Type scale — Major Third (ratio ≈ 1.285, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 600 | 0.95 | -0.02em | — | TASA Orbiter | Large hero or statement headlines. |
| h1 | 54px | 600 | 0.87 | -0.02em | — | TASA Orbiter | Primary page headline in the hero. |
| h2 | 40px | 600 | 1 | -0.02em | — | TASA Orbiter | Major section headings and prominent statements. |
| h3 | 25px | 600 | 1.2 | 0 | — | TASA Orbiter | Feature-card and sub-section titles. |
| h4 | 24px | 600 | 1.1 | -0.02em | — | TASA Orbiter | Compact secondary headings in content blocks. |
| body | 16px | 400 | 1.2 | 0 | — | TASA Orbiter | Explanatory paragraphs and general content. |
| caption | 14px | 400 | 1.2 | 0 | — | TASA Orbiter | Small labels, footnotes, and auxiliary copy. |
| button | 20px | 600 | 1 | -0.02em | — | TASA Orbiter | Primary action labels in pill-shaped controls. |
| nav | 16px | 500 | 1.2 | 0 | — | TASA Orbiter | Header navigation links and compact menu actions. |
| link | 18px | 400 | 1.2 | 0 | — | TASA Orbiter | Inline or standalone text links, including contact prompts. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 8, 9, 11, 12, 16, 18, 22, 24, 32, 56, 64, 90, 180 px.
- Section rhythm 101px · element gap 16px · card padding 16px · max content width —.

The homepage uses broad, spacious sections on a dark canvas, with content grouped into centered statements, paired feature cards, and full-width visual bands. The hero centers its eyebrow, headline, and supporting line; the header places the logo opposite a compact pill navigation. Feature cards form a two-column desktop row, with imagery above concise copy and actions. Later sections alternate centered messaging with split panels and FAQ rows. Measurements do not establish a page maximum width; preserve generous outer breathing room and allow content to expand responsively. Keep the density low and section gaps conspicuous.

## Shape & elevation

- Radius: button `9999px` · card `12px` · media `12px` · nav `9999px` · link `50%` · xs `12px` · pill `9999px`
- Shadow `inset` (card, other): `rgb(56, 56, 53) 0px 0px 0px 1px inset`
- Shadow `inset-2` (button): `rgba(255, 251, 235, 0.25) 0px 0px 0px 2px inset`
- Motion: standard transition `0.5s cubic-bezier(0.165, 0.84, 0.44, 1)` on interactive elements.

The interface is mostly flat: dark surfaces sit directly on the canvas, and cards are distinguished by subtle outlines or tonal shifts rather than drop shadows. Use inset hairlines for dark card boundaries and the measured pale inset treatment on primary buttons. Keep layering restrained, with imagery and gradient bands supplying most visual depth.

## Imagery

Use geometric, technology-led illustrations rather than conventional product photography. The feature artwork depicts connected data structures with bold dark outlines, teal fields, warm ivory surfaces, and occasional coral details. Frame images in wide rounded rectangles and pair them with concise explanatory copy. Reserve large gradients and abstract line patterns for atmospheric section backgrounds; colors inside artwork should not displace the measured interface palette.

## Components

### Header navigation

Ivory logo at left and a compact dark pill at right containing navigation links and a slightly emphasized Get started action.

### Hero statement

Centered green eyebrow above a tightly set ivory headline and muted supporting sentence on a near-black background.

### Feature cards

Paired image-led cards with rounded media, concise explanatory copy, dark framing, and small green pill actions.

### Primary action

Compact pill-shaped CTA with dark text on green or coral, semibold TASA Orbiter, and a subtle pale inset outline.

### Statement band

Spacious dark narrative section with a prominent editorial statement and selective coral or green visual emphasis.

### FAQ rows

A vertically stacked set of dark, rounded question rows with fine outlines and small circular expand controls.

### Footer

Quiet dark close with grouped text links, restrained captions, and low-contrast legal details.

### Measured component styles

- **Primary button** (“Protect (ATS)”): background #00b18c · text #151515 · radius 900px · padding 0px 16px · 600 16.002px TASA Orbiter · shadow rgba(255, 251, 235, 0.25) 0px 0px 0px 2px inset
- **Secondary button** (“Find your Feat”): background #ff4a5f · text #151515 · radius 900px · padding 0px 16px · 600 16.002px TASA Orbiter · shadow rgba(255, 251, 235, 0.25) 0px 0px 0px 2px inset
- **Link**: background #212120 · text #fffbeb · border 1px solid #504f4b · radius 100% · padding 0px · 400 18px TASA Orbiter
- **Card** (“Infrastructure A blockchain self-finance”): background #fffbeb · text #151515 · border 1px solid #383835 · radius 12px · padding 16px · 400 18px TASA Orbiter
- **Navigation item** (“Blog Buy token Get started”): transparent background · text #fffbeb · radius 0px · padding 0px · 500 16px TASA Orbiter

## Do

- Use #151515 as the dominant page canvas.
- Set primary headings in warm ivory #fffbeb.
- Reserve #00b18c and #ff4a5f for clear action or emphasis.
- Use generous dark intervals between major content groups.
- Pair feature illustrations with concise supporting copy.
- Keep buttons and navigation actions pill-shaped.
- Use subtle outlines instead of heavy shadows.

## Don't

- Do not turn the page into a light-first layout.
- Do not use accent colors as broad solid section fills.
- Do not crowd the hero or feature-card content.
- Do not introduce decorative drop shadows.
- Do not use unrelated stock photography.
- Do not make all text equally bright or prominent.

## Agent prompt

Build a new Allfeat-style page on a Midnight Canvas (#151515), using TASA Orbiter or a close sans-serif substitute. Set primary headings in Warm Ivory (#fffbeb), supporting copy in Soft Ash (#b8b8b8), and use Blockchain Green (#00b18c) or Coral Signal (#ff4a5f) sparingly for labels and actions. Favor a centered editorial hero, broad dark sections, paired rounded feature cards, and generous vertical breathing room. Use geometric music-data illustrations with teal, cream, and coral details, clearly treating those colors as artwork rather than interface foundations. Keep controls pill-shaped, cards subtly outlined in Graphite Panel (#383835) or Quiet Divider (#504f4b), and surfaces mostly flat. Maintain clear typographic hierarchy and restrained motion; avoid dense layouts, heavy shadows, and generic stock imagery.

## Source CSS custom properties (selected)

```css
--spacing-md: clamp(88px,7vw,128px);
--spacing-lg: clamp(88px,8.5vw,160px);
--spacing-xl: clamp(120px,12vw,200px);
--spacing-xxl: clamp(160px,18vw,304px);
--gap: 12px;
--color-white: #fffbeb;
--color-white-25: #fffbeb40;
--color-white-10: #fffbeb1a;
--color-white-5: #fffbeb0d;
--color-dark: #151515;
--color-primary: #ff4a5f;
--color-secondary: #00b18c;
--color-grey: #a6a6a6;
--color-grey-light: #b8b8b8;
--color-grey-dark: #383835;
--gradient-dark-primary: linear-gradient(180deg,#151515,#ff4a5f);
--ease-quart: cubic-bezier(.165,.84,.44,1);
--ease-quart-inout: cubic-bezier(.76,0,.24,1);
--ease-cubic: cubic-bezier(.33,1,.68,1);
--ease-cubic-inout: cubic-bezier(.785,.135,.15,.86);
```

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