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

# Andercore · Design System

> Industrial clarity in a dark, red-accented frame.

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

Andercore presents industrial materials sourcing as a confident, technology-led service through a near-black canvas, crisp white typography, and restrained red calls to action. Full-width construction and operations photography is balanced by structured feature grids, fine rules, and spacious text-led sections.

## North star

Use the near-black canvas and fine rules to frame real industrial imagery, reserving bright red for the most important action.

## Overview

The visual identity is built on a near-black canvas (#0b0405) that lets the industrial imagery feel immersive without turning the interface into a conventional catalog. White headings and muted-gray supporting text establish a clear reading hierarchy, while vivid red (#e32735) is reserved for the primary quote actions, selected emphasis, and map details. Archivo carries nearly all interface typography: medium-weight, tightly tracked headings contrast with regular, comfortably spaced body copy. Space Mono appears in small uppercase labels, adding a technical data-note quality. The page alternates cinematic, full-bleed media with centered introductions, image-led feature cards, and split content blocks. Fine dark borders organize cards and section edges instead of shadows. Consistent section breaks and generous vertical breathing room keep the long homepage navigable; images provide most of its tonal variation, rather than extra interface colors.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Foundry Black | `#0b0405` | `--color-foundry-black` | brand | Dominant page canvas behind the navigation, hero, content sections, and footer. |
| Signal Red | `#e32735` | `--color-signal-red` | accent | Primary quote buttons, selected accents, and highlights within the map graphic. |
| Pale Alloy | `#cecdcd` | `--color-pale-alloy` | neutral | Main muted body copy and secondary navigation and link text against dark sections. |
| Hard White | `#ffffff` | `--color-hard-white` | surface | Headings, prominent copy, links, and text on red or gray buttons. |
| Iron Seam | `#382e30` | `--color-iron-seam` | neutral | Subtle card, navigation, and section hairlines that divide the dark canvas. |
| Deep Overlay | `#000000` | `--color-deep-overlay` | semantic | Photographic and gradient overlay tone; not a defining standalone interface surface. |
| Ash Gray | `#858182` | `--color-ash-gray` | neutral | Occasional subdued text, secondary to the more commonly used pale-gray copy. |

### Semantic aliases

`--color-canvas` → `#0b0405` (Foundry Black) · `--color-surface` → `#ffffff` (Hard White) · `--color-text` → `#ffffff` (Hard White) · `--color-text-muted` → `#cecdcd` (Pale Alloy) · `--color-text-subtle` → `#858182` (Ash Gray) · `--color-border` → `#382e30` (Iron Seam) · `--color-accent` → `#e32735` (Signal Red) · `--color-on-accent` → `#ffffff` (Hard White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#0b0405` | 20.31:1 | AAA |
| `#cecdcd` | `#0b0405` | 12.81:1 | AAA |
| `#cecdcd` | `#ffffff` | 1.59:1 | fail |
| `#858182` | `#0b0405` | 5.28:1 | AA |
| `#858182` | `#ffffff` | 3.85:1 | AA-large |
| `#e32735` | `#0b0405` | 4.46:1 | AA-large |
| `#e32735` | `#ffffff` | 4.56:1 | AA |

### Gradients

- `linear-gradient(0deg, rgb(0, 0, 0), rgba(255, 255, 255, 0))`
- `linear-gradient(90deg, rgb(255, 255, 255) 18%, rgb(227, 39, 53))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Archivo | `--font-body` | webfont | 400, 500 | Display and heading text, body copy, navigation, links, and buttons. | Inter |
| Space Mono | `--font-mono` | webfont | 400 | Small uppercase captions and technical-style labels. | IBM Plex Mono |

- **Archivo:** Use measured weights 400 and 500. Headings are compact with negative tracking; body and navigation remain regular and untransformed.
- **Space Mono:** Use regular weight for compact uppercase labels and code-like annotations.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 56px | 500 | 1.1 | -0.02em | — | Archivo | Large hero or campaign headline. |
| h1 | 40px | 500 | 1.1 | -0.02em | — | Archivo | Primary page and major section headings. |
| h2 | 24px | 500 | 1.2 | -0.02em | — | Archivo | Feature titles and secondary section headings. |
| body | 16px | 400 | 1.5 | 0 | — | Archivo | Explanatory paragraphs and feature descriptions. |
| caption | 12px | 400 | 1.5 | 0 | uppercase | Space Mono | Small uppercase section labels and category markers. |
| button | 16px | 500 | 1.5 | 0 | — | Archivo | Quote and supply-partner calls to action. |
| nav | 16px | 400 | 1.5 | 0 | — | Archivo | Header navigation labels. |
| link | 16px | 400 | 1.5 | 0 | — | Archivo | Inline and location links. |
| code | 12px | 400 | 1.5 | 0 | uppercase | Space Mono | Compact uppercase technical annotations. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 6, 8, 12, 16, 24, 28, 32, 40, 48, 64, 72 px.
- Section rhythm 64px · element gap 32px · card padding — · max content width 1294px.

The content sits within a centered frame measured at a 1294px maximum width, with dark outer margins visible in the desktop screenshot. A spacious 8px-based rhythm supports long sections, and the measured section gap is 64px. The page alternates two-column hero and editorial splits with centered introductions, multi-column feature grids, and image-led cards. Most text aligns to the left within its block; section introductions often center. Hairlines trace card and section boundaries, while repeated grid layouts make the long page feel ordered rather than dense.

## Shape & elevation

- Radius: button `4px` · media `50%` · xs `4px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is predominantly flat, with no measured shadows. Thin #382e30 borders define cards, section edges, and navigation divisions against the dark canvas. Use dark overlays within photography for legibility, and keep the red-gradient treatment confined to the closing campaign area rather than adding general raised surfaces.

## Imagery

Use documentary-style photography and a full-bleed construction-site video for the hero. Images show infrastructure, warehouses, logistics, workers, and business operations, usually cropped to fill rectangular panels. The hero uses a dark fade over its footage so white copy remains legible. Partner marks and a dotted world map provide supporting graphic content; warm color in the photos belongs to the media, not the interface palette.

## Components

### Primary quote button

Red #e32735 fill with white Archivo text, a matching 1px border, and a measured 4px radius; the common measured padding is 12px 24px.

### Supply partner button

Muted charcoal-gray fill with white text and a darker border; use the measured 4px radius and 12px 24px padding.

### Header navigation

A compact dark header with the wordmark, white Archivo navigation, partner action, red quote action, and language control.

### Bordered feature card

Flat dark content area with white heading and copy, separated from neighboring cards by a fine #382e30 border; card radius measures 0px.

### Image feature tile

Rectangular industrial or workplace photograph paired with a dark copy area, short title, and muted supporting text.

### Technical section marker

Small uppercase Space Mono label preceding a larger Archivo heading, used to identify sections such as solution or careers.

### Closing campaign panel

Centered logo, headline, short supporting copy, and paired actions over a dark field with a red-to-white gradient treatment.

### Measured component styles

- **Primary button** (“Get a quote”): background #e32735 · text #ffffff · border 1px solid #e32735 · radius 4px · padding 12px 24px · 500 16px Archivo
- **Secondary button** (“Become a supply partner”): background #3c3637 · text #ffffff · border 1px solid #241e1f · radius 4px · padding 12px 24px · 500 16px Archivo
- **Link** (“Aschaffenburg”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Archivo
- **Card** (“Real time offering Instant, AI-driven pr”): transparent background · text #ffffff · border 1px solid #382e30 · radius 0px · padding 0px · 400 16px Archivo
- **Navigation item** (“About us Career Login Become a supply pa”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Archivo

## Do

- Keep the canvas near-black and consistent across sections.
- Reserve Signal Red for primary actions and selected highlights.
- Use Archivo for nearly all interface text.
- Set small technical labels in uppercase Space Mono.
- Separate cards and sections with fine dark hairlines.
- Let genuine industrial photography carry the warm color.
- Alternate image-led blocks with spacious text sections.

## Don't

- Do not introduce bright colors beyond the measured palette.
- Do not add shadows or raised-card effects.
- Do not turn every section into a centered card grid.
- Do not use decorative gradients across ordinary content.
- Do not make secondary copy as bright as the headings.
- Do not style the interface like a conventional product catalog.

## Agent prompt

Build a new Andercore-style industrial materials page with a Foundry Black canvas (#0b0405), white headings (#ffffff), and Pale Alloy copy (#cecdcd). Use Signal Red (#e32735) sparingly for the primary CTA and selected details. Keep Iron Seam (#382e30) hairlines subtle; avoid shadows and raised surfaces. Set most content in Archivo, with Space Mono reserved for small uppercase technical labels. Compose a cinematic industrial-photo hero with a dark legibility overlay, then alternate centered introductions, image-led feature grids, and left-aligned editorial splits. Keep the layout spacious and structured within the measured 1294px maximum width, using the measured section rhythm. Let photography provide natural tonal variation rather than adding interface colors. Finish with a focused campaign block and clear paired actions.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width construction video with lower-left copy and paired actions. | prominent quote action, partner action | dark media overlay, large white headline, red primary button |
| 2 | logo-cloud | Shallow horizontal band containing two image marks. | brand recognition | dark canvas, thin section borders |
| 3 | comparison | Centered heading above three comparison columns and supporting graphics. | problem framing, three-part scan | centered introduction, fine dividers, dark cards |
| 4 | other | Narrow centered statement beneath a small logo. | mission statement | centered white copy, dark background, graphic divider |
| 5 | feature-grid | Centered introduction followed by four image-and-copy columns. | service overview, scannable features | four-column grid, photographic tiles, bordered copy areas |
| 6 | integrations | Centered heading and introduction above three partner groups. | partner credibility | grouped partner marks, fine vertical dividers, small uppercase labels |
| 7 | logo-cloud | Shallow horizontal band containing two images. | visual transition | dark canvas, hairline boundaries |
| 8 | how-it-works | Left-aligned introduction with a multi-step, image-supported process. | step-by-step guidance, process explanation | numbered steps, media panels, text and image split |
| 9 | logo-cloud | Short transition strip with two images. | visual transition | dark band, thin borders |
| 10 | feature-grid | Audience introduction followed by a two-column grid of four image-led features. | buyer and supplier tabs, audience-specific benefits | two-column tiles, large photographs, red quote action |
| 11 | logo-cloud | Short horizontal transition with two images. | visual transition | dark strip, subtle boundaries |
| 12 | feature-split | Copy on the left and stacked certification marks on the right. | certification evidence | two-column split, divided logo stack, fine borders |
| 13 | logo-cloud | Shallow image band dividing adjacent content sections. | visual transition | dark band, hairline edges |
| 14 | feature-split | Centered introduction, wide map graphic, then regional link columns. | regional browsing, location links | red map highlights, full-width media, fine dividers |
| 15 | logo-cloud | Short transition band with two images. | visual transition | dark strip, thin section borders |
| 16 | team | Copy and action on the left; workplace photograph on the right. | recruitment link | two-column split, small uppercase label, red action |
| 17 | logo-cloud | Shallow band with two images between content and final CTA. | visual transition | dark canvas, fine boundaries |
| 18 | cta | Centered campaign headline, copy, and paired actions above contact details. | quote conversion, partner conversion, contact information | red-to-dark gradient, centered content, paired buttons |
| 19 | logo-cloud | Short transition strip with two images. | footer transition | dark band, thin borders |
| 20 | footer | Brand mark alongside company, social, and legal link columns. | site navigation, legal links, social link | three link groups, dark background, fine dividers |

## Source CSS custom properties (selected)

```css
--_typography---font-styles--body: Archivo, sans-serif;
--color-scheme-1--text: #fffc;
--_text-style---font-family: Archivo, sans-serif;
--_text-style---font-size: 1rem;
--_text-style---line-height<deleted|variable-e52a52b3-1411-d3cd-c19c-bab59b5e0082>: 1.5;
--_text-style---font-weight: 400;
--_text-style---letter-spacing: 0px;
--background-color--bg-primary: #0b0405;
--_responsive---spacing--space-tiny: .25rem;
--_responsive---spacing--space-xxsmall: .5rem;
--_responsive---spacing--space-xsmall: 1rem;
--_responsive---spacing--space-small: 1.5rem;
--_responsive---spacing--space-medium: 2rem;
--_responsive---spacing--space-large: 3rem;
--_responsive---spacing--space-xlarge: 4rem;
--_responsive---spacing--space-xxlarge: 5rem;
--_responsive---spacing--space-huge: 6rem;
--_responsive---spacing--space-xhuge: 7rem;
--_responsive---spacing--space-xxhuge: 10rem;
--_responsive---spacing--space-custom-1: 1rem;
--_responsive---spacing--space-custom-2: 2.5rem;
--_responsive---spacing--space-custom-3: 1rem;
--_responsive---spacing--space-0: 0rem;
--_base-primitive---colors--white: white;
--_typography---font-weight--500-medium: 500;
--_typography---letter-spacing--h2: -.05rem;
--_typography---font-styles--heading: Archivo, sans-serif;
--_ui-styles---border--card-radius: 1.25rem;
--_base-primitive---colors--color-neutral-black: #1c1c1e;
--_spacing---gutter-md: white;
--_typography---letter-spacing--h1: -.07rem;
--_base-primitive---colors--black: black;
--_responsive---font-size--text-size-tiny: .75rem;
--text-color--text-alternate<deleted|relume-variable-text-color-3>: white;
--_base-primitive---colors--color-primary: #e32735;
--_responsive---font-size--text-size-regular: 1rem;
--_typography---font-weight--400-regular: 400;
--_responsive---font-size--text-size-large: 1.25rem;
--_typography---font-weight--300-light: 300;
--_typography---font-weight--800-x-bold: 800;
```

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