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

# Electronic Materials Office — Altar II · Design System

> A cinematic product story in black, steel, and signal red.

**Theme:** dark · **Industry:** consumer-electronics · **Source:** https://electronicmaterialsoffice.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._

A cinematic, dark product launch page that makes Altar II’s slim mechanical keyboard the focus through expansive imagery and tightly edited copy. Oversized editorial typography, near-black section bands, and restrained red accents create a premium, engineering-led identity.

## North star

Let near-black space and high-fidelity product imagery lead; use typography and red only to direct attention.

## Overview

The page treats black as the primary canvas, letting detailed keyboard photography and product renders carry most of the visual weight. Pure black hero and showcase areas alternate with subtly lighter charcoal bands, while white text provides the main contrast and muted gray handles supporting copy, borders, and secondary links. Bright red is reserved for small category labels, the glowing nav indicator, and the hero reservation action; deeper red appears sparingly in text and backlight-related content. Typography pairs Tobias-Web’s high-contrast serif display moments with GT Flexa’s rounded sans-serif headlines and GT Flexa Text’s readable supporting copy. Broad, full-bleed media and asymmetric text placements keep the page cinematic; comparison cards and feature galleries create more structured pauses. Spacing feels generous around major narratives, but image-led card rows remain information-dense. Rounded media frames and pill controls soften the otherwise flat, technical presentation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Machine Gray | `#6d6d6d` | `--color-machine-gray` | neutral | Muted descriptions, secondary links, and the thin outlines of understated controls. |
| Carbon | `#1b1b1b` | `--color-carbon` | surface | Charcoal card and section surface, visible behind product comparison and gallery content. |
| Void Black | `#000000` | `--color-void-black` | brand | Dominant page canvas and full-bleed hero, comparison, and product-story backgrounds. |
| Soft Black | `#111111` | `--color-soft-black` | surface | Alternate dark band for mechanical, M-Dial, and macOS feature sections. |
| Studio White | `#ffffff` | `--color-studio-white` | neutral | Primary headlines, navigation, key product labels, and high-contrast body text. |
| Signal Red | `#ff0000` | `--color-signal-red` | accent | Small section labels, the glowing top-left indicator, and the prominent Reserve action. |
| Ember Red | `#871200` | `--color-ember-red` | accent | Darker red accent in supporting text and illuminated product-story details. |
| Graphite Glow | `#2a2a2a` | `--color-graphite-glow` | semantic | Subtle gradient detail only; not a defining page surface or core brand colour. |
| Shadow Graphite | `#222222` | `--color-shadow-graphite` | semantic | Subtle gradient detail only; keep it within atmospheric shading rather than UI. |

### Semantic aliases

