601 Inc.

# 601 Inc. — Style Reference
> Architectural film canvas

**Theme:** dark

601 Inc. wields a cinematic utilitarian aesthetic, characterized by stark contrasts and a highly structured, almost architectural presentation. A dominant dark canvas is punctuated by a single, muted golden accent color, used sparingly for oversized typography and interactive elements. The design emphasizes content through dramatic scaling of display fonts and clear, unornamented UI elements, creating an immersive, focused experience. Layouts are spacious and deliberate, allowing visual content to breathe within defined areas, much like frames in a film.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Midnight Matte | `#090909` | `--color-midnight-matte` | Deepest canvas background, primary text on light surfaces |
| Greyscale Concrete | `#4f4d3c` | `--color-greyscale-concrete` | Primary background for sections and cards, creating a subtle contrast against the matte black |
| Aged Gold | `#ece4b4` | `--color-aged-gold` | Display text, interactive elements (links, nav, borders), and decorative accents – providing the sole chromatic highlight against dark neutrals |

## Tokens — Typography

### changeling-neo — Large display headings and primary branding elements. Its expansive letter-spacing combined with oversized scale creates a bold, almost sculptural presence that defines the brand's visual identity. · `--font-changeling-neo`
- **Substitute:** Montserrat
- **Weights:** 400
- **Sizes:** 42px, 230px, 280px
- **Line height:** normal
- **Letter spacing:** -0.0400em
- **Role:** Large display headings and primary branding elements. Its expansive letter-spacing combined with oversized scale creates a bold, almost sculptural presence that defines the brand's visual identity.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 42px | 1.3 | — | `--text-caption` |
| body-sm | 230px | 1.3 | — | `--text-body-sm` |
| body | 280px | 1.3 | — | `--text-body` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 9 | 9px | `--spacing-9` |
| 12 | 12px | `--spacing-12` |
| 21 | 21px | `--spacing-21` |
| 24 | 24px | `--spacing-24` |
| 28 | 28px | `--spacing-28` |
| 30 | 30px | `--spacing-30` |

### Border Radius

| Element | Value |
|---------|-------|
| default | 11.9952px |

### Layout

- **Section gap:** 48px
- **Card padding:** 21px
- **Element gap:** 9px

## Components

### Navigation Link
**Role:** Interactive text link for primary navigation.

