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

# Dala · Design System

> A near-black canvas with sharp, quiet accents

**Theme:** dark · **Industry:** ai · **Source:** https://dala.craftedbygc.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._

Dala uses an almost entirely black canvas and restrained white typography to create a sparse, high-contrast identity. Violet calls attention to the access CTA, while amber and muted grays provide small supporting accents.

## North star

Let an uninterrupted black canvas and precise white type do most of the work; use color only to signal hierarchy or action.

## Overview

The page’s defining move is its near-total black canvas (#000000), which gives the experience a quiet, cinematic feel rather than a conventional SaaS dashboard look. White (#ffffff) carries the principal navigation and headings; muted gray labels recede, while the thin charcoal border is reserved for subtle separation. The violet CTA is the clearest action, with amber appearing as a small, contrasting text or link accent. PPNeueMontreal supplies a clean, contemporary sans-serif voice across the page. Display typography is oversized and tightly tracked, while body copy is light and comfortably led; navigation and eyebrow labels use uppercase styling. The layout is intentionally sparse, with a wide centered content area and generous vertical breathing room. The supplied viewport is mostly black and reveals very little imagery, so preserve the restrained visual field rather than inventing decorative graphics or color bands.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Obsidian Canvas | `#000000` | `--color-obsidian-canvas` | surface | Dominant page background; covers nearly the entire visible canvas and provides the site’s defining dark field. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | Primary headings and navigation text, providing crisp contrast against the black canvas. |
| Charcoal Hairline | `#1a1a1a` | `--color-charcoal-hairline` | neutral | Subtle border and divider color; keep separation understated on dark surfaces. |
| Electric Violet | `#8052ff` | `--color-electric-violet` | accent | Filled REQUEST ACCESS CTA and occasional accent text; the strongest interactive color. |
| Amber Signal | `#ffb829` | `--color-amber-signal` | accent | Small link or highlighted text accent; use sparingly alongside violet. |
| Soft Silver | `#bdbdbd` | `--color-soft-silver` | neutral | Secondary text color measured in the palette; use for subdued supporting copy, not broad backgrounds. |
| Quiet Gray | `#9a9a9a` | `--color-quiet-gray` | neutral | Muted uppercase navigation and links such as BLOG and MANIFESTO. |

### Semantic aliases

`--color-canvas` → `#000000` (Obsidian Canvas) · `--color-text` → `#ffffff` (Clean White) · `--color-border` → `#1a1a1a` (Charcoal Hairline) · `--color-accent` → `#8052ff` (Electric Violet) · `--color-accent-2` → `#ffb829` (Amber Signal) · `--color-on-accent` → `#ffffff` (Clean White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#8052ff` | `#000000` | 4.57:1 | AA |

### Gradients

- `linear-gradient(360deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| PPNeueMontreal | `--font-body` | webfont | 400, 200, 600, 700 | Site-wide display, headings, body copy, navigation, labels, and links. | DM Sans |

- **PPNeueMontreal:** Use a broad weight range; display type is tightly tracked, body is light, and nav and eyebrow labels are uppercase.

### Type scale — Augmented Fourth (ratio ≈ 1.443, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 112.5px | 400 | 1.1 | -0.04em | — | PPNeueMontreal | Oversized brand or hero display text with tight tracking. |
| h1 | 78px | 400 | 0.9 | 0 | — | PPNeueMontreal | Primary hero headline. |
| h2 | 48px | 400 | 1.1 | 0 | — | PPNeueMontreal | Major section headings. |
| h3 | 42px | 400 | 1.2 | 0 | — | PPNeueMontreal | Subsection or feature headings. |
| h4 | 36px | 400 | 1.2 | 0 | — | PPNeueMontreal | Smaller supporting headings. |
| body | 18px | 200 | 1.5 | 0 | — | PPNeueMontreal | Light-weight explanatory and supporting copy. |
| caption | 15px | 400 | 1.5 | 0 | — | PPNeueMontreal | Compact supporting labels and captions. |
| nav | 14px | 600 | 1.2 | 0.025em | uppercase | PPNeueMontreal | Uppercase navigation labels with modest letter spacing. |
| link | 15px | 600 | 1.5 | 0 | — | PPNeueMontreal | Emphasized inline or standalone links. |
| eyebrow | 12px | 600 | 1.2 | 0.05em | uppercase | PPNeueMontreal | Small uppercase category or section preface. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 1, 6, 12, 14, 15, 16, 18, 24, 36, 38, 60, 120 px.
- Section rhythm 120px · element gap — · card padding — · max content width 1200px.

Use a single-column, spacious composition within a measured maximum content width of 1200px. Keep navigation quiet and near the top edge, with the primary content visually isolated by abundant black space. The measured section rhythm is generous, with a 120px section gap; avoid adding dense card grids or unnecessary bands. Headings and supporting copy should align cleanly, with strong typographic hierarchy rather than decorative containers. The supplied full-page captures are almost entirely black, so preserve large uninterrupted areas.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s cubic-bezier(0.5, 1, 0.89, 1)` on interactive elements.

The measured design is essentially flat, with no shadows recorded and no prominent card surfaces. Use the charcoal hairline only for quiet separation, and keep layering minimal. The access button is a solid violet pill, not a raised or shadowed control.

## Imagery

The supplied first viewport and scaled page captures show very little legible imagery; black dominates and the page reads primarily through typography and sparse interface details. Do not introduce stock photography, illustrative scenes, or decorative 3D elements without evidence. If media is needed for a new page, keep it dark, restrained, and subordinate to the text rather than breaking the monochrome field.

## Components

### Primary access CTA

Uppercase REQUEST ACCESS label in white on Electric Violet (#8052ff), set in a fully rounded pill without shadow.

### Top navigation

Compact navigation on black; primary labels are white, while quieter destinations such as BLOG and MANIFESTO use muted gray.

### Display headline

Oversized PPNeueMontreal display treatment with tight negative tracking and a restrained, high-contrast white-on-black presentation.

### Text link

Use muted gray for secondary navigation links; reserve amber (#ffb829) for occasional highlighted link text.

### Section divider

If separation is needed, use a subtle charcoal hairline (#1a1a1a) rather than a boxed card or bright rule.

### Measured component styles

- **Primary button** (“REQUEST ACCESS”): background #8052ff · text #ffffff · radius 22.5px · padding 14.4px 16px · 600 12px PPNeueMontreal · uppercase
- **Link** (“BLOG”): transparent background · text #9a9a9a · radius 0px · padding 0px · 600 12px PPNeueMontreal · uppercase
- **Navigation item** (“Dala Dala MANIFESTO TEAM BLOG REQUEST AC”): transparent background · text #ffffff · radius 0px · padding 0px · 400 12px PPNeueMontreal

## Do

- Keep the page canvas black.
- Use white for the main headline and key navigation.
- Reserve violet for the primary access action.
- Use amber only as a restrained text accent.
- Preserve generous black space around content.
- Use uppercase styling for navigation and eyebrow labels.

## Don't

- Do not introduce unmeasured colors.
- Do not add bright section backgrounds or gradients.
- Do not turn the layout into a dense card grid.
- Do not add shadows or elevated panels.
- Do not let secondary links compete with the CTA.
- Do not invent prominent imagery absent from the captures.

## Agent prompt

Build a new Dala-style page around an uninterrupted black canvas (#000000) and a sparse, spacious composition. Use PPNeueMontreal, or DM Sans as a free substitute, for the entire interface: large, tightly tracked white headlines; light supporting copy; and compact uppercase navigation. Keep the content within a wide centered area and create hierarchy with typography and generous vertical breathing room, not cards. Use Clean White (#ffffff) for primary text, Quiet Gray (#9a9a9a) for secondary navigation, and Charcoal Hairline (#1a1a1a) only for discreet dividers. Make the primary action a white-on-Electric Violet (#8052ff) rounded pill. Amber Signal (#ffb829) may appear sparingly in a text link. Avoid shadows, colorful bands, and decorative imagery; keep the visual field calm and minimal.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single-column black canvas with sparse content, a quiet top navigation, and ample surrounding negative space. | Primary access action, Minimal top navigation | White-on-black typography, Violet pill CTA, Muted gray links |

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