`--color-canvas` → `#1b1b1b` (Carbon) · `--color-surface` → `#000000` (Void Black) · `--color-surface-2` → `#111111` (Soft Black) · `--color-text` → `#ffffff` (Studio White) · `--color-text-muted` → `#6d6d6d` (Machine Gray) · `--color-border` → `#6d6d6d` (Machine Gray) · `--color-accent` → `#ff0000` (Signal Red) · `--color-accent-2` → `#871200` (Ember Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#1b1b1b` | 17.22:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#111111` | 18.88:1 | AAA |
| `#6d6d6d` | `#1b1b1b` | 3.33:1 | AA-large |
| `#6d6d6d` | `#000000` | 4.06:1 | AA-large |
| `#6d6d6d` | `#111111` | 3.65:1 | AA-large |
| `#ff0000` | `#1b1b1b` | 4.31:1 | AA-large |
| `#ff0000` | `#000000` | 5.25:1 | AA |
| `#ff0000` | `#111111` | 4.72:1 | AA |

### Gradients

- `radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, rgba(0, 0, 0, 0) 1px)`
- `linear-gradient(90deg, color(display-p3 0.1857 0.1838 0.1838 / 0.9) 0%, color(display-p3 0.1506 0.1506 0.1506 / 0.9) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GT Flexa Text | `--font-body` | webfont | 400, 500 | Main reading text, captions, and supporting links. | Inter |
| GT Flexa | `--font-display` | webfont | 400, 500 | Sans-serif feature headings, buttons, product labels, and compact navigation UI. | Manrope |
| GT Flexa Mono | `--font-mono` | webfont | 300 | Technical labels and uppercase code-like details. | IBM Plex Mono |
| Tobias-Web | `--font-tobias-web` | webfont | 300 | Oversized display titles and editorial navigation or reservation links. | Cormorant Garamond |

- **GT Flexa Text:** Regular body copy stays compact; supporting links can be large, with muted gray used for secondary emphasis.
- **GT Flexa:** Use clean, rounded forms with tight tracking on large headings and button text.
- **GT Flexa Mono:** Light weight and uppercase treatment support concise engineering-style annotations.
- **Tobias-Web:** Light, high-contrast serif; oversized display text uses strongly negative tracking.

### Type scale — Golden Ratio (ratio ≈ 1.57, base 21px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 200px | 300 | 0.9 | -0.08em | — | Tobias-Web | Oversized serif product title and centerpiece editorial display. |
| h1 | 83px | 300 | 0.8 | -0.072em | — | Tobias-Web | Hero product heading and other high-impact serif statements. |
| h2 | 65px | 400 | 0.98 | -0.062em | — | GT Flexa | Large sans-serif narrative headlines for feature sections. |
| h3 | 64px | 400 | 1 | -0.1em | — | GT Flexa | Feature and comparison headlines with compact, assertive styling. |
| h4 | 51px | 400 | 0.95 | -0.059em | — | GT Flexa | Secondary feature headings and supporting section titles. |
| body | 21px | 400 | 1 | 0 | — | GT Flexa Text | Main product descriptions and feature explanations. |
| caption | 12.5px | 500 | 1 | 0 | — | GT Flexa Text | Compact image captions, technical labels, and card details. |
| button | 21px | 400 | normal | -0.04em | — | GT Flexa | Reservation and power controls. |
| nav | 31px | 300 | 1.2 | -0.04em | — | Tobias-Web | Serif About navigation and prominent editorial links. |
| link | 30px | 400 | 1.2 | 0 | — | GT Flexa Text | Large supporting links such as the reveal trailer. |
| code | 21px | 300 | 1.2 | 0 | uppercase | GT Flexa Mono | Uppercase technical annotations and monospace micro-labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 6, 8, 10, 12, 24, 48 px.
- Section rhythm 48px · element gap 24px · card padding — · max content width 1392px.

The page uses a wide, centered desktop composition with a measured maximum width of 1392px. A spacious, two-column hero pairs the keyboard image with title and purchase information, then gives way to full-bleed media, text-led feature introductions, and horizontally arranged image cards. Section backgrounds alternate mainly between black and charcoal to mark narrative chapters without adding heavy dividers. Headings are often left-aligned, with a centered macOS display as a deliberate variation. Comfortable spacing supports the cinematic pacing, while feature galleries and comparison cards create denser, scan-friendly stretches.

## Shape & elevation

- Radius: button `50%` · media `20px` · nav `50%` · xs `6px` · pill `9999px`
- Shadow `lg` (nav): `color(display-p3 1 0.2 0) 0px 0px 21px 0px, color(display-p3 1 0.2 0) 0px 0px 7px 0px`
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat, with dark canvas areas and subtle charcoal cards providing separation. Media frames and cards use softly rounded corners, while technical comparisons stay understated. The key exception is the small red nav indicator and glowing reservation action, which add a localized halo; avoid broad, heavy shadows or decorative layering.

## Imagery

High-fidelity renders and close-up product photography dominate: keyboards, switches, the magnetic dial, and interface screenshots. Large images often span the available content width, with detail crops and shallow dark surroundings emphasizing materials and thin profiles. Video-like showcase frames recur within the feature story. Keep product imagery crisp and controlled; vivid red and orange are most prominent within illuminated product or software visuals, not as broad page backgrounds.

## Components

### Hero purchase panel

Pair the serif Altar II title and muted subtitle with compact pricing information and a bright red Reserve action.

### About navigation

Keep the serif About link quiet at the upper right; a small glowing red indicator anchors the opposite corner.

### Feature media frame

Show a large product render or video in a dark frame with a measured 20px media radius and minimal chrome.

### Feature gallery cards

Arrange product-detail images in a horizontal row, with compact caption copy beneath or alongside each card.

### Comparison cards

Use charcoal cards to compare keyboard dimensions and mechanical status, with small red labels and white measurements.

### Power control

Use restrained pill-shaped power buttons with muted gray text and a 2px gray outline.

### Measured component styles

- **Primary button** (“Power on”): transparent background · text #6d6d6d · border 2px solid #6d6d6d · radius 999px · padding 0px 10px · 400 21px GT Flexa
- **Link** (“Reserve”): transparent background · text #ffffff · radius 0px · padding 0px 12px · 300 31px Tobias-Web
- **Card** (“APPLE MAGIC KEYBOARD 10.09mm NON-MECHANI”): background #1b1b1b · text #ffffff · radius 0px · padding 0px · 300 16px GT Flexa
- **Navigation item** (“About”): transparent background · text #ffffff · radius 0px · padding 0px · 300 31px Tobias-Web

## Do

- Use pure black for the main canvas and full-bleed product moments.
- Alternate black and charcoal bands to distinguish story chapters.
- Reserve Signal Red for small, high-value attention cues.
- Use crisp product renders and tightly framed hardware details.
- Pair large serif display moments with rounded sans-serif features.
- Keep technical labels compact, uppercase, and visually secondary.

## Don't

- Do not turn red into a large general-purpose section background.
- Do not add bright, colourful UI chrome around product imagery.
- Do not crowd the hero title and purchase action with extra copy.
- Do not use heavy shadows across every card or section.
- Do not make supporting text as prominent as the feature headline.
- Do not replace cinematic imagery with generic illustrations.

## Agent prompt

Build a new premium hardware product page in the Electronic Materials Office style. Use Void Black (#000000) as the primary canvas, alternating with Soft Black (#111111) and Carbon (#1b1b1b) for quiet section and card separation. Set primary copy in Studio White (#ffffff), supporting text and outlines in Machine Gray (#6d6d6d), and reserve Signal Red (#ff0000) and Ember Red (#871200) for small labels, indicators, or a key action. Combine an editorial high-contrast serif display face with rounded sans-serif headlines and readable supporting text. Lead with a spacious product hero, then build a deliberate sequence of large hardware visuals, concise feature chapters, and structured comparison cards. Keep product imagery crisp, use restrained rounded frames, and let negative space establish the cinematic rhythm. Avoid decorative gradients, loud backgrounds, and unnecessary interface chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column black hero with a large keyboard render above product title and purchase details. | Product introduction, Price and reservation action | Serif product title, Glowing red indicator, Red reservation button |
| 2 | gallery | A single dark gallery band of large, adjacent product-detail images. | Explore product details, Horizontal image browsing | Close-up hardware renders, Rounded dark media cards |
| 3 | feature-split | Full-bleed feature imagery followed by left-aligned copy and a reveal-trailer link. | Explain the core product promise, Watch reveal trailer | Small red eyebrow, Large feature statement, Muted text link |
| 4 | feature-split | Charcoal text-led introduction with a single left-aligned headline. | Introduce a key feature | Red section label, Oversized sans-serif headline |
| 5 | video | Large full-bleed keyboard video or product view on a charcoal band. | Inspect product in motion, Play media | Wide rounded media frame, Minimal playback control |
| 6 | feature-grid | Dense row of product-detail images with short captions. | Scan feature benefits, Compare construction details | Image cards, Compact caption text |
| 7 | comparison | Black section with a left-aligned headline and keyboard thickness comparison. | Compare dimensions, Understand product distinction | Red comparison label, White measurements, Dark comparison cards |
| 8 | comparison | Horizontal series of dark comparison cards with keyboard images and measurements. | Scan competing products, Compare at a glance | Product image cards, Compact technical labels |
| 9 | feature-split | Full-width M-Dial product image followed by a left-aligned headline. | Introduce a detachable feature, Play product media | Small red eyebrow, Large rounded media frame |
| 10 | feature-grid | Multiple smaller product images with short functional descriptions. | Learn dial controls, Browse feature details | Paired image cards, Compact muted captions |
| 11 | feature-split | Black full-bleed feature introduction with large headline and keyboard media. | Explain a technical feature, View product demonstration | Red eyebrow label, Wide product media, Large headline |
| 12 | feature-split | Small product visual paired with a block of explanatory copy. | Explain feature behaviour, Read supporting detail | Asymmetric text-image composition, Muted body copy |
| 13 | feature-grid | Row of detail images paired with concise usage examples. | Discover haptic interactions, Scan real-time feedback examples | Key close-ups, App notification imagery, Short captions |
| 14 | feature-split | Wide keyboard detail on the left with explanatory copy and pill controls alongside. | Explore audio cues, See supported sound states | Red eyebrow, Pill-shaped labels, Dark product card |
| 15 | product-showcase | Centered software imagery and oversized editorial headline on a charcoal background. | Introduce companion app, Show software experience | Centered serif display, Red eyebrow, Mac interface imagery |
| 16 | feature-grid | Horizontal gallery of app screenshots with short explanatory captions. | Browse software features, Understand customization options | Interface screenshot cards, Compact captions |
| 17 | feature-split | Black full-bleed section with a red-led headline and keyboard backlight imagery. | Explain night-use benefit, View backlight treatment | Red section label, Red headline emphasis, Dark keyboard render |

## Source CSS custom properties (selected)

```css
--color-bg: color(display-p3 0 0 0);
--color-bg-gray: color(display-p3 0.067 0.067 0.067);
--color-white: color(display-p3 1 1 1);
--color-orange: color(display-p3 1 0.2 0);
--color-orange-dim: color(display-p3 0.486 0.122 0);
--color-gray-lighter: color(display-p3 0.878 0.878 0.878);
--color-gray-light: color(display-p3 0.792 0.792 0.792);
--color-gray: color(display-p3 0.427 0.427 0.427);
--color-gray-dark: color(display-p3 0.184 0.184 0.184);
--color-card-bg: color(display-p3 0.184 0.184 0.184 / 0.7);
--font-heading: 'Tobias-Web', Georgia, serif;
--font-body: 'GT Flexa', system-ui, sans-serif;
--font-body-text: 'GT Flexa Text', system-ui, sans-serif;
--font-body-text-light: 'GT Flexa Text Light', system-ui, sans-serif;
--font-mono: 'GT Flexa Mono', 'SF Mono', monospace;
--space-none: 0px;
--space-xs: 6px;
--space-sm: 12px;
--space-md: 24px;
--space-lg: 48px;
--space-xl: 96px;
--radius-sm: 12px;
--radius-md: 20px;
--radius-lg: 30px;
```

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