# Fout.co.jp Design System

> High-contrast monochrome foundation punctuated by aggressive signal red accents and sharp, industrial geometry.

**Source:** https://fout.co.jp | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Fout.co.jp utilizes a stark, high-contrast palette dominated by absolute black (#000000) and pure white (#ffffff), creating a professional, industrial atmosphere. The system’s primary "voltage" comes from a saturated signal red (#cc0000) used for critical CTAs, badges, and section headings. Typography is strictly Helvetica-based, favoring a 0.45px letter-spacing across most scales to maintain legibility against dark backgrounds. Layouts are characterized by sharp 0px corners on primary buttons and large-scale photography, with occasional 20px radii reserved for specific informational tags.

## Signature DNA
1. **Signal Red Punctuation** (#cc0000 is used as a high-visibility disruptor against the monochrome base for headings and primary actions, appearing over 115 times across the interface).
2. **Sharp Industrial Geometry** (A dominant border-radius of 0px for primary buttons and section containers creates a rigid, architectural feel).
3. **Helvetica Utility** (The system relies entirely on Helvetica for both display and body, using a consistent 0.45px tracking to unify disparate font sizes).

## Family Map
Not captured in source (no sub-brands identified in topology).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary text, dark section backgrounds | 110 | 0.8 | computed_style |
| `{color.white}` | `#ffffff` | Page background, text on dark surfaces | 99 | 0.8 | computed_style |
| `{color.gray.light}` | `#dddddd` | Secondary backgrounds, subtle dividers | 10 | 0.6 | computed_style |
| `{color.gray.mid}` | `#666666` | Secondary body text | 6 | 0.6 | computed_style |
| `{color.gray.muted}` | `#8f8f8f` | Tertiary text, metadata | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.red.primary}` | `#cc0000` | Primary CTAs, section titles, active borders | 115 | 0.8 | computed_style |
| `{color.red.light}` | `#ff7d7b` | Decorative borders, secondary accents | 4 | 0.6 | decorative_only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Helvetica | 400, 500, 700 | All-purpose (Heading, Body, UI) | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 28px | 33.6px | 0.45px | 500 | Section Headers | `h3.m-ttl03.p-h2` |
| `{type.heading.md}` | 26px | 44.2px | 0.45px | 700 | Navigation Links | `a` |
| `{type.heading.sm}` | 16px | 27.2px | 0.45px | 700 | Subheadings | `h5` |
| `{type.body.md}` | 15px | 25.5px | 0.45px | 400 | Default Body | `header.l-header` |
| `{type.body.bold}` | 15px | 25.5px | 0.45px | 700 | Emphasized Body | `a` |
| `{type.body.wide}` | 15px | 25.5px | 1px | 400 | Copy blocks | `div.l-copy` |
| `{type.body.sm}` | 14px | 23.8px | 0.45px | 400 | Footer Links | `a` |
| `{type.caption}` | 12px | 20.4px | 0.45px | 400 | Metadata | `a` |

### Principles
1. **Consistent Tracking:** A universal letter-spacing of 0.45px is applied to almost all text roles to ensure a consistent "voice."
2. **Bold Hierarchy:** Weight 700 is reserved for structural navigation and subheadings, while Weight 500 is used for large section titles.
3. **Monochrome Contrast:** Text color strictly toggles between #ffffff and #000000 based on background luminance to maintain maximum accessibility.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 5px | 29 |
| `{space.sm}` | 10px | 40 |
| `{space.md}` | 15px | 74 |
| `{space.lg}` | 40px | 57 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Primary buttons, news items, section blocks | 276 occurrences |
| `{radius.pill}` | 20px | Category tags, informational badges | 3 occurrences |

