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

# Adnaut · Design System

> A dark orbital canvas punctuated by signal yellow.

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

Adnaut’s homepage pairs a charcoal canvas with a vivid yellow signal colour and restrained, light typography. Orbital 3D imagery, fine outlines and modular sections make the consultancy feel like a navigation system for digital media.

## North star

Treat the dark canvas as an orbital stage and use yellow sparingly to direct attention, motion and action.

## Overview

The page is built around a charcoal field, with #282828 carrying most content sections and #222222 grounding cards and media frames. Signal yellow #ffe900 is reserved for the logo detail, calls to action, directional arrows and selected emphasis; it reads as a navigational cue rather than a broad decorative fill. Large, light Archivo headlines sit beside compact Geist body copy, while Geistmono uppercase labels lend navigation and small controls a technical, instrument-panel quality. The layout alternates wide framed media with split content blocks, card groupings and horizontal client marks, maintaining generous separation between sections. Imagery is predominantly dark, cinematic 3D artwork: glowing orbs, geometric forms and yellow light beams create depth without competing with the copy. Thin grey outlines define cards and media edges; rounded corners remain modest, and the interface avoids prominent shadows. Green or other bright hues appear selectively in imagery or sustainability details, not as the core brand palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Signal Yellow | `#ffe900` | `--color-signal-yellow` | brand | Signature canvas and accent; marks the logo, primary CTA, arrows, selected text and occasional section emphasis. |
| Moon Dust | `#d7d7d7` | `--color-moon-dust` | neutral | Primary light text for headings, body copy and links against dark sections. |
| Orbit Black | `#222222` | `--color-orbit-black` | surface | Dark inverse surface for cards, media areas and selected section treatments. |
| Charcoal Field | `#282828` | `--color-charcoal-field` | surface | Dominant page background and continuous canvas behind the homepage sections. |
| Graphite Line | `#707070` | `--color-graphite-line` | neutral | Thin outlines and dividers around cards, section frames and links. |
| Soft Silver | `#f2f2f2` | `--color-soft-silver` | neutral | Occasional muted link and supporting text on dark surfaces. |
| Olive Shadow | `#1f1d01` | `--color-olive-shadow` | surface | Rare near-black olive section tone; retain only where a subtle warm dark variation is needed. |
| Absolute Black | `#000000` | `--color-absolute-black` | neutral | Minor text or gradient endpoint in measured data; not a defining visible page surface. |
| Pale Metal | `#c0c0c0` | `--color-pale-metal` | neutral | Occasional light link outline; a supporting border tone rather than a major palette colour. |
| Slate Grey | `#8d8d8d` | `--color-slate-grey` | neutral | Rare muted link text; use only for secondary details where contrast remains clear. |

### Semantic aliases

