# LayerX Design System

> A high-contrast corporate canvas where deep slate ink meets pure white space, punctuated by sharp geometric isometric forms and electric violet accents.

**Source:** https://layerx.co.jp | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** Parent | **Related brands:** None

## TL;DR
LayerX utilizes a "monochrome-plus" system that leans heavily on a deep slate primary color `#152632` for typography and structural surfaces. The canvas is predominantly pure white `#ffffff`, creating a stark, professional atmosphere. Brand energy is introduced through a singular electric violet accent `#534dff` (tokenized as `--pause-bg-color`) and isometric 3D illustrations that use transparency and gradients. Typography is a sophisticated pairing of **PPMori-SemiBold** for high-impact display and **Tazugane Gothic** for functional body text, maintaining a clean, modern Japanese aesthetic.

## Signature DNA
1. **Isometric Geometry** (Floating 3D block illustrations with gradient faces and transparency, visible on the homepage hero and 404 page).
2. **Slate-on-White Contrast** (The use of `#152632` for primary text and dark section backgrounds against `#ffffff` creates a 15.5:1 contrast ratio, signaling high-trust corporate stability).
3. **PPMori Display** (The use of PPMori-SemiBold at large scales (60px) with generous letter spacing (2.4px) defines the brand's premium technical voice).

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.white}` | `#ffffff` | Page background, primary surface, text on dark | 22 | 1.0 | Computed Style |
| `{color.slate.900}` | `#152632` | Primary text, dark section backgrounds | 398 | 0.8 | Computed Style |
| `{color.gray.soft}` | `#f6f6f7` | Subtle section backgrounds, alternating bands | 3 | 0.6 | Computed Style |
| `{color.gray.muted}` | `#9ea2ad` | De-emphasized text, metadata | 3 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.violet}` | `#534dff` | Primary action background, "Join Us" button | 10 | 1.0 | `--pause-bg-color` |
| `{color.mint}` | `#ccefd1` | Decorative surface background (News tags) | 3 | 0.6 | Computed Style |
| `{color.slate.light}` | `#727888` | Secondary labels, sub-navigation | 3 | 0.6 | Computed Style |

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| **PPMori-SemiBold** | 400 | Display, Headings, Labels | Inter SemiBold | Licensed |
| **TazuganeGothicStdN-Medium** | 400 | Body, Functional text | Noto Sans JP | Licensed |
| **TazuganeGothicStdN-Regular** | 400 | Subheadings | Noto Sans JP | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{text.display.xl}` | 60px | 84px | 2.4px | 400 | Hero headlines (JP) | `span._text-display-xl` |
| `{text.display.lg}` | 52px | 72.8px | 2.08px | 400 | Section headers | `h1._text-display-xl` |
| `{text.display.md}` | 44px | 61.6px | 1.76px | 400 | Sub-hero text | `span` |
| `{text.heading.lg}` | 32px | 44.8px | normal | 400 | Section titles | `span.c-text-anim-small` |
| `{text.heading.md}` | 24px | 28.8px | normal | 400 | English sub-headers | `h2._text-headline-en-m` |
| `{text.body.lg}` | 16px | 24px | normal | 400 | Main body copy | `h1.p-index-main-visual__copy` |
| `{text.label.lg}` | 16px | 22.4px | 0.32px | 400 | Navigation, Labels | `p._text-label-l` |
| `{text.label.md}` | 14px | 19.6px | 0.28px | 400 | Small UI labels | `p._text-label-m` |
| `{text.caption}` | 12px | 16.8px | 0.24px | 400 | Badges, small caps | `p._text-label-s` |

### Principles
1. **Display Tracking:** Large display headers (44px+) must use positive letter spacing (1.76px to 2.4px) to maintain an airy, premium feel.
2. **English/Japanese Pairing:** English sub-headers often accompany Japanese titles, rendered in PPMori-SemiBold at smaller scales (24px).
3. **Label Precision:** UI labels use specific tracking (0.24px - 0.32px) to ensure legibility on high-contrast backgrounds.

## Spacing
**Base unit:** 4px (derived)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 5px | 6 |
| `{space.sm}` | 10px | 3 |
| `{space.md}` | 20px | 14 |
| `{space.lg}` | 28px | 6 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.sharp}` | 0px | Default containers, images | 406 occurrences |
| `{radius.md}` | 12px | Small UI controls, cards | Observed Surface component |
| `{radius.lg}` | 24px | Large surface panels | Observed Surface component |
| `{radius.pill}` | 9999px | Buttons, badges | 3 occurrences |

## Components

### Tier 1: Foundational

#### Button Primary
**Role:** Main call to action (e.g., "Join Us")
**Pages observed:** https://layerx.co.jp
**Spec:** Background: `#534dff` / Text: `#ffffff` / Radius: `9999px` / Typography: `{text.label.lg}`
**States observed:** Default | Hover: captured

#### Navigation Link
**Role:** Top-level site navigation
**Pages observed:** https://layerx.co.jp, https://layerx.co.jp/about
**Spec:** Background: transparent / Text: `#152632` / Typography: `{text.label.lg}`
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### News Tag
**Role:** Categorization for news items
**Pages observed:** https://layerx.co.jp
**Spec:** Background: `#ccefd1` / Text: `#152632` / Radius: `0px` / Typography: `{text.caption}`
**States observed:** Default: captured

#### Service Card
**Role:** Highlighting business units (Bakuraku, AI Workforce)
**Pages observed:** https://layerx.co.jp
**Spec:** Background: `#ffffff` / Border: `1px solid #f6f6f7` / Radius: `0px` / Padding: `20px`
**States observed:** Default | Hover: captured

### Tier 3: Surface-specific

#### Content Panel
**Role:** Large layout containers for section content
**Pages observed:** https://layerx.co.jp
**Spec:** Background: `transparent` / Radius: `24px` / Border: `none`
**States observed:** Default: captured

#### Footer
**Role:** Site-wide navigation and legal
**Pages observed:** https://layerx.co.jp, https://layerx.co.jp/about
**Spec:** Background: `#ffffff` / Text: `#152632` / Border-top: `1px solid #152632`
**States observed:** Default: captured

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1200px (estimated from 1440px viewports) |
| Section Padding | 80px - 120px vertical |
| Grid | 12-column desktop |

## Do's
- Use `#152632` for all primary headings to ensure maximum contrast.
- Apply positive letter spacing (at least 1.76px) to any text over 40px.
- Use the `#534dff` violet accent exclusively for primary conversion points.
- Maintain sharp `0px` corners for most structural elements and images.
- Pair Japanese text with smaller English sub-captions in PPMori.

## Don'ts
- Do not use `#534dff` for body text or large background areas; it is an accent only.
- Do not round corners of primary service cards; keep them at `0px`.
- Avoid using pure black `#000000`; use the brand slate `#152632` instead.
- Do not use sub-brand colors (if any are added) as the primary site-wide action color.
- Do not apply shadows to cards; use hairlines or background shifts for depth.

## Similar brands
- **Stripe** (High-contrast typography, isometric illustrations)
- **Linear** (Deep slate palettes, precise UI labels)
- **Vercel** (Monochrome foundation with geometric accents)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-slate-primary: #152632;
  --color-violet-accent: #534dff;
  --color-canvas: #ffffff;
  --color-surface-soft: #f6f6f7;
  
  --font-display: "PPMori-SemiBold", sans-serif;
  --font-body: "TazuganeGothicStdN-Medium", sans-serif;
  
  --radius-panel: 24px;
  --radius-pill: 9999px;
}
```

## Agent prompt examples
- "Generate a hero section with a `#ffffff` background, using `#152632` for the headline in PPMori-SemiBold at 60px with 2.4px letter spacing."
- "Create a primary CTA button using the `{color.violet}` (#534dff) background and a pill-shaped radius of 9999px."
- "Design a content card with a sharp 0px border radius and a 1px solid border using `#f6f6f7`."

## Known gaps
- Shadow tokens were not detected in the CSS variables or computed styles; the system appears to rely on flat design and hairlines.
- Mobile-specific spacing tokens were not explicitly declared in the source, though responsive behavior was observed.
- Semantic colors for "Error" or "Warning" were not captured in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://layerx.co.jp | 1440px | 2026-06-06 |
| About | https://layerx.co.jp/about | 1440px | 2026-06-06 |
| 404 Page | https://layerx.co.jp/404 | 1440px | 2026-06-06 |