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

# Sandclock · Design System

> Quiet dark finance, with a signal-green edge.

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

Sandclock pairs a near-black canvas with restrained green accents to present crypto yield products with a calm, finance-led feel. Large editorial headlines, partner marks, security cards, and announcement imagery make trust the central visual thread.

## North star

Keep the near-black page quiet and use green only to direct attention toward earning or a key assurance.

## Overview

The page is built on a near-black canvas (#0a0a0a), with white typography for key messages and muted gray for navigation and supporting copy. Signal green (#3fe280) is reserved for the primary earning action and a short emphasized phrase, so it reads as a purposeful cue rather than a decorative wash. Inter carries most interface and body text; Aeonik gives the hero its large, clean display voice. The first screen uses a split hero, followed by a ruled partner-logo band and a horizontal safety feature row. Lower down, a centered announcement heading introduces three image-led cards, then a compact multi-column footer. Hairline dividers and charcoal card surfaces provide structure without bright panels or heavy shadows. Spacing feels comfortable and deliberate: generous separation around major sections offsets denser navigation, card details, and footer links. Imagery appears chiefly in announcement artwork and small security marks, while the brand identity remains typographic and restrained.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#0a0a0a` | `--color-midnight-canvas` | brand | Dominant page background and dark button text; anchors the restrained crypto-finance presentation. |
| Soft Graphite | `#9b9b9b` | `--color-soft-graphite` | neutral | Muted navigation, footer links, and secondary copy against the dark canvas. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | Primary headings, body copy, navigation, and the wallet control surface. |
| Boundary Charcoal | `#222222` | `--color-boundary-charcoal` | semantic | Hairline dividers and subdued secondary button surfaces; separates content without bright borders. |
| Signal Green | `#3fe280` | `--color-signal-green` | accent | Primary Start Earning action and selected emphasis in the security message. |
| Card Charcoal | `#171717` | `--color-card-charcoal` | surface | Raised dark card surfaces, including the three security assurance tiles. |

### Semantic aliases

`--color-canvas` → `#0a0a0a` (Midnight Canvas) · `--color-surface` → `#171717` (Card Charcoal) · `--color-text` → `#ffffff` (Clean White) · `--color-text-muted` → `#9b9b9b` (Soft Graphite) · `--color-text-subtle` → `#222222` (Boundary Charcoal) · `--color-border` → `#222222` (Boundary Charcoal) · `--color-accent` → `#3fe280` (Signal Green) · `--color-on-accent` → `#0a0a0a` (Midnight Canvas)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#0a0a0a` | 19.8:1 | AAA |
| `#ffffff` | `#171717` | 17.93:1 | AAA |
| `#9b9b9b` | `#0a0a0a` | 7.12:1 | AAA |
| `#9b9b9b` | `#171717` | 6.45:1 | AA |
| `#222222` | `#0a0a0a` | 1.24:1 | fail |
| `#222222` | `#171717` | 1.13:1 | fail |
| `#3fe280` | `#0a0a0a` | 11.69:1 | AAA |
| `#3fe280` | `#171717` | 10.59:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 500 | Navigation, body copy, section headings, captions, and buttons | Inter |
| Aeonik | `--font-display` | webfont | 400 | Large hero display headline | Manrope |
| DM Sans | `--font-dm-sans` | webfont | 500 | Minor interface text where detected | DM Sans |

- **Inter:** Mostly regular weight, with medium buttons and captions; keep case natural and tracking restrained.
- **Aeonik:** Regular display weight, tight negative tracking, and compact line height create the oversized editorial headline.
- **DM Sans:** Medium weight appears rarely; retain as a subtle supporting face rather than a prominent brand voice.

### Type scale — Golden Ratio (ratio ≈ 1.651, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 1 | -0.025em | — | Aeonik | Oversized hero headline introducing the finance product. |
| h1 | 36px | 400 | 1.11 | 0 | — | Inter | Primary section heading and prominent page-level message. |
| h2 | 20px | 400 | 1.4 | 0 | — | Inter | Supporting section titles and feature statements. |
| body | 16px | 400 | 1.5 | 0 | — | Inter | Explanatory copy, announcement text, and footer content. |
| caption | 14px | 500 | 1.43 | 0.05em | — | Inter | Compact announcement labels and small card metadata. |
| button | 16px | 500 | 1.5 | 0 | — | Inter | Primary and secondary action labels. |
| nav | 16px | 400 | 1.5 | 0 | — | Inter | Top navigation links and related site navigation. |

## Spacing & layout

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

A centered content frame uses a measured maximum width of 1264px, with wide side margins at the 1440px viewport. The hero aligns its headline left and explanatory copy with actions in a second column. A full-width partner row and safety feature split follow, then a centered announcement heading above three columns of cards. Sections are separated by thin horizontal rules and generous vertical intervals; card and footer content use tighter, more compact spacing.

## Shape & elevation

- Radius: button `16px` · card `12px` · media `12px` · badge `9999px` · xs `6px` · sm `12px` · md `16px` · pill `9999px`
- Shadow `sm` (button): `rgba(24, 39, 75, 0.08) 0px 2px 3px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The design is largely flat. Thin #222222 dividers define section edges, while #171717 surfaces distinguish assurance cards from the canvas. Cards use restrained rounding and little visual lift; the wallet control has a light surface and a subtle measured shadow. Avoid pronounced shadows, layered panels, or glossy effects.

## Imagery

The hero includes a restrained product visual, while the partner band relies on monochrome logos. Security assurances use compact icons on dark cards. The announcement feed is the main image-led area: three wide, rounded graphic artworks sit above concise labels and copy. Treat imagery as supporting evidence, not a competing visual system; preserve the dark surroundings and avoid adding gradients or decorative imagery not shown.

## Components

### Top navigation

Brand mark and compact links sit along a dark header, with the active item indicated by a short green underline and a white pill-shaped wallet action at the far right.

### Hero actions

A split hero pairs a large headline with muted supporting copy. The green Start Earning button is primary; Buy QUARTZ is a dark secondary control.

### Partner logo band

A single row of four partner marks is framed by subtle #222222 hairlines and evenly distributed across the content width.

### Security assurances

A prominent risk statement sits beside three dark cards for safe data, SOC2 compliance, and insurance, each led by a compact icon.

### Announcement cards

Three equal cards pair wide artwork with a small rounded category label, a short headline, and compact supporting copy.

### Footer

A ruled, low-contrast footer groups the brand and copyright with compact legal, editorial, and social links.

### Measured component styles

- **Primary button** (“Start Earning”): background #3fe280 · text #0a0a0a · border 1px solid · radius 16px · padding 8px 16px · 500 16px Inter
- **Secondary button** (“Connect Wallet”): background #ffffff · text #ffffff · radius 64px · padding 8px 12px · 400 16px Inter · shadow rgba(24, 39, 75, 0.08) 0px 2px 3px 0px
- **Link** (“Start Earning”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Inter
- **Card** (“Safe data”): background #171717 · text #0a0a0a · radius 12px · padding 16px · 400 16px Inter
- **Badge** (“Announcement”): background #ffffff · text #222623 · radius 9999px · padding 4px 8px · 400 14px Inter
- **Navigation item** (“Home Earn Staking Docs”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Inter

## Do

- Use #0a0a0a as the dominant canvas.
- Reserve #3fe280 for primary actions and brief emphasis.
- Set the hero in a large Aeonik-style display face.
- Use white for primary text and #9b9b9b for secondary text.
- Separate major content blocks with subtle #222222 rules.
- Keep cards dark, compact, and visually quiet.

## Don't

- Do not turn the green accent into a large background wash.
- Do not introduce bright section bands or colorful gradients.
- Do not make every heading oversized or display-styled.
- Do not add heavy shadows or layered glass effects.
- Do not let announcement art overpower its surrounding copy.
- Do not replace the airy section rhythm with a dense dashboard grid.

## Agent prompt

Build a new Sandclock-style crypto finance page using Midnight Canvas (#0a0a0a) as the dominant background, Clean White (#ffffff) for primary text, and Soft Graphite (#9b9b9b) for secondary copy. Use Signal Green (#3fe280) sparingly for the main action and brief emphasis; use Boundary Charcoal (#222222) for hairline separation and Card Charcoal (#171717) for quiet feature cards. Set a large, tightly tracked Aeonik-like headline against restrained Inter-style interface typography. Keep the content in a centered wide frame, use split editorial sections, clear horizontal rules, and generous gaps between blocks. Make trust cues and concise content more prominent than decoration. Use image-led cards only where they support the story, with subdued framing and compact labels. Keep elevation low and interactions visually simple.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Split two-column hero with headline on the left and supporting copy plus two actions on the right. | primary earning action, secondary product link | large display headline, green primary button, dark secondary button |
| 2 | feature-split | Risk statement on the left, three assurance cards aligned in a row on the right. | security proof points, scannable assurances | green phrase emphasis, dark icon cards, thin dividers |
| 3 | content-feed | Centered section heading above three equal image-led cards in a row. | announcement discovery, category labels | wide artwork, rounded badges, compact card copy |
| 4 | footer | Four-column footer with brand and copyright separated from grouped links. | legal navigation, social links | muted link text, top hairline, compact columns |

## Source CSS custom properties (selected)

```css
--text-black: #ffffff;
--base-brand: #3fe280;
--base-brand-midnight-green: #222623;
--base-brand-midnight-green-opacity-10: #2226231a;
--radius: .5rem;
--brand: #3fe280;
--brand-midnight-green: #ffffff;
--brand-midnight-green-opacity-10: #ffffff1a;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
```

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