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

# Beings · Design System

> Bold type, open space, Aotearoa talent.

**Theme:** light · **Industry:** media · **Source:** https://beings.co/ · **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._

Beings pairs oversized, near-black branding with generous white space and direct portrait-led storytelling. The homepage gives visibility to Aotearoa’s POC, Rainbow and Disabled talent through an editorial, asymmetrical composition.

## North star

Let oversized near-black typography and candid talent photography command a quiet white canvas, with generous space between them.

## Overview

The page is built around a stark white canvas and an oversized, near-black BEINGS wordmark that dominates the opening view. Navigation stays small and widely separated along the top edge, while the hero pairs the wordmark and a compact mission statement with large, documentary-style portraits. The palette remains deliberately restrained: #1b0800 anchors the logo, headings and dark closing band; #ffffff provides the main breathing room; #fff4ec and #f6c9a1 appear as warm supporting tones for content and text. Typography is bold, compact sans serif, with uppercase micro-navigation and strong display lettering. The long page uses asymmetrical image placement and substantial vertical pauses rather than boxed cards or dense grids. Photography supplies nearly all visual texture and colour, keeping the identity human, direct and editorial rather than decorative.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Parchment | `#fff4ec` | `--color-warm-parchment` | surface | Warm content surface and supporting text tone; use sparingly against the white canvas. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Dominant page canvas and open space surrounding the wordmark and photography. |
| Apricot Signal | `#f6c9a1` | `--color-apricot-signal` | accent | Warm accent text in supporting content; not a large filled CTA colour on the shown page. |
| Roasted Ink | `#1b0800` | `--color-roasted-ink` | brand | Wordmark, headings, navigation and dark closing section. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#fff4ec` (Warm Parchment) · `--color-surface-2` → `#1b0800` (Roasted Ink) · `--color-text` → `#1b0800` (Roasted Ink) · `--color-text-muted` → `#f6c9a1` (Apricot Signal) · `--color-text-subtle` → `#fff4ec` (Warm Parchment) · `--color-accent` → `#f6c9a1` (Apricot Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1b0800` | `#ffffff` | 19.42:1 | AAA |
| `#1b0800` | `#fff4ec` | 17.94:1 | AAA |
| `#f6c9a1` | `#ffffff` | 1.52:1 | fail |
| `#f6c9a1` | `#fff4ec` | 1.41:1 | fail |
| `#f6c9a1` | `#1b0800` | 12.75:1 | AAA |
| `#fff4ec` | `#ffffff` | 1.08:1 | fail |
| `#fff4ec` | `#1b0800` | 17.94:1 | AAA |
| `#f6c9a1` | `#ffffff` | 1.52:1 | fail |
| `#f6c9a1` | `#fff4ec` | 1.41:1 | fail |
| `#f6c9a1` | `#1b0800` | 12.75:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Die Grotesk C Black | `--font-display` | webfont | 400 | Heavy page headings and bold identity lettering | Archivo Black |
| Die Grotesk B SemiBold | `--font-body` | webfont | 400 | Body copy and supporting editorial text | DM Sans |
| Die Grotesk B Bold | `--font-die-grotesk-b-bold` | webfont | 400 | Uppercase navigation, button labels and short links | Barlow Condensed |

- **Die Grotesk C Black:** Use a dense, assertive sans-serif weight; keep large headline forms tight and clean.
- **Die Grotesk B SemiBold:** Compact, sturdy text with close line spacing; preserve legibility at small sizes.
- **Die Grotesk B Bold:** Bold uppercase microcopy; keep labels crisp and visually subordinate to the display mark.

### Type scale — Golden Ratio (ratio ≈ 1.604, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 66px | 400 | 1 | -0.03em | — | Bonto | Oversized BEINGS identity lettering at the top of the hero. |
| h1 | 30px | 400 | 1.18 | 0 | — | Die Grotesk C Black | Primary page heading and prominent section statements. |
| h2 | 22px | 400 | 1.1 | 0 | — | Die Grotesk B Bold | Talent and other section headings. |
| body | 16px | 400 | 1.1 | 0 | — | Die Grotesk B SemiBold | Mission copy and supporting editorial text. |
| caption | 12px | 400 | 1.4 | 0 | — | Die Grotesk B SemiBold | Small notes and image-related supporting copy. |
| button | 12px | 400 | 1.4 | 0 | uppercase | Die Grotesk B Bold | Compact uppercase action labels, including PLAY. |
| link | 12px | 400 | 1.4 | 0 | uppercase | Die Grotesk B Bold | Uppercase navigation and concise linked labels. |

