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

# 70Materia · Design System

> Let material lead; keep the interface quiet.

**Theme:** light · **Industry:** design · **Source:** https://70materia.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._

70Materia’s homepage pairs restrained black-and-white interface elements with expansive photography of architectural surfaces and objects. A long, single-column scroll alternates immersive material imagery with concise editorial copy, showroom content, and a dark footer.

## North star

Keep interface elements monochrome and restrained so full-width material imagery carries the visual emphasis.

## Overview

The visual strategy makes the material imagery the main event while the interface stays nearly monochrome. White (#ffffff) forms the page canvas and language bar; black (#000000) supplies navigation and editorial text, while off-black (#1e1e1e) anchors the footer and thin outlined controls. Do not promote the screenshot’s stone, sand, or charcoal image tones into interface colours: they belong to photographed materials. Matter is used for larger reading text and links; Matter Mono gives compact uppercase labels and navigation a technical, catalog-like voice. The layout is a long, mostly single-column sequence with generous white intervals and occasional full-bleed imagery or paired image panels. Small text overlays sit directly on photographs, keeping the imagery uninterrupted. Borders are fine and controls are modestly rounded; the overall treatment is flat, with no measured shadows or gradients. The result feels architectural and editorial rather than like a conventional product catalog.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas, language selector band, and light regions around editorial and showroom content. |
| Carbon Ink | `#000000` | `--color-carbon-ink` | neutral | Primary text and navigation on white; also appears as contrast within full-bleed imagery. |
| Workshop Charcoal | `#1e1e1e` | `--color-workshop-charcoal` | surface | Dark footer background and fine borders on outlined language and action controls. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Carbon Ink) · `--color-surface-2` → `#1e1e1e` (Workshop Charcoal) · `--color-text` → `#000000` (Carbon Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#1e1e1e` (Workshop Charcoal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#1e1e1e` | 1.26:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#1e1e1e` | 16.67:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Matter | `--font-body` | webfont | 400 | Body copy and prominent editorial links. | Inter |
| Matter Mono | `--font-mono` | webfont | 400 | Navigation, captions, eyebrow labels, and compact utility text. | IBM Plex Mono |

- **Matter:** Regular weight; used for reading text and larger links with natural casing.
- **Matter Mono:** Regular-weight uppercase labels with lightly expanded tracking; keep utility text compact.

### Type scale — Major Third (ratio ≈ 1.25, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 20px | 400 | 1.2 | 0 | — | Matter | Editorial descriptions and prominent text links. |
| caption | 12px | 400 | 1.3 | 0.02em | uppercase | Matter Mono | Small uppercase labels and image captions. |
| nav | 12px | 400 | 1.3 | 0.02em | uppercase | Matter Mono | Compact uppercase header and language navigation. |
| eyebrow | 10px | 400 | 1.2 | 0.04em | uppercase | Matter Mono | Tiny uppercase section identifiers. |
| code | 12px | 400 | 1.3 | 0.02em | uppercase | Matter Mono | Compact uppercase utility-style text. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 3, 4, 8, 12, 24, 48, 100, 180 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width 1424px.

Build a long vertical page on a white canvas, with a compact language strip above the image-led opening. The measured page max width is 1424px; imagery can run edge to edge, while copy and lower content sit in more contained arrangements. The sequence is predominantly one column, interrupted by two-image panels and a three-column lower feature area. Keep the rhythm comfortable: large visual sections alternate with concise copy and open white space. Align small labels to image edges or content starts rather than centering every block.

## Shape & elevation

- Radius: button `3px` · xs `3px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s ease-in-out` on interactive elements.

The interface is essentially flat: no measured shadows or gradients. Use white space and full-bleed imagery for depth and hierarchy rather than raised cards. Controls use thin charcoal or white outlines with a subtle measured 3px button radius; the footer creates the strongest tonal layer.

## Imagery

Use large photographic views of surfaces, architectural settings, and finished products, often cropped edge to edge. Favor tactile close-ups and calm, natural material tones; the opening image is an extreme surface detail, followed by product and interior scenes. Include editorial illustration only as a distinct journal image, not as a general interface motif. Place small white or dark labels directly over photographs where contrast allows.

## Components

### Language selector

A slim white top band with compact uppercase mono prompt, outlined language controls, and a close glyph.

### Image-led header navigation

Brand mark and small uppercase navigation sit over the opening material photograph with light text for contrast.

### Immersive image feature

Large edge-to-edge product or architectural photograph with small, uppercase labels placed near image edges.

### Editorial image pair

Two adjacent image panels combine a journal illustration and close material photography, with a concise linked story label.

### Outlined action

Compact uppercase Matter Mono text inside an unfilled control with a thin border and measured 3px radius.

### Dark footer

A #1e1e1e footer groups language, company, information, legal, and social links in small white uppercase text.

### Measured component styles

- **Primary button** (“ENGLISH”): transparent background · text #000000 · border 1px solid #1e1e1e · radius 3px · padding 8px 24px · 400 10px Matter Mono · uppercase
- **Link** (“JOURNAL MATTER BORN FROM WASTE”): transparent background · text #000000 · radius 0px · padding 0px · 400 20px Matter
- **Navigation item** (“HORIZONTAL”): transparent background · text #000000 · radius 0px · padding 0px · 400 20px Matter

## Do

- Let material photography occupy the largest visual areas.
- Keep the interface palette to the measured monochrome colours.
- Use Matter for readable copy and Matter Mono for utility labels.
- Set navigation and captions in compact uppercase styling.
- Alternate immersive images with concise editorial content.
- Use thin outlined controls instead of filled promotional buttons.

## Don't

- Do not use photographed stone tones as invented interface colours.
- Do not add shadows, gradients, or decorative effects.
- Do not turn every content block into a card.
- Do not crowd the full-bleed image sections with copy.
- Do not use oversized or heavy navigation typography.
- Do not center all content when the reference favors edge alignment.

## Agent prompt

Create a new page in 70Materia’s restrained, architectural editorial style. Use Gallery White (#ffffff) as the canvas, Carbon Ink (#000000) for text and navigation, and Workshop Charcoal (#1e1e1e) for dark footer areas and fine control borders. Keep interface colour monochrome; treat stone, sand, and other material hues as photographic content, not brand tokens. Use Matter or a close sans-serif for body copy and Matter Mono or a close monospaced face for compact uppercase labels. Organize the page as a calm vertical sequence with generous white intervals and large full-bleed material photography, then add concise editorial copy and restrained outlined actions. Align labels to image or content edges. Avoid shadows, gradients, dense cards, and unnecessary decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-viewport material close-up with a slim language band and overlaid brand navigation. | Language selection, Primary site navigation | Full-bleed photograph, Compact uppercase labels, Light navigation over image |
| 2 | gallery | Two adjacent image panels, pairing editorial illustration with a close-up material photograph. | Journal story link | Split image composition, Small image label |
| 3 | product-showcase | Single large product-and-interior image with small edge-aligned text. | Product discovery link | Immersive product photography, Minimal text overlay |
| 4 | product-showcase | Full-width architectural photograph of a compact kitchen in its interior setting. | Project discovery link | Full-bleed interior image, Edge-aligned caption |
| 5 | feature-split | Two side-by-side images: a finished surface detail and a landscape of raw earth. | Surface range link | Paired imagery, Overlay descriptor |
| 6 | other | Short editorial text block on white, with a small label and understated action. | Learn more link | Text-led section, Open white space, Small outlined action |
| 7 | feature-grid | Three-column lower area with two image-led feature blocks and concise supporting text. | Showroom discovery, Newsletter subscription | Image-and-copy features, Outlined calls to action |
| 8 | footer | Dark footer with multiple compact link groups and a large low-contrast brand wordmark. | Grouped site navigation, Newsletter entry, Social links | Charcoal background, Small white uppercase text, Oversized wordmark |

## Source CSS custom properties (selected)

```css
--radius: .3rem;
--border: .1rem solid currentColor;
--ease-out: cubic-bezier(.33, 1, .68, 1);
--ease-in: cubic-bezier(.32, 0, .67, 0);
--color-black: #000;
--color-off-black: #1e1e1e;
--color-alpha-black: #0000004d;
--color-white: #fff;
--color-alpha-white: #ffffffe0;
--color-grey: #bababa;
--color-dark-sand: #876a30;
--color-sand: #d2c5aa;
--color-red: red;
--space-0: 0rem;
--space-xxs: .4rem;
--space-xs: .8rem;
--space-s: 1.2rem;
--space-m: 2.4rem;
--space-l: 4.8rem;
--space-xl: 10rem;
--space-xxl: 18rem;
--space-3xl: 26rem;
--space-gap: .8rem;
--space-header: 83px;
--swiper-theme-color: #000;
--spacing: .25rem;
--default-transition-duration: .15s;
--ease-in-out: cubic-bezier(.4, 0, .2, 1);
--ease-DEFAULT: cubic-bezier(.4, 0, .2, 1);
--fontWeight-medium: 500;
--radius-DEFAULT: .25rem;
--colors-sand: #d2c5aa;
--colors-white: #fff;
--colors-off-black: #1e1e1e;
--colors-black: #000;
--colors-gray-200: oklch(92.8% .006 264.531);
--colors-red: red;
--colors-grey: #bababa;
--colors-green-DEFAULT: oklch(79.2% .209 151.711);
--colors-dark-sand: #876a30;
```

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