`--color-canvas` → `#ffe900` (Signal Yellow) · `--color-surface` → `#282828` (Charcoal Field) · `--color-surface-2` → `#222222` (Orbit Black) · `--color-surface-3` → `#1f1d01` (Olive Shadow) · `--color-text` → `#d7d7d7` (Moon Dust) · `--color-text-muted` → `#f2f2f2` (Soft Silver) · `--color-text-subtle` → `#282828` (Charcoal Field) · `--color-border` → `#707070` (Graphite Line) · `--color-accent` → `#ffe900` (Signal Yellow) · `--color-on-accent` → `#222222` (Orbit Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#d7d7d7` | `#ffe900` | 1.16:1 | fail |
| `#d7d7d7` | `#282828` | 10.24:1 | AAA |
| `#d7d7d7` | `#222222` | 11.05:1 | AAA |
| `#d7d7d7` | `#1f1d01` | 11.82:1 | AAA |
| `#f2f2f2` | `#ffe900` | 1.11:1 | fail |
| `#f2f2f2` | `#282828` | 13.17:1 | AAA |
| `#f2f2f2` | `#222222` | 14.21:1 | AAA |
| `#f2f2f2` | `#1f1d01` | 15.2:1 | AAA |
| `#282828` | `#ffe900` | 11.87:1 | AAA |
| `#282828` | `#222222` | 1.08:1 | fail |

### Gradients

- `radial-gradient(circle, rgb(34, 34, 34) 26%, rgb(34, 34, 34) 50%, rgba(0, 0, 0, 0)), url("https://cdn.prod.website-files.com/67483203cd01f82807f9e5a1/674d8a3814d2a04309247277_grid.svg")`
- `repeating-linear-gradient(rgb(34, 34, 34) 30%, rgba(34, 34, 34, 0))`
- `linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(40, 40, 40, 0.7) 65%, rgb(40, 40, 40))`
- `linear-gradient(90deg, rgb(40, 40, 40), rgba(40, 40, 40, 0.7) 35%, rgba(255, 255, 255, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 400, 300, 500 | Body copy, captions, links and most interface text. | Inter |
| Archivo | `--font-display` | webfont | 300, 100, 400 | Display headlines and section headings. | Archivo |
| Geistmono | `--font-mono` | webfont | 400, 600 | Uppercase navigation, labels and technical microcopy. | Space Mono |

- **Geist:** Neutral sans with readable, compact body rhythm; regular text is common, with medium-weight captions.
- **Archivo:** Light weights create broad, airy headlines; keep case natural and avoid added tracking.
- **Geistmono:** Use uppercase for nav and utility labels; measured nav is semibold, while code-style text is regular.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 300 | 1 | 0 | — | Archivo | Large, light-weight headline moments, especially hero-scale messaging. |
| h1 | 56px | 300 | 1 | 0 | — | Archivo | Primary hero headline and top-level page statement. |
| h2 | 48px | 300 | 1 | 0 | — | Archivo | Major section headings and prominent content titles. |
| h3 | 32px | 100 | 1 | 0 | — | Archivo | Secondary feature titles and compact card headings. |
| h4 | 24px | 300 | 1 | 0 | — | Archivo | Smaller card, quote, and sub-section headings. |
| body | 16px | 400 | 1.5 | 0 | — | Geist | Paragraphs, service descriptions, and testimonial copy. |
| caption | 14px | 500 | 1.5 | 0 | — | Geist | Compact metadata, labels, and supporting annotations. |
| nav | 16px | 600 | 1 | 0 | uppercase | Geistmono | Uppercase primary navigation and technical menu labels. |
| link | 14px | 400 | 1.5 | 0 | — | Geist | Inline links and supporting calls to action. |
| code | 16px | 400 | 1.5 | 0 | uppercase | Geistmono | Uppercase technical or instrument-panel style microcopy. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 6, 8, 11, 12, 16, 20, 24, 28, 32, 40, 48, 50, 54, 64, 70, 80 px.
- Section rhythm 64px · element gap 32px · card padding 67px · max content width 1392px.

The measured content max width is 1392px, with a spacious rhythm based on an 8px unit and a 64px section gap. The page alternates a single-column hero with two-column feature splits, multi-column process content and horizontal logo rows. Headings align mostly to the start, with the process heading centered. Large framed media blocks anchor sections; smaller cards and CTA strips sit alongside or below them. Preserve generous breathing room rather than compressing the long scroll into dense stacks.

## Shape & elevation

- Radius: button `4px` · card `8px` · link `16px` · xs `4px` · sm `8px` · md `16px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease-out` on interactive elements.

The interface is mostly flat: no measured shadows define the system. Thin grey borders separate dark cards and media panels, while imagery and overlapping frames supply depth. Use modest rounded corners on interface panels and CTAs; keep layers controlled and avoid glossy elevation effects.

## Imagery

Use cinematic 3D illustration and motion-led media rather than conventional stock photography. Frame dark scenes with geometric platforms, orbital forms, luminous spheres and focused yellow beams. Keep images inside outlined, softly rounded panels or let a large visual span a section. Bright colour inside the artwork can include incidental greens, pinks and cyan, but the surrounding interface stays charcoal and yellow.

## Components

### Header and navigation

Place the wordmark at the left, a yellow LET'S TALK action at the right, and a compact uppercase mono navigation strip that can overlap the hero media edge.

### Hero media frame

Pair a large light Archivo headline with short supporting copy and a wide, dark framed visual; place a small outlined mono watch-action label near its top edge.

### Feature cards

Use charcoal panels with fine grey outlines and restrained corner rounding; combine a large editorial headline, supporting copy and visual storytelling.

### Process showcase

Present the five-step ROI approach as a prominent framed visual with a centered section heading and selectively highlighted yellow step.

### Service links

Show services as large outlined link panels with light text and a clear yellow directional arrow, arranged around a bold media feature.

### Testimonial carousel

Use dark quote cards with large yellow quotation marks, compact client copy, attribution and small profile imagery; include visible yellow navigation controls.

### Primary CTA

Use a yellow filled button with dark text, a fine yellow border and a separate or adjacent arrow control; keep the corner treatment modest.

### Footer

Group navigation and contact details in bordered dark panels, alongside the yellow wordmark, a prominent LET'S TALK action and a separate animated or illustrated visual.

### Measured component styles

- **Primary button**: background #ffe900 · text #222222 · border 1px solid #ffe900 · radius 4px · padding 12px 17px 12px 12px · 400 16px Geist
- **Link** (“Digital Media”): background #222222 · text #d7d7d7 · border 1px solid #707070 · radius 16px · padding 48px 32px · 400 16px Geist
- **Card** (“Adnaut has been an exceptional partner f”): background #222222 · text #ffffff · radius 0px · padding 70px 50px 96px 50px · 400 16px Geist
- **Navigation item** (“LET'S TALK”): transparent background · text #d7d7d7 · radius 0px · padding 0px · 400 16px Geist

## Do

- Keep the main canvas charcoal and consistent across long sections.
- Use signal yellow for actions, arrows and deliberate points of emphasis.
- Set major headings in a light, large editorial sans.
- Use uppercase monospace for navigation and technical labels.
- Frame cards and media with fine grey outlines.
- Give large visuals and section transitions ample breathing room.

## Don't

- Do not spread bright yellow across every surface.
- Do not replace the dark palette with generic white sections.
- Do not use heavy shadows to create card hierarchy.
- Do not crowd the layout with dense, uniformly sized cards.
- Do not treat illustration-only accent colours as core brand colours.
- Do not make headlines bold and tightly compressed.

## Agent prompt

Build a new page in Adnaut’s dark, cinematic visual language. Use Charcoal Field (#282828) as the continuous canvas and Orbit Black (#222222) for selected cards and media surfaces. Set headlines in light Archivo, supporting copy in Geist, and uppercase utility navigation in Geistmono. Reserve Signal Yellow (#ffe900) for primary actions, arrows, logo details and a few deliberate text accents. Organize content into spacious split layouts, framed media panels and clear section bands; use the measured 1392px maximum content width and 64px section rhythm where applicable. Create depth through dark 3D orbital imagery, glowing forms and restrained overlaps, not heavy shadows. Outline panels with Graphite Line (#707070), keep corners modest, and make every action easy to distinguish. Keep incidental illustration colours secondary to the interface palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Yellow opening canvas with a dark hero composition, large headline and framed media. | Hero introduction, Watch-action affordance | Signal yellow canvas, Light headline, Dark framed media |
| 2 | feature-split | Two-column composition: one large editorial panel beside two stacked message panels. | Brand introduction, Benefit summary | Outlined feature card, Stacked supporting cards, Selective bright artwork |
| 3 | how-it-works | Centered heading above a broad, full-bleed process visual. | Process overview, Step highlight | Dark media frame, Yellow active step, Compact explanatory overlay |
| 4 | logo-cloud | A short heading followed by a horizontal row of client logos. | Client proof, Horizontal logo browsing | Dark logo tiles, Thin borders, Monochrome marks |
| 5 | feature-grid | Large feature artwork with three oversized service links arranged around or beneath it. | Service discovery, Category navigation | Full-bleed visual, Outlined link cards, Yellow arrows |
| 6 | cta | Single wide outlined strip with a compact label, title and right-aligned arrow. | Explore technology, Single-action navigation | Dark CTA band, Fine border, Yellow arrow |
| 7 | feature-split | Two-column split with text and CTA on one side, atmospheric artwork on the other. | Technology overview, View-details CTA | Outlined panels, Yellow headline emphasis, Orbital 3D artwork |
| 8 | cta | A shallow outlined horizontal banner with text on the left and a bright arrow on the right. | Sustainability entry point, Banner link | Uppercase mono eyebrow, Light title, Green directional accent |
| 9 | testimonials | Section heading and visual on the left, horizontally arranged testimonial cards on the right. | Client proof, Carousel navigation | Dark quote cards, Yellow quote marks, Portraits and arrow controls |
| 10 | video | Full-width cinematic media panel with a bold angled message inside the scene. | Brand storytelling, Immersive media | Wide framed video, Dark geometric setting, Luminous focal point |
| 11 | footer | Multi-column footer with bordered navigation and contact panels beside a larger animated media panel. | Contact options, Footer navigation, Primary enquiry CTA | Yellow wordmark tile, Dark outlined panels, Large yellow action |

## Source CSS custom properties (selected)

```css
--base-color-neutral--grey: #282828;
--base-color-neutral--text-grey: #d7d7d7;
--link-color--link-primary: #000;
--background-color--background-primary: #000;
--text-color--text-alternate: #222;
--text-color--text-primary: #000;
--text-color--text-secondary: #ffe900;
--background-color--background-success: #cef5ca;
--text-color--text-success: #114e0b;
--base-color-neutral--medium-grey: #707070;
--border-color--border-primary: #000;
--base-color-neutral--gray-neutral: #8d8d8d;
--background-color--background-alternate: #fff;
--background-color--background-secondary: #ffe900;
--background-color--background-error: #f8e4e4;
--text-color--text-error: #3b0b0b;
--base-color-brand--yellow: #ffe900;
--border-color--border-alternate: #000;
--base-color-brand--green: #00ff1a;
--background-color--background-warning: #fcf8d8;
--text-color--text-warning: #5e5515;
--background-color--background-tertiary: #fe76a1;
--base-color-brand--cyan: #3af6ff;
--background-color--background-magneta: #f73371;
--background-color--background-green: #00ff1a;
--background-color--background-orange: #ff5634;
--background-color--background-blue: #000a9d;
--base-color-brand--pink: #fe76a1;
--base-color-brand--orange: #ff5634;
--link-color--link-alternate: #fff;
--base-color-neutral--light-grey: #f2f2f2;
--base-color-neutral--darkest-grey: #222;
--base-color-neutral--silver: silver;
--base-color-neutral--black-shade: #1d1d1d;
--base-color-neutral--white: #fff;
--base-color-brand--magenta: #f73371;
--base-color-brand--purple: #74009f;
--base-color-brand--blue: #000a9d;
--base-color-neutral--black: #000;
--base-color-system--success-green: #cef5ca;
```

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