OpenType features in use: `"kern", "ss01", "ss02", "ss03", "ss04"`, `"kern", "ss01" 0, "ss02", "ss03" 0, "ss04" 0`.

## Spacing & layout

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

A single long, comfortable-density page uses a measured maximum width of 1416px. The first viewport is led by a full-width typographic mark, with a portrait positioned below it on the left and the mission statement to the right. Subsequent photographs shift across the canvas instead of following a rigid card grid. Navigation is distributed across the top edge. Large areas of white space separate content moments; the measured section gap is 48px, with 12px element spacing where elements cluster.

## Shape & elevation

- No box shadows measured: the page is flat.

Keep the interface predominantly flat: the measured data reports no shadows and no component corner-radius scale. White space, image crops and bold contrast create the hierarchy instead of floating cards. A fine circular outline appears as a restrained graphic detail in the hero; use hairlines sparingly and do not add heavy borders or layered UI panels.

## Imagery

Use large, candid portrait and talent photography, including stills or video frames, as the primary visual content. Images are placed asymmetrically and often cropped close, with subjects retaining a documentary, human presence rather than a polished product-shot treatment. The opening portrait has a monochrome appearance; later images introduce natural colour. Avoid decorative illustrations that compete with the people shown.

## Components

### Top navigation

Small, uppercase labels sit across the white canvas: brand at left, section links through the center and compact action links at right.

### Wordmark hero

A huge, near-black BEINGS mark spans most of the opening width and is the dominant graphic element.

### Mission statement

Short, bold copy sits beside the opening portrait, using a tight editorial block rather than a card.

### Talent photography

Large portraits and video imagery are offset across the page, with varied crops and generous white space.

### Section heading

Warm-toned, prominent talent lettering introduces an editorial content area without a filled panel.

### Closing band

A deep #1b0800 footer-like band provides a high-contrast base for concise light-coloured closing copy.

### Measured component styles

- **Primary button** (“PLAY,”): transparent background · text #1b0800 · radius 0px · padding 0px · 400 12px Die Grotesk B Bold · uppercase
- **Link** (“New Zealand Film Commission”): transparent background · text #fff4ec · radius 0px · padding 0px · 400 16px Die Grotesk B SemiBold

## Do

- Keep the canvas predominantly #ffffff.
- Make the wordmark or main display type the visual anchor.
- Use #1b0800 for strong type contrast.
- Place portraits in an asymmetrical editorial rhythm.
- Leave generous open space around image and text blocks.
- Keep navigation and action labels compact and uppercase.

## Don't

- Do not turn the page into a dense card grid.
- Do not add unmeasured colours to the brand palette.
- Do not place heavy shadows behind content.
- Do not use rounded, elevated app-style panels.
- Do not let decorative graphics overpower talent photography.
- Do not fill the open canvas with unnecessary copy.

## Agent prompt

Build a new editorial talent-directory page in the Beings visual style. Use Gallery White (#ffffff) as the dominant canvas, Roasted Ink (#1b0800) for the wordmark, headings and high-contrast closing areas, and reserve Warm Parchment (#fff4ec) and Apricot Signal (#f6c9a1) for restrained supporting accents. Lead with oversized, dense sans-serif display typography and a small uppercase navigation row. Pair concise mission copy with candid portrait photography, then arrange further image and text moments asymmetrically with substantial white space. Use compact, bold body typography and avoid cards, shadows and decorative gradients. Keep images human and documentary in feel; let their subjects provide most of the page’s texture. Use spacing in the measured rhythm, not invented component dimensions.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Long single-column page with an oversized hero mark, offset portrait imagery, open editorial content and a dark closing band. | top-level section navigation, talent discovery, mission statement | oversized wordmark, asymmetric photography, large white-space intervals, dark closing band |

## Source CSS custom properties (selected)

```css
--formText: .75rem;
--formText-l: 1.2;
--shortlist-background: #78492d;
--shortlist-color: #fdf4ed;
--home-background: #381a06;
--home-color: #f6c9a1;
--talent-background: #fff4ec;
--talent-color: #1b0800;
--talent-accent: #f6c9a1;
--join-background: #fae3cf;
--join-color: #78492d;
--join-accent: #381a06;
--profile-dark-theme-color: #db9a68;
```

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