Signal Red
#e32735Red action color for filled buttons, selected navigation states, and focused conversion moments
Andercore
andercore.comWebsite preview
The design language
Andercore runs on a chiaroscuro industrial language: near-black canvases (#0b0405) with crisp white type, sharp 4px corners, and a single rationed red (#e32735) that does all the talking. The page alternates between a light navigation band and full-bleed dark sections where borders (1px, #382e30) define structure instead of shadows or elevation. Archivo carries geometric precision at every size with tight -0.02em tracking, while Space Mono at 12px stamps industrial instrument-style labels onto badges and step counters. Red never decorates — it activates, marking the single primary action, the active step underline, and key UI connectors. The whole system feels like a control room: dense, deliberate, and lit by a single indicator lamp.
Color palette
brand
neutral
Carbon
#0b0405Primary section background, full-bleed dark canvases, secondary button fill
Graphite
#150e0fAlternate near-black surface for cards and elevated panels on dark sections
Steel
#382e30Hairline borders on dark surfaces, card edges, table dividers, UI mockup outlines
Slate
#858182Secondary text, badge borders, badge labels, muted helper copy
Chalk
#ffffffPrimary text on dark, nav and hero overlay type, inverted button text, light section backgrounds
Foil
#000000SVG icon fills, decorative vector detail
Typography
Type scale
Major Second (1.125) · 16px basedisplay
56px · 500 · 1.1 · -1.12px trackingThe quick brown fox jumps
heading
40px · 500 · 1.2 · -0.8px trackingThe quick brown fox jumps
subheading
24px · 500 · 1.2 · -0.48px trackingThe quick brown fox jumps
body
16px · 400 · 1.5 · -0.32px trackingThe quick brown fox jumps
body-sm
14px · 400 · 1.5 · -0.28px trackingThe quick brown fox jumps
caption
12px · 400 · 1.5 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Archivo
- Weights
- 400, 500
- Sizes
- 12, 14, 16, 24, 40, 56
- Line height
- 1.10–1.50
- Letter spacing
- -0.02em across all sizes
- Fallback
- Inter, DM Sans, Geist
All interface type — headlines (40/56px, weight 500), subheads (24px, weight 500), body and UI (14/16px, weight 400), nav links (12/14px). The geometric grotesque with tight -0.02em tracking gives industrial precision; weight 500 (not 700) for display type keeps the system restrained rather than shouty.
Additional typeface
Space Mono
- Weights
- 400
- Sizes
- 12
- Line height
- 1.50
- Letter spacing
- normal
- Fallback
- JetBrains Mono, IBM Plex Mono, Roboto Mono
Badge labels, step counters ('01', '02', '03'), industrial tag stamps — the monospace face signals instrumentation and serial-number precision, contrasting Archivo's proportional geometry
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 32px
- Element gap
- 24px
Border radius
cards
4pxbadges
4pxinputs
4pxbuttons
4pxSpacing scale
2px4px6px8px11px12px16px20px24px28px32px40px48px64px71px214px255pxGuidelines
Do
- Use Signal Red #e32735 exclusively for the single primary action per surface — never as a decorative or background fill
- Set all corners to 4px radius — no exceptions, no pill shapes, no zero-radius hard edges
- Separate dark sections with 80px vertical padding and rely on background-value shift rather than dividers or shadows
- Use Archivo 500 (not 700) for headings 40px and above to keep weight restrained and consistent
- Apply -0.02em letter-spacing to all Archivo type at all sizes for tight industrial density
- Stamp step numbers, serial codes, and technical labels in Space Mono 12px — never Archivo for these
- Define card and panel edges with 1px #382e30 borders on dark, never with box-shadow or background tint shifts
Don’t
- Don't introduce drop shadows, glows, or blur-based elevation — structure is line-based only
- Don't use #e32735 for body text, icons, or secondary UI — it's an action color, rationed
- Don't round corners beyond 4px — no 8px, 12px, 16px, or pill radii anywhere
- Don't set headings in bold (700+); weight 500 Archivo at 40–56px is the maximum voice
- Don't alternate between light and dark sections within a single content flow — the page is dark-dominant after the hero
- Don't use Archivo for numeric step counters, product codes, or instrumentation labels — those are Space Mono territory
- Don't add gradient fills to buttons or cards — the one gradient in the system (white→red) is reserved for the hero-to-content transition
Components
Primary CTA Button (Red Filled)
The single high-priority action on any surfaceFilled Signal Red (#e32735), white text at 14px Archivo weight 500, padding 12px 24px, 4px radius. No shadow, no gradient. The borderless rectangle sits flush with the dark canvas.
Ghost/Dark Button
Secondary action when a primary red CTA is presentDark fill (#0b0405 or #150e0f), 1px border in #382e30, white text at 14px Archivo weight 500, padding 12px 24px, 4px radius. Visually quiet partner to the red CTA.
Navigation Header
Top-level site navigation and authenticationWhite background (#ffffff), Archivo 14px nav links in dark text, logo left ('ANDERCORE' wordmark), utility links and CTAs right. Fixed thin bar, no shadow, separates from dark sections below via background shift not a border.
Industrial Badge / Tag
Category labels, section eyebrows, status stamps1px border in #858182, Space Mono 12px text in #858182, padding 8px 12px, 4px radius. Transparent fill so it reads as an outlined instrument label, not a filled chip.
Step Progress Indicator
Multi-step process navigation (Request → Quote → Track'n'Trace)Horizontal row of step labels in Archivo 14px. Active step: red (#e32735) text with a 2px red underline bar. Inactive steps: #858182 text, no underline. Step numbers ('01', '02', '03') in Space Mono 12px right-aligned.
Feature Card with UI Mockup
Three-column challenge/solution displayDark card on #0b0405 canvas, no border or 1px #382e30 border, 32px padding. Contains a small UI mockup (mini browser/panel) in a slightly lighter dark (#150e0f or #1a1213) with a red #e32735 icon/dot accent. Heading in Archivo 24px white, body in 14px #858182.
Dark Content Section
Primary content blocks after the heroFull-bleed #0b0405 background, 80px vertical padding, max-width 1200px centered. White Archivo heading at 40px, muted body in #858182 at 16px. Section eyebrows via Space Mono badge above the heading.
Chat Interface Card
Product walkthrough visualizationPanel showing conversation bubbles on a lighter dark fill (#1a1213 implied). User bubbles: #382e30 fill with white text. Assistant bubbles: outlined or lighter fill. Andercore 'A' mark avatar in Signal Red. Sits beside a full-bleed photo of the user on the right.
Hero with Photographic Overlay
Above-the-fold brand statementFull-bleed image (truck/industrial subject) with dark gradient overlay, display headline at 56px Archivo weight 500 in white, 1.10 line-height, -1.12px tracking. Body subtext at 16px in muted white. Primary red CTA + ghost dark button inline below.
Connector Line / Accent Divider
Visual flow between cards or sections1px line in #382e30 with small square nodes (#ffffff) at junction points. Occasionally terminates in a red #e32735 square node or the Andercore 'A' mark. Links the three-column challenge cards vertically into a single system.
Eyebrow / Section Label
Tiny uppercase or tracked label above section headingsSpace Mono 12px or Archivo 12px weight 500, all-caps where used, #858182 color, sometimes paired with a 1px red #e32735 underline accent.
Surfaces & elevation
Level 0
Canvas — Light
#ffffffNavigation bar, light interstitial bands
Level 1
Canvas — Dark
#0b0405Primary content section background, full-bleed dark bands
Level 2
Card Surface
#150e0fElevated panels and feature cards on dark sections
No drop shadows. Structure is defined entirely by 1px hairline borders (#382e30 on dark, #e5e5e5 implied on light) and the 4-step surface value stack. Components sit flat against their canvas, separated by lines rather than lifted by blur — the industrial-control-room approach.
Layout & imagery
Layout
The page runs at max-width 1200px centered, but most sections are full-bleed dark bands. The hero is a full-bleed photographic image with dark overlay, headline left-aligned in the lower-third. Content sections follow a single-column rhythm: section eyebrow badge → heading → body text, with primary CTAs right-aligned. Three-column feature grids appear inside dark sections at equal 32px gutters. The step progress flow uses a 2/3-left text, 1/3-right visual (chat + photo) split. Vertical spacing is generous: 80px between sections, 32px card padding, 24px element gaps. Navigation is a thin white fixed bar at the top — the only consistently light surface on an otherwise dark page.
Imagery
Photography is the dominant visual: industrial subjects (logistics trucks, construction sites, workers in hard hats) shot in golden-hour or moody low-light conditions. Images are full-bleed with dark gradient overlays so they merge into the #0b0405 section backgrounds. UI mockups (mini browser panels, chat interfaces) appear as flat dark-on-dark diagrams with red accent dots, never as realistic product screenshots. The Andercore 'A' mark functions as both logo and a small red UI token (avatar, connector node). No illustration style — everything is either photographic, diagrammatic, or pure typography on dark canvas.
Design notes
Agent Guide
**Quick Color Reference** - text: #ffffff (on dark) / #0b0405 (on light) - background: #0b0405 (dark sections) / #ffffff (nav) - border: #382e30 (on dark) / #858182 (badges) - accent: #e32735 (Signal Red) - muted text: #858182 (Slate) - primary action: #e32735 (filled action) **3-5 Example Component Prompts** 1. *Create a dark hero section*: #0b0405 full-bleed background, 80px vertical padding. Display headline at 56px Archivo weight 500, #ffffff, letter-spacing -1.12px, line-height 1.10. Subtext at 16px Archivo weight 400, #858182. Primary CTA: #e32735 fill, white text 14px Archivo weight 500, 12px 24px padding, 4px radius. Ghost button beside it: #150e0f fill, 1px #382e30 border, white text, same padding and radius. 2. *Create a three-column feature row*: #0b0405 background, 32px between columns. Each card: 1px #382e30 border, 32px padding, 4px radius. Eyebrow badge above: Space Mono 12px, #858182 text, 1px #858182 border, 8px 12px padding. Card heading at 24px Archivo weight 500, #ffffff. Body at 14px Archivo weight 400, #858182. 3. *Create a step progress indicator*: horizontal row on #0b0405. Three steps labeled 'Request', 'Quote', 'Track'n'Trace' in Archivo 14px. Active step: #e32735 text with a 2px #e32735 underline bar. Inactive: #858182 text, no underline. Step numbers '01', '02', '03' in Space Mono 12px #858182, right-aligned. 4. *Create a dark content section*: #0b0405 background, max-width 1200px centered, 80px vertical padding. Section heading at 40px Archivo weight 500, #ffffff, -0.80px letter-spacing. Body paragraph at 16px Archivo weight 400, #858182. Red accent CTA button top-right: #e32735 fill, white 'Get access now' text, 12px 24px padding, 4px radius. 5. *Create an industrial badge/tag*: transparent fill, 1px #858182 border, Space Mono 12px text in #858182, padding 8px 12px, 4px radius. Used as section eyebrows above headings.
Gradient System
The system uses exactly one gradient: a horizontal white-to-red transition (linear-gradient 90deg, #ffffff 18%, #e32735)) applied only to the hero image overlay edge or to decorative connector lines that fade from canvas to signal. No other gradients exist — buttons, cards, and backgrounds are all flat fills.
Similar brands
Kommo
Same dark-near-black canvas with a single rationed chromatic accent for primary actions, Archivo-style geometric sans throughout
Tensor
Industrial/B2B tone with 1px line-based card borders, 4px corners, and a single red-orange signal color against deep black
Framer
Dark full-bleed sections with sharp 4px radii, no shadows, and a tight geometric grotesk as the only typeface
Vercel
Max-width 1200px centered layout, sharp minimal corners, dark-dominant sections, and a monochrome palette with one accent
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