## Elevation
Not captured in source (system uses flat borders and color blocks rather than shadows).

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main site actions (e.g., "View News List")
**Pages observed:** https://fout.co.jp
**Spec:** Background: `#cc0000` / Text: `#ffffff` / Border: `1px solid #cc0000` / Radius: `0px` / Padding: `10px` / Typography: `15px 700`
**States observed:** Default: Captured | Hover/Active: Not captured

#### Info Tag
**Role:** Categorization labels (e.g., "Press Release")
**Pages observed:** https://fout.co.jp
**Spec:** Background: `transparent` / Text: `#cc0000` / Border: `1px solid #cc0000` / Radius: `20px` / Padding: `3px` / Typography: `12px 400`
**States observed:** Default: Captured

### Tier 2: Patterns

#### News Row
**Role:** List items for corporate updates
**Pages observed:** https://fout.co.jp
**Spec:** Border-bottom: `1px solid #dddddd` / Padding-vertical: `15px` / Text: `#000000`
**States observed:** Default: Captured

#### Topic Card
**Role:** Visual navigation blocks with image backgrounds
**Pages observed:** https://fout.co.jp
**Spec:** Background: `image` / Overlay: `rgba(0,0,0,0.3)` / Text: `#ffffff` / Radius: `0px`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Global Header
**Role:** Top-level site navigation
**Pages observed:** https://fout.co.jp
**Spec:** Background: `#ffffff` / Height: `auto` / Text: `#000000` / Typography: `15px 400`
**States observed:** Default: Captured

#### Dark Section
**Role:** High-impact content areas (e.g., "Make Some NOISE!")
**Pages observed:** https://fout.co.jp
**Spec:** Background: `#000000` / Text: `#ffffff` / Heading: `#ffffff`
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | ~1200px |
| Section Vertical Gap | 40px - 143px |
| Grid | Flex-based 3-column (Topics) |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Topic cards stack vertically |
| Desktop | 1440px | Horizontal navigation; 3-up grid for Topics |

## Imagery & decoration
The brand utilizes high-contrast photography with dark overlays to ensure text legibility. Graphic motifs include "glitch" effects on specific campaign headers (e.g., "Make Some NOISE!") and a repeating circular logo pattern for group company listings.

## Do's
- Use `#cc0000` for all primary user actions.
- Maintain `0px` border radius for all structural components.
- Apply `0.45px` letter-spacing to all Helvetica headings.
- Ensure text on `#000000` backgrounds is `#ffffff`.
- Use `#dddddd` for subtle horizontal separators in lists.

## Don'ts
- **Wrong:** Using a rounded radius on primary buttons. **Right:** Keep corners at `0px`. **Reason:** To maintain the industrial brand aesthetic.
- **Wrong:** Using `#cc0000` for body text. **Right:** Use for headings or CTAs only. **Reason:** Legibility and semantic hierarchy.
- **Wrong:** Mislabeling a sub-brand accent as the parent primary. **Right:** The parent primary is `#000000`. **Reason:** This is a monochrome-first system.

## Similar brands
- MUJI (Monochrome utility)
- Uniqlo (Red/White/Black high-contrast system)
- Rough Trade (Industrial, type-heavy aesthetic)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --fout-red: #cc0000;
  --fout-black: #000000;
  --fout-white: #ffffff;
  --fout-gray: #dddddd;
  --fout-font: 'Helvetica', sans-serif;
  --fout-tracking: 0.45px;
  --fout-radius-sharp: 0px;
  --fout-radius-pill: 20px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using #cc0000 background, white Helvetica bold text, and 0px border radius."
- "Create a news list item with a 1px solid #dddddd bottom border and 15px vertical padding."
- "Design a category badge with a 1px #cc0000 border, 20px border-radius, and 12px red text."

## Known gaps
- Hover and focus states for buttons were not captured in the initial crawl.
- Mobile-specific font size adjustments for display headings were not fully sampled.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://fout.co.jp | 1440x900 | 2026-06-06 |
| Homepage (Mobile) | https://fout.co.jp | 390x844 | 2026-06-06 |