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

# NEAR · Design System

> A cinematic dark canvas for open infrastructure

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

NEAR pairs stark black-and-white content sections with immersive, vivid green motion and 3D artwork. Spacious editorial layouts and restrained controls keep the focus on its infrastructure story.

## North star

Let cinematic green media command attention while keeping interface chrome minimal, high-contrast, and editorial.

## Overview

The page alternates between a cinematic, media-led opening and a long black feature-story band, then returns to white for partner logos, editorial updates, and signup. Use Gallery White (#ffffff) and Carbon (#000000) as the defining surfaces; the bright green and turquoise tones visible in the hero and feature art belong primarily to media, not a general-purpose UI palette. Typography is FKGrotesk: large, centered hero copy contrasts with compact body text and left-aligned feature headings. Mona Sans appears only for small caption-style text. Keep content within a broad centered frame, with generous vertical pauses between major stories and simple two-column feature rows. Thin borders and squared-off, lightly rounded controls provide structure without shadows. Preserve the shift from immersive motion to quiet, legible editorial content rather than adding decorative UI.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main canvas for the hero, partner section, editorial feed, and newsletter; also the primary text color on dark surfaces. |
| Carbon | `#000000` | `--color-carbon` | brand | Dominant feature-story band, cards, and footer surface; also the primary text color on white. |
| Quiet Gray | `#757575` | `--color-quiet-gray` | semantic | Muted supporting copy and secondary links, especially in footer and content areas. |
| Soft Alloy | `#e5e5e5` | `--color-soft-alloy` | surface | Subtle control surface and card-border tone; appears on the audio control and card treatments. |
| Graphite Line | `#595959` | `--color-graphite-line` | neutral | Hairline border tone for restrained separation; keep it secondary to the black-and-white contrast. |
| Mint Wash | `#c7f5d8` | `--color-mint-wash` | surface | Pale green media surface, notably the quote treatment; not a default page canvas. |
| Electric Turquoise | `#17d9d4` | `--color-electric-turquoise` | accent | Vivid turquoise within prominent media artwork; use as an illustrative accent rather than routine interface color. |
| Warm Parchment | `#f2f1e9` | `--color-warm-parchment` | surface | Measured input border tone for the newsletter field, a subtle warm-neutral detail. |
| Signal Green | `#00ec97` | `--color-signal-green` | accent | Small bright-green link and footer accent, including the vivid Join today treatment. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Carbon) · `--color-surface-2` → `#c7f5d8` (Mint Wash) · `--color-surface-3` → `#e5e5e5` (Soft Alloy) · `--color-text` → `#000000` (Carbon) · `--color-text-muted` → `#757575` (Quiet Gray) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#595959` (Graphite Line) · `--color-accent` → `#17d9d4` (Electric Turquoise) · `--color-accent-2` → `#00ec97` (Signal Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#c7f5d8` | 17.48:1 | AAA |
| `#000000` | `#e5e5e5` | 16.67:1 | AAA |
| `#757575` | `#ffffff` | 4.61:1 | AA |
| `#757575` | `#000000` | 4.56:1 | AA |
| `#757575` | `#c7f5d8` | 3.84:1 | AA-large |
| `#757575` | `#e5e5e5` | 3.66:1 | AA-large |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#c7f5d8` | 1.2:1 | fail |
| `#ffffff` | `#e5e5e5` | 1.26:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| FKGrotesk | `--font-body` | webfont | 400, 500, 700 | Primary typeface for display, headings, body copy, navigation, and links. | Space Grotesk |

- **FKGrotesk:** Use regular and medium weights for most content, with bold reserved in the measured family; natural case and untracked lettering.

### Type scale — Custom (ratio ≈ 1.71, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1 | 0 | — | FKGrotesk | Oversized hero headline over full-bleed opening media. |
| h1 | 44px | 500 | 1.09 | 0 | — | FKGrotesk | Primary page or section headings, including feature-led titles. |
| h2 | 24px | 500 | 1.25 | 0 | — | FKGrotesk | Secondary section headings and feature titles. |
| body | 16px | 400 | 1.5 | 0 | — | FKGrotesk | Descriptive copy, explanatory paragraphs, and card text. |
| caption | 12px | 600 | 1.17 | 0 | — | Mona Sans | Small, emphasized labels and compact captions. |
| nav | 16px | 400 | 1.5 | 0 | — | FKGrotesk | Header navigation and footer link groups. |
| link | 16px | 400 | 1.5 | 0 | — | FKGrotesk | Inline calls to action and editorial links. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 8, 16, 20, 24, 32, 36, 40, 56, 64, 96, 112, 128 px.
- Section rhythm 128px · element gap 8px · card padding 32px · max content width 1280px.

Use a broad centered content frame, measured at a 1280px maximum width, and alternate full-bleed media with contained editorial sections. The hero centers its headline and supporting copy; later feature stories use spacious two-column rows with alternating image and text placement. Follow the measured 128px section rhythm and an 8px-based spacing system, allowing large pauses between content bands. White partner, blog, and signup sections contrast with a long black infrastructure band. Keep the overall density spacious, not card-heavy.

## Shape & elevation

