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

# Eclipse · Design System

> A cinematic crypto network in black, white, and electric green

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

Eclipse pairs cinematic, near-black hero imagery with stark white editorial sections and vivid green feature panels. Condensed display typography, oversized headlines, and pill-shaped controls give the crypto network a bold, graphic identity.

## North star

Use stark black-and-white editorial structure, reserving vivid green for decisive emphasis and action.

## Overview

The visual strategy is built around a strict black-and-white foundation, punctuated by bright green panels and controls. Black carries the cinematic hero, dark video and news areas, and footer CTA; white provides breathing room for editorial headlines, partner names, and content cards. The measured green (#a1fea0) acts as the signature signal on feature splits, action buttons, and the full-width footer. Typography alternates between compressed, emphatic display faces and a typewriter-like utility face: headlines are large and often uppercase, while supporting text is compact and technical. The page moves between full-bleed animated or illustrated scenes and clean modular blocks, with repeated ticker-like bands linking the story. Broad section spacing and generous white fields counterbalance dense card grids. Thin black rules define cells and outlines; cards and buttons remain mostly flat, with rounded shapes reserved for controls and selected content surfaces. The dark green tones visible in screenshots belong largely to hero artwork and video, not the measured core palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Ink | `#000000` | `--color-deep-ink` | neutral | Primary text, inverse surfaces, thin rules, dark hero and news sections, and dark CTA buttons. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Page canvas, open editorial sections, card backgrounds, and the white side of split feature layouts. |
| Signal Green | `#a1fea0` | `--color-signal-green` | accent | Primary button fill, feature panels, selected highlights, and the full-width footer band. |
| Carbon Gray | `#333333` | `--color-carbon-gray` | surface | Secondary dark section surface, supporting black areas with slightly softer contrast. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Deep Ink) · `--color-surface-2` → `#333333` (Carbon Gray) · `--color-text` → `#000000` (Deep Ink) · `--color-border` → `#000000` (Deep Ink) · `--color-accent` → `#a1fea0` (Signal Green) · `--color-on-accent` → `#000000` (Deep Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#333333` | 1.66:1 | fail |
| `#a1fea0` | `#ffffff` | 1.22:1 | fail |
| `#a1fea0` | `#000000` | 17.2:1 | AAA |
| `#a1fea0` | `#333333` | 10.35:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Atlas Typewriter | `--font-body` | system | 400, 700 | Utility copy, body text, captions, and some legal or text links. | IBM Plex Mono |
| Gt Alpina Condensed | `--font-display` | webfont | 100, 400 | Editorial H1, H2, and H4 headlines. | Bodoni Moda |
| Barlow Condensed | `--font-barlow-condensed` | webfont | 700, 500 | Display lettering, H3s, navigation, eyebrows, buttons, and some card text. | Barlow Condensed |

- **Atlas Typewriter:** Measured body and caption styles are uppercase; utility links are bold. Keep copy compact and technical.
- **Gt Alpina Condensed:** Use the light weight for elegant, high-contrast headline lines; H2 is uppercase while H1 and H4 remain mixed case.
- **Barlow Condensed:** Strong condensed forms, often bold and uppercase; navigation and eyebrows use conspicuous tracking.

### Type scale — Perfect Fifth (ratio ≈ 1.496, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 120px | 700 | 0.9 | -0.03em | uppercase | Barlow Condensed | Oversized uppercase wordmarks and hero display lettering. |
| h1 | 88px | 100 | 1.1 | 0 | — | Gt Alpina Condensed | Main editorial hero headline and top-level section statement. |
| h2 | 61px | 100 | 1.1 | 0 | uppercase | Gt Alpina Condensed | Large uppercase section headings. |
| h3 | 48px | 700 | 1.2 | -0.03em | uppercase | Barlow Condensed | Compact bold uppercase feature and CTA headings. |
| h4 | 46px | 100 | normal | -0.01em | — | GT Alpina Condensed | Elegant supporting headlines and card titles. |
| body | 16px | 400 | 1.56 | 0 | uppercase | Atlas Typewriter | Compact uppercase explanatory copy and feature descriptions. |
| caption | 12px | 400 | 1.6 | 0 | uppercase | Atlas Typewriter | Small uppercase metadata and supporting labels. |
| nav | 12px | 500 | 1.6 | 0.1em | uppercase | Barlow Condensed | Uppercase navigation labels with widely spaced letters. |
| link | 12px | 700 | 1.7 | 0.02em | — | Atlas Typewriter | Bold utility links, legal links, and inline actions. |
| eyebrow | 12px | 700 | 1.6 | 0.13em | uppercase | Barlow Condensed | Small tracked uppercase section labels. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 1, 5, 10, 16, 18, 20, 24, 32, 40 px.
- Section rhythm 120px · element gap 10px · card padding — · max content width 1368px.

The measured page max width is 1368px, with a spacious rhythm and a 120px section gap. It alternates full-bleed dark media with white or green content sections, then uses split feature panels, centered metrics, and dense announcement cards. Feature and logo areas use strong rectangular divisions and fine rules rather than floating card shadows. Headlines align left in feature sections and center in investor and community moments. Keep the layout open at the section level while allowing the news feed to become visibly denser.

## Shape & elevation

- Radius: button `9999px` · card `24px` · link `25px` · xs `25px` · pill `9999px`
- Shadow `inset` (button): `rgba(0, 0, 0, 0) 0px 0px 0px 0px inset`
- Motion: standard transition `0.3s ease` on interactive elements.

The interface is mostly flat: there are no measured visible drop shadows, and the sampled button shadow is transparent. Separate content with white space, hard section bands, and thin black outlines or rules. Use rounded pill shapes for buttons and selected links, with a rounded white consent dialog over the darkened hero as a temporary overlay.

## Imagery

The opening uses dark cinematic, illustrated scenery behind oversized hero lettering; later full-bleed video imagery carries the same dramatic contrast. Network and ecosystem marks appear as clean graphic symbols within white panels, alongside a vivid green abstract shape. Treat artwork as a large, deliberate visual field rather than a small decorative thumbnail. Deep green shades in the screenshots are primarily part of the media and illustration, not extra brand colours.

## Components

### Pill actions

Use fully rounded controls with uppercase Barlow Condensed labels. Primary actions use #a1fea0 with #000000 text; the alternate deny action uses #000000 with #ffffff text.

### Split feature panels

Pair a green text panel with a white symbol panel, then reverse the order for the next feature. Separate halves with a fine black rule and keep copy left-aligned.

### News cards

Show announcement cards as white, rounded link surfaces against a black section. Use compact metadata, clear title hierarchy, and short uppercase summaries.

### Metric cells

Present ecosystem figures and categories in a clean white grid with vertical rules, centered labels, and large condensed values.

### Ticker band

Repeat short Ethereum and SVM statements in a high-contrast horizontal strip to bridge cinematic media sections.

### Investor capsules

Arrange investor names in a three-column white grid; thin outlined capsule-like forms provide structure without heavy card fills.

### Community CTA

Center a stacked uppercase invitation on a black field, emphasizing the Eclipse wordmark in vivid green and placing social links beneath.

### Measured component styles

- **Primary button** (“ACCEPT”): background #a1fea0 · text #000000 · border 1px solid · radius 100px · padding 10px 18px · 500 12px Barlow Condensed · uppercase · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px inset
- **Secondary button** (“DENY”): background #000000 · text #ffffff · border 1px solid · radius 100px · padding 10px 18px · 500 12px Barlow Condensed · uppercase · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px inset
- **Link** (“ANNOUNCEMENTS 9.6.2026 Updated $ES Token”): background #ffffff · text #000000 · border 1px solid #000000 · radius 25px · padding 32px · 400 16px Barlow Condensed
- **Card** (“Defi $500B+ ASSETS ON ETHEREUM $0.0002 E”): background #ffffff · text #000000 · radius 0px · padding 0px · 400 16px Barlow Condensed
- **Navigation item** (“ECLIPSE IS SOLANA ON ETHEREUM Ethereum’s”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Barlow Condensed

## Do

- Keep the core palette to black, white, and measured Signal Green.
- Use full-width dark bands for cinematic media and major CTA moments.
- Set key headlines in highly condensed or editorial display typography.
- Alternate open white sections with sharp green feature panels.
- Use thin rules to define grids and split feature cells.
- Reserve rounded pill treatments for actions and selected link surfaces.

## Don't

- Do not add unmeasured colors to the interface palette.
- Do not apply gradients or decorative drop shadows.
- Do not make every section a rounded floating card.
- Do not use generic wide sans-serif headlines in place of the condensed display voice.
- Do not let dense metadata compete with the primary headline.
- Do not treat illustration-only dark greens as core interface colors.

## Agent prompt

Build a new Eclipse page using a strict black-and-white base with Signal Green (#a1fea0) reserved for actions, feature emphasis, and selected bands. Use Deep Ink (#000000) for text, rules, and dark cinematic sections; Gallery White (#ffffff) for the canvas and editorial content. Carbon Gray (#333333) may support secondary dark surfaces. Pair bold condensed uppercase display type with elegant editorial headlines and compact typewriter-style utility copy. Structure content in spacious full-width bands, alternating media-led dark scenes, clean white sections, and green-and-white split features. Favor thin rules and modular grids over shadows. Keep controls pill-shaped, labels concise, and major headlines visually dominant. Use graphic or cinematic artwork as a deliberate large-scale field, not as generic decorative clutter. Maintain clear contrast and preserve generous breathing room around section transitions.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Centered white consent dialog overlays the dimmed, full-screen hero. | Accept or deny before entry, Terms and privacy links | White rounded dialog, Green and black pill buttons, Darkened backdrop |
| 2 | hero | Full-bleed cinematic hero with centered headline and compact top navigation. | Primary build action, Secondary bridge action | Near-black canvas, Oversized condensed lettering, Illustrated landscape |
| 3 | video | Full-width video field with a centered play control and ticker bands. | Tap to play, Ticker reinforces network message | Dark cinematic video, White scrolling text bands, Outlined play circle |
| 4 | feature-split | Two alternating text-and-symbol feature rows with green and white halves. | Learn-more links, Alternating feature order | Signal Green panels, Large network marks, Thin cell dividers |
| 5 | feature-split | White headline panel with a large green graphic extending from the right. | Broad brand statement | Editorial headline, Oversized green illustration |
| 6 | stats | Centered metrics and categories arranged as a ruled grid. | Scan ecosystem figures, Compare categories | White cells, Thin black dividers, Condensed bold values |
| 7 | feature-split | Open white section with stacked heading and action opposite a large green shape. | Resources call to action | Asymmetric two-sided composition, Green graphic field |
| 8 | content-feed | Black news section with a large editorial title and horizontally arranged white cards. | Open announcement links, Browse multiple updates | Oversized display headline, Rounded white cards, Compact metadata |
| 9 | logo-cloud | Centered heading above a three-column grid of investor name capsules. | Scan investor roster | White canvas, Thin capsule outlines, Centered names |
| 10 | cta | Centered stacked CTA within a full-width black section. | Join community, Social channel links | White condensed headline, Green wordmark emphasis, Small social icons |
| 11 | footer | Full-width green footer with grouped links, network label, social icons, and large wordmark. | Navigate resources and policies, Follow social channels | Signal Green background, Compact link groups, Oversized black wordmark |

## Source CSS custom properties (selected)

```css
--type-body--font: "Barlow Condensed", sans-serif;
--colors-all--black: black;
--type-body--font-size-lg: 1rem;
--type-body--letter-spacing: -.03em;
--type-body--font-size-md: 1rem;
--type-body--font-size-sm: 12px;
--type-body--font-size-xs: 12px;
--type-h1--font: "Gt Alpina Condensed", sans-serif;
--type-h1--font-size-lg: 5.5rem;
--type-h1--letter-spacing: 0em;
--type-h1--font-size-md: 4.8rem;
--type-h1--font-size-sm: 3.6rem;
--type-h1--font-size-xs: 2.8rem;
--type-h2--font: "Gt Alpina Condensed", sans-serif;
--type-h2--font-size-lg: 3.8rem;
--type-h2--letter-spacing: 0em;
--type-h2--font-size-md: 3.2rem;
--type-h2--font-size-sm: 2.5rem;
--type-h2--font-size-xs: 2rem;
--type-h3--font: "Gt Alpina Condensed", sans-serif;
--type-h3--font-size-lg: 2rem;
--type-h3--letter-spacing: 0em;
--type-h3--font-size-md: 2rem;
--type-h3--font-size-sm: 1.4rem;
--type-h3--font-size-xs: 1.4rem;
--type-h4--font: "Gt Alpina Condensed", sans-serif;
--type-h4--font-size-lg: 1.25rem;
--type-h4--letter-spacing: 0em;
--type-h4--font-size-md: 1.25rem;
--type-h4--font-size-sm: 1.25rem;
--type-h4--font-size-xs: 1.25rem;
--colors-all--primary: #d14424;
--spacing-layout--section-padding-lg: 1.5rem;
--spacing-layout--section-padding-md: 4rem;
--spacing-layout--section-padding-sm: 3rem;
--spacing-layout--section-padding-xs: 2rem;
--colors-all--white: white;
--colors-all--mint-green: #a1fea0;
--spacing-layout--container-max-width: 87.5rem;
--component-card--border-radius: .5rem;
```

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