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

# 601 Inc. · Design System

> A cinematic canvas for independent film.

**Theme:** dark · **Industry:** media · **Source:** https://www.rokumaruichi.tokyo/ · **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._

601 Inc. pairs a nearly black canvas with pale yellow typography and immersive moving-image work. Oversized studio numerals, restrained navigation, and a changing film frame make the homepage feel like a cinematic title sequence.

## North star

Treat the page as a dark cinema screen: let one oversized pale-yellow mark and one immersive film frame carry the composition.

## Overview

The page is built around a near-black canvas (#090909) that lets the film footage read as the main visual event. Pale yellow (#ece4b4) is the sole measured brand color, used for the oversized “601” and episode counter as well as small navigation labels and utility text. The result is high contrast without introducing a separate CTA color or decorative palette. Display typography is exceptionally large, uppercase, and geometric, while compact uppercase sans-serif text handles the studio description, navigation, and bottom-edge actions. The composition uses broad, open space rather than boxed content: a large film image sits within a dark, architectural frame, with the numerals overlapping its edges. Small header details sit near the top, while email and explore actions anchor the bottom. The motion-led imagery supplies cooler blue and gray tones, but these belong to the footage rather than the core interface palette. Keep surfaces flat, edges sharp, and supporting text sparse.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Projection Ivory | `#ece4b4` | `--color-projection-ivory` | brand | Sole measured brand accent for oversized numerals, navigation, small labels, and link text against the dark canvas. |
| Cinema Black | `#090909` | `--color-cinema-black` | neutral | Near-black page canvas surrounding the film frame and supporting the high-contrast, cinematic composition. |

### Semantic aliases

`--color-canvas` → `#090909` (Cinema Black) · `--color-text` → `#ece4b4` (Projection Ivory) · `--color-border` → `#ece4b4` (Projection Ivory) · `--color-accent` → `#ece4b4` (Projection Ivory)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ece4b4` | `#090909` | 15.48:1 | AAA |
| `#ece4b4` | `#090909` | 15.48:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| diagramm | `--font-body` | webfont | 400, 500 | Compact uppercase navigation, studio description, and utility labels. | Montserrat |
| changeling-neo | `--font-display` | webfont | 400 | Oversized display numerals and large uppercase headline lettering. | Michroma |

- **diagramm:** Use regular weight, uppercase, compact line height, and neutral tracking for small supporting text.
- **changeling-neo:** Use regular weight and uppercase forms; display lettering is expansive, geometric, and tightly tracked where measured.

### Type scale — Custom (ratio ≈ 2.858, base 12px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 280px | 400 | normal | -0.04em | uppercase | changeling-neo | Oversized 601 brand mark and prominent episode counter. |
| h1 | 230px | 400 | normal | 0 | uppercase | changeling-neo | Large uppercase hero lettering where a headline is present. |
| h2 | 42px | 400 | normal | -0.04em | uppercase | changeling-neo | Secondary uppercase section or feature titles. |
| body | 12px | 400 | 1 | 0 | uppercase | diagramm | Small uppercase studio description and supporting copy. |
| nav | 12px | 400 | 1 | 0 | uppercase | diagramm | Compact uppercase header links and utility navigation. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 3, 4, 5, 6, 12, 15, 21, 24, 28, 30 px.
- Section rhythm — · element gap — · card padding — · max content width —.

Use a viewport-filling, single-scene composition with content distributed across the edges rather than placed in a centered card grid. Keep the studio mark large at the upper left, a concise description near the top, and navigation aligned at the upper right. Center the film frame within a darker architectural surround, allowing display numerals to overlap it. Keep email and explore actions near the lower edge. Measurements provide no page maximum width or section rhythm, so preserve the spacious, full-bleed impression without inventing fixed dimensions.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.8s ease` on interactive elements.

The interface reads as flat, with no measured shadows, gradients, or card treatments. Use sharp-edged divisions and rely on the darker architectural framing within the footage for depth. Keep the media layer visually distinct from the page canvas without adding invented borders, radii, or elevation effects.

## Imagery

Use cinematic film or video as the central visual, framed like a projected image within a dark room or architectural surround. The footage can bring in muted blue, gray, and natural scene colors; treat these as image content, not interface palette. Keep the image wide and immersive, with large type layered over or beside it rather than captions or decorative illustration.

## Components

### Oversized studio mark

A huge pale-yellow “601” sits at the upper left in Changeling Neo, functioning as both brand signature and display typography.

### Compact header navigation

Small uppercase About and Archive links align at the upper right in Diagramm, accompanied by tiny pale-yellow dot markers.

### Studio descriptor

A concise uppercase statement identifying the independent Tokyo film studio appears near the top, set in small Diagramm text.

### Immersive film frame

A wide film image occupies the center of a dark, room-like architectural surround, establishing the main visual focus.

### Episode counter

An oversized pale-yellow fraction overlaps the right side of the film image as a prominent display element.

### Bottom utility links

Email and Explore sit near the lower edge as small uppercase labels; Explore includes a small directional marker.

### Measured component styles

- **Link** (“TRIPPIN”): transparent background · text #ece4b4 · radius 0px · padding 0px · 400 11.9952px diagramm · uppercase
- **Navigation item** (“6 0 1”): transparent background · text #ece4b4 · radius 0px · padding 0px · 400 11.9952px diagramm · uppercase

## Do

- Use #090909 as the dominant page canvas.
- Reserve #ece4b4 for brand typography and small interface details.
- Make the film frame the central visual event.
- Set primary display lettering in an oversized geometric uppercase style.
- Keep navigation and supporting copy compact and uppercase.
- Let display type overlap the media when it suits the composition.

## Don't

- Don't add a bright CTA color.
- Don't turn the layout into a card grid.
- Don't add rounded cards or decorative shadows.
- Don't treat colors within the footage as brand palette.
- Don't crowd the header with extra copy.
- Don't shrink the display mark into a conventional logo lockup.

## Agent prompt

Build a new page in the visual style of 601 Inc.: an independent film studio homepage that feels like a cinematic title sequence. Use Cinema Black (#090909) as the full-page canvas and Projection Ivory (#ece4b4) for display lettering, navigation, and small labels. Place an oversized geometric uppercase brand mark near the top left, compact studio information and navigation along the top edge, and one immersive film or video frame as the central focus. Let a large episode-style counter overlap the media. Anchor sparse utility links near the bottom edge. Use Changeling Neo-like geometric display typography and Diagramm-like compact uppercase sans-serif text. Keep the composition open, flat, sharp-edged, and media-led; do not introduce cards, gradients, rounded corners, shadows, or extra interface colors.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-screen dark composition with top-edge navigation, central film frame, overlapping display numerals, and bottom-edge utility links. | About and Archive navigation, Email contact link, Explore link, Episode counter | Near-black canvas, Oversized pale-yellow numerals, Compact uppercase labels, Framed cinematic media |

## Source CSS custom properties (selected)

```css
--col-yellow-bg: #4f4d3c;
```

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