Uses Aged Gold (#ece4b4) text with 12px vertical padding and 21px horizontal padding. On hover, a 1px Aged Gold (#ece4b4) border appears under the text.

### Display Number Block
**Role:** Large, decorative numerical text for section headers or visual markers.

Features 'changeling-neo' font at 230px or 280px, weight 400, in Aged Gold (#ece4b4), with -0.0400em letter-spacing. These numbers are central to the visual rhythm of the page.

### Interactive Text Button
**Role:** Text-based calls to action or navigation elements.

Presents as Aged Gold (#ece4b4) normal weight text. A 1px Aged Gold border outlines on hover, typical padding is 21px horizontal and 12px vertical.

## Do's and Don'ts

### Do
- Use Midnight Matte (#090909) as the base background for the overall page, creating a deep, dark canvas.
- Apply Greyscale Concrete (#4f4d3c) for distinct section backgrounds, providing subtle depth against the main canvas.
- Reserve Aged Gold (#ece4b4) exclusively for large display text, interactive elements, and thin borders, ensuring its impact as the sole accent color.
- Employ 'changeling-neo' weight 400 for all large headings and numerical displays, maintaining a consistent, architectural typographic presence.
- Utilize -0.0400em letter-spacing for 'changeling-neo' font across all sizes to uphold its distinctive compressed look.
- Maintain a comfortable density with element spacing based on a 4px grid, frequently using 9px for smaller element gaps and larger values like 21-30px for padding within interactive components.
- Apply an 11.9952px border radius to all rounded elements, such as interactive containers or image frames, for a consistent geometric softening.

### Don't
- Avoid introducing additional chromatic colors; limit the palette strictly to Midnight Matte, Greyscale Concrete, and Aged Gold.
- Do not use thin or light font weights, as the system relies on the singular weight 400 of 'changeling-neo' for visual impact.
- Do not use deep drop shadows or heavy elevation, as the design emphasizes flat planes and distinct sections.
- Refrain from using generic sans-serif fonts for primary headings or key numeric displays; 'changeling-neo' is intrinsic to the brand's voice.
- Do not break the established letter-spacing for 'changeling-neo'; its -0.0400em tracking is a core visual characteristic.
- Avoid full-bleed imagery that overwhelms the structured, framed nature of visual content; images should be contained and presented deliberately.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Midnight Matte | `#090909` | Base page background – the deepest layer. |
| 1 | Greyscale Concrete | `#4f4d3c` | Primary surface for individual sections and cards, providing a raised platform against the base. |

## Imagery

This site uses large, impactful photography within contained frames, reminiscent of film stills or gallery pieces. Images are presented full-color, often featuring individuals or groups in composed, cinematic shots, generally with minimalist backgrounds. There are no illustrations or abstract graphics. Icons are minimal, implied, or very basic, maintaining a focus on photography and large typography. The role of imagery is primarily content presentation and atmospheric setting, integrating directly with the section structure rather than acting as decorative background.

## Layout

The page employs a full-bleed structure for its dark background, but content within individual sections operates with a contained, centered width. The hero section is characterized by a very large, numeric display in Aged Gold alongside a more functional description. Sections transition seamlessly without hard dividers, relying on shifts between Midnight Matte and Greyscale Concrete for visual rhythm. Content is arranged asynchronously with large typographic elements often flanking framed imagery. Navigation is a minimalist top-right menu. The overall density is spacious, with considerable negative space emphasizing the scale of primary typography and the visual weight of content blocks.

## Agent Prompt Guide

**Quick Color Reference:**
text: dependent on surface (Midnight Matte or Aged Gold)
background: #090909
border: #ece4b4
accent: #ece4b4
primary action: #ece4b4 (outlined action border)

**3-5 Example Component Prompts:**
1. Create a hero section: Midnight Matte (#090909) background. Large display number '6 0 1' in changeling-neo 280px weight 400, Aged Gold (#ece4b4), letter-spacing -11.2px. Subtext '601 IS AN INDEPENDENT FILM STUDIO BASED IN TOKYO' in a neutral font (e.g., Arial) 14px, #ece4b4.
2. Design an interactive navigation link: 'ABOUT' text in a neutral font (e.g., Arial) 16px, Aged Gold (#ece4b4). Add 12px vertical and 21px horizontal padding. On hover, apply a 1px Aged Gold (#ece4b4) bottom border.
3. Build a content section with an interactive prompt: Greyscale Concrete (#4f4d3c) background. A large 'EXPLORE' link in Aged Gold (#ece4b4) with a similar 1px Aged Gold border on hover, using 12px vertical and 21px horizontal padding.

## Similar Brands

- **A24 Films** — Shared aesthetic of bold, experimental typography and minimalist design that foregrounds cinematic content.
- **Studio Dumbar** — Utilizes oversized, impactful typography and a stark, limited color palette to create a strong brand identity with Swiss design principles.
- **B&O (Bang & Olufsen)** — A premium brand known for its dark, sophisticated aesthetic combined with carefully selected accent colors and minimalist UI.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-midnight-matte: #090909;
  --color-greyscale-concrete: #4f4d3c;
  --color-aged-gold: #ece4b4;

  /* Typography — Font Families */
  --font-changeling-neo: 'changeling-neo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 42px;
  --leading-caption: 1.3;
  --text-body-sm: 230px;
  --leading-body-sm: 1.3;
  --text-body: 280px;
  --leading-body: 1.3;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-9: 9px;
  --spacing-12: 12px;
  --spacing-21: 21px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-30: 30px;

  /* Layout */
  --section-gap: 48px;
  --card-padding: 21px;
  --element-gap: 9px;

  /* Border Radius */
  --radius-xl: 11.9952px;

  /* Named Radii */
  --radius-default: 11.9952px;

  /* Surfaces */
  --surface-midnight-matte: #090909;
  --surface-greyscale-concrete: #4f4d3c;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-midnight-matte: #090909;
  --color-greyscale-concrete: #4f4d3c;
  --color-aged-gold: #ece4b4;

  /* Typography */
  --font-changeling-neo: 'changeling-neo', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 42px;
  --leading-caption: 1.3;
  --text-body-sm: 230px;
  --leading-body-sm: 1.3;
  --text-body: 280px;
  --leading-body: 1.3;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-9: 9px;
  --spacing-12: 12px;
  --spacing-21: 21px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-30: 30px;

  /* Border Radius */
  --radius-xl: 11.9952px;
}
```