- Radius: button `4px` · input `4px` · card `4px` · link `4px` · xs `4px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The visual system is predominantly flat, with no measured shadow treatments. Separate content using black and white section bands, hairline borders, and card outlines rather than raised surfaces. Cards and controls use lightly rounded corners; artwork supplies most of the depth through rendered 3D lighting.

## Imagery

Lead with full-bleed video and a luminous, dimensional NEAR mark against a dark field. Feature sections use isolated 3D infrastructure illustrations with vivid teal and green highlights on black. Partner marks and editorial cards are quieter and more contained. Treat these strong greens as media colors, preserving legible text and clean layouts around the artwork.

## Components

### Header navigation

A compact, horizontal navigation row with black text on white in measured styles; the hero screenshot shows the navigation over dark media in white.

### Hero

Centered display headline and supporting copy layered over a full-bleed video background, with restrained primary actions.

### Feature story row

Black-band feature content arranged as alternating two-column rows, pairing explanatory text and a 3D illustration.

### Partner tile

White-background logo tile with a fine outline, partner identity, supporting copy, and a muted Learn more link.

### Editorial card

Dark card with a thin #e5e5e5 border and #000000 fill, used for news items within the white editorial section.

### Newsletter form

White section with an email input using a #f2f1e9 border and a black Subscribe button with white text.

### Footer

Black multi-column link area with muted secondary text, a bright-green join treatment, and separated legal links.

### Measured component styles

- **Primary button** (“Play with audio”): background #e5e5e5 · text #000000 · radius 0px · padding 0px · 400 16px FKGrotesk
- **Secondary button** (“Build on NEAR”): transparent background · text #ffffff · border 1px solid #ffffff · radius 4px · padding 8px · 500 16px FKGrotesk
- **Link** (“Learn more”): transparent background · text #757575 · radius 0px · padding 0px · 400 16px FKGrotesk
- **Input**: transparent background · text #000000 · border 1px solid #f2f1e9 · radius 4px · padding 12px 16px · 400 16px FKGrotesk
- **Card** (“Introducing Dynamic Resharding: Automati”): background #000000 · text #ffffff · border 1px solid #e5e5e5 · radius 4px · padding 32px · 400 16px FKGrotesk
- **Navigation item** (“For Founders For Developers Tech Stack C”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px FKGrotesk

## Do

- Use black and white section bands as the page's structural backbone.
- Reserve vivid green and turquoise for prominent media and selective accents.
- Keep hero copy centered and feature headings editorial and left-aligned.
- Alternate feature imagery and text to create a steady story rhythm.
- Use generous whitespace around partner and news content.
- Prefer thin borders and flat surfaces over shadowed cards.

## Don't

- Do not make green the default background for every section.
- Do not add gradients or shadows unsupported by the measured system.
- Do not crowd feature copy against its illustrations.
- Do not use decorative rounded cards throughout the page.
- Do not make secondary links louder than primary content.
- Do not treat colors inside 3D artwork as universal UI tokens.

## Agent prompt

Build a new NEAR-style page using a clean, spacious editorial structure. Anchor the palette in Gallery White (#ffffff) and Carbon (#000000); use Quiet Gray (#757575) for secondary text and Graphite Line (#595959) for subtle separators. Keep Signal Green (#00ec97), Electric Turquoise (#17d9d4), and Mint Wash (#c7f5d8) selective, primarily for media or small accents. Set type in FKGrotesk or a close sans-serif substitute, with a large centered opening headline, clear left-aligned section headings, and readable body copy. Use full-bleed cinematic media for the hero, then alternate black feature bands with spacious two-column text and 3D artwork. Return to white for partners, editorial cards, and the newsletter. Avoid shadows, excessive rounding, and busy decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video backdrop with centered headline, copy, and paired actions. | Primary entry point, Action links | Oversized white headline, Dark media field, Centered copy |
| 2 | video | Full-bleed, single-column video section. | Audio toggle | Black canvas, Minimal audio control |
| 3 | feature-split | Contained single-row split between an image and explanatory text. | Learn more link | Black background, Image and text columns |
| 4 | category-nav | Centered title in a narrow black section band. | Section transition | Centered white heading, Thin divider |
| 5 | feature-split | Single feature row with text and product image. | Try it link | Black band, Two-column split |
| 6 | feature-split | Alternating image-and-copy feature row. | Explore link | Black band, Illustration and text |
| 7 | feature-split | Alternating feature row with copy and isolated illustration. | Explore link | Black band, Teal-toned 3D artwork |
| 8 | feature-split | Two-column feature row within the black story band. | Architecture link | Black background, 3D illustration |
| 9 | feature-split | Alternating feature row pairing concise text with product imagery. | Explore link | Black band, Green 3D media |
| 10 | feature-split | Two-column feature row with text and a repeated visual grid. | Governance link | Black background, Small repeated illustrations |
| 11 | testimonials | Full-width quote treatment with supporting portrait or media. | Founder attribution | Pale mint surface, Large dark quotation |
| 12 | integrations | Centered heading above a partner showcase. | Toggle layout | White canvas, Partner marks, Muted links |
| 13 | content-feed | Three-column editorial card grid with additional cards below. | View all articles | White background, Black cards, Media thumbnails |
| 14 | newsletter | Full-width signup band with two-column content and form. | Email capture, Subscribe action | Bright turquoise-green band, Email field, Black button |
| 15 | footer | Three-column navigation groups with a separate join panel. | Grouped site links, Join today action | Black canvas, Muted links, Green callout |
| 16 | footer | Black legal footer strip with separated link areas. | Privacy links | Thin dividers, White wordmark, Muted legal text |

## Source CSS custom properties (selected)

```css
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
--background: #ffffff;
--foreground: #171717;
```

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