---
version: alpha
name: Curio Tech
description: Editorial recruitment microsite energy — a bold bilingual Japanese/English layout with an oversized "夢を、欲しがれ" headline voice, carousel-driven interview cards, a percentage preloader, and a confident red accent over a near-white canvas with deep charcoal ink.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#f7f6f4"
  surface-soft: "#fbfaf8"
  ink: "#1a1a1a"
  ink-secondary: "#5c5c5c"
  ink-muted: "#8f8f8f"

  # Brand accent — energetic red used for CTAs and emphasis
  primary: "#e2231a"
  primary-hover: "#c11c14"

  # Supporting
  accent-ink: "#000000"
  divider: "#e6e4e0"
  card-overlay: "#262422"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#ffffff"

typography:
  display-hero:
    fontFamily: "Noto Sans JP, Inter, sans-serif"
    fontSize: 88px
    fontWeight: 900
    lineHeight: 1.05
    letterSpacing: -2px
  section-heading:
    fontFamily: "Noto Sans JP, Inter, sans-serif"
    fontSize: 48px
    fontWeight: 800
    lineHeight: 1.15
    letterSpacing: -1px
  card-title:
    fontFamily: "Noto Sans JP, Inter, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: -0.4px
  eyebrow:
    fontFamily: "Inter, Noto Sans JP, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 2px
  body-large:
    fontFamily: "Noto Sans JP, Inter, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.9
    letterSpacing: 0px
  body:
    fontFamily: "Noto Sans JP, Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0px
  body-small:
    fontFamily: "Noto Sans JP, Inter, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Noto Sans JP, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 1.5px
  caption:
    fontFamily: "Inter, Noto Sans JP, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 1px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 160px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 36px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 36px
  button-secondary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 36px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 16px 36px
    borderColor: "{colors.ink}"
  card-interview:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.lg}"
    padding: 0px
    borderColor: "{colors.divider}"
  card-overlay-caption:
    backgroundColor: "{colors.card-overlay}"
    textColor: "{colors.on-ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  eyebrow-label:
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow}"
  badge:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.divider}"
  input-focus:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.primary}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.divider}"
  preloader-counter:
    textColor: "{colors.ink}"
    typography: "{typography.display-hero}"
---

# Curio Tech Design System

## Overview

Curio Tech's recruitment microsite is a piece of editorial motion design wearing the clothes of a hiring page. It opens with a percentage preloader counting up to 100, then drops the visitor into an oversized bilingual headline — the Japanese tagline "夢を、欲しがれ" ("Crave your dreams") set enormous and heavy against a near-white canvas. This is a site built to be felt before it is read, where the recruitment funnel is staged as a cinematic scroll rather than a form to fill out.

The visual language is confident and minimal in palette but maximal in scale. The canvas stays pure white (`{colors.background}`) with deep, slightly-warm charcoal ink (`{colors.ink}`) doing the heavy lifting for text. A single energetic red (`{colors.primary}`) carries every call to action — the repeated "ENTRY" button — and punctuates eyebrow labels so the eye always knows where to act. There are no competing accent colors; the restraint is what lets the red read as urgent rather than decorative.

The signature structural move is the interview carousel: a horizontal rail of six employee cards prompting "CLICK TO DIVE" / "TAP TO DIVE", each a portrait with an overlay caption. The cards turn the workforce into the product. Typography pairs a heavy Japanese-capable sans (Noto Sans JP standing in for the brand's gothic display face) for headlines and body with a Latin grotesque (Inter) for tracked-out English eyebrows and button labels — the bilingual contrast is itself a design device.

Everything is engineered for swipe-and-scroll affordances: "SCROLL", "SWIPE" prompts, parallax sections, and social proof via Instagram, TikTok, and YouTube. The result reads young, playful, and editorial — a recruitment brand that wants to feel like a culture, not a careers tab.

**Key Characteristics:**
- Oversized heavy bilingual headlines (`{typography.display-hero}` at 88px/900) — Japanese gothic display energy
- Single red brand accent (`{colors.primary}`) reserved for ENTRY CTAs and eyebrow emphasis
- Percentage preloader counting to 100 as the brand's first impression
- Horizontal interview-card carousel ("CLICK TO DIVE") turning employees into the hero content
- Pure-white canvas with warm charcoal ink — chrome stays neutral, red stays loud
- Pill-shaped CTAs with wide tracked-out uppercase Latin labels
- Tracked Inter eyebrows over Noto Sans JP body — bilingual typographic contrast as identity

## Colors

### Primary
- **Curio Red** (`{colors.primary}`): The single brand accent. ENTRY buttons, eyebrow labels, active emphasis.
- **Curio Red Hover** (`{colors.primary-hover}`): Darker red on hover/press for CTAs.
- **Charcoal Ink** (`{colors.ink}`): Headlines, body, dark secondary buttons. Slightly warm, not pure black.
- **Pure White** (`{colors.background}`): Page canvas, card text on dark, button labels.

### Text & Neutral
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting paragraph copy, sub-labels.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled text.
- **Accent Ink** (`{colors.accent-ink}`): True black for maximal-contrast display moments.

### Surface & Structure
- **Surface** (`{colors.surface}`): Warm off-white section/card fill for separation from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Barely-tinted surface for nested blocks.
- **Divider** (`{colors.divider}`): Hairline rules, input borders, card outlines.
- **Card Overlay** (`{colors.card-overlay}`): Dark caption bar over interview portraits.

## Typography

### Font Family
- **Primary**: `Noto Sans JP`, with fallbacks: `Inter, sans-serif` — Japanese-capable gothic for headlines and body.
- **Latin display / labels**: `Inter`, with fallbacks: `Noto Sans JP, sans-serif` — tracked-out English eyebrows and buttons.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 88px/900 hero headline and preloader counter — maximum impact |
| `section-heading` | 48px/800 section titles |
| `card-title` | 24px/700 interview card names |
| `eyebrow` | 13px/700 tracked uppercase Latin eyebrow labels (often red) |
| `body-large` | Introductions, lead paragraphs with generous Japanese line-height |
| `body` | Standard reading text |
| `body-small` | Captions, secondary UI |
| `button-ui` | Tracked uppercase pill-button labels |
| `caption` | Metadata, overlay captions, social labels |

### Principles
- **Bilingual contrast as identity**: Heavy Japanese gothic headlines paired with widely-tracked Latin eyebrows — the language switch is a visual rhythm, not an afterthought.
- **Generous line-height for Japanese body**: Body copy runs at 1.8–1.9 line-height so dense Japanese characters breathe.
- **Weight for impact, tracking for English**: Headlines go to 900 weight; English labels lean on letter-spacing (1.5–2px) rather than weight.
- **Red only on labels and CTAs**: Eyebrows and ENTRY buttons own the accent; body and headings stay ink.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px. Sections separate with large vertical gaps (`{spacing.3xl}`–`{spacing.4xl}`) to give the cinematic scroll room.

### Grid & Container
- Full-bleed hero with oversized centered/left headline
- Horizontal carousel rail for interview cards (overflow scroll on mobile, drag on desktop)
- Generous max content width (~1200px) for prose sections, edge-to-edge for media

### Whitespace Philosophy
- **Cinematic pacing**: Each section is a beat in a scroll sequence; whitespace controls tempo.
- **Loud accent, quiet field**: The white canvas and neutral chrome make the single red CTA unmissable.
- **Media-forward**: Portraits and overlays do the storytelling; type frames them.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Overlay caption bars, full-bleed media |
| `sm` | 4px | Inputs, small chips |
| `md` | 8px | Compact cards, tiles |
| `lg` | 16px | Interview cards, media containers |
| `xl` | 24px | Large feature blocks |
| `pill` | 9999px | ENTRY buttons, badges, social pills |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card-interview}`).

### Buttons
- **`button-primary`** — Curio Red pill with white tracked uppercase label. The "ENTRY" CTA.
- **`button-secondary`** — Charcoal ink pill, white label. Secondary actions.
- **`button-ghost`** — White with ink outline pill. Tertiary / quiet actions.

### Cards
- **`card-interview`** — Portrait-led card on warm surface, `{rounded.lg}`, with a dark `card-overlay-caption` bar naming the employee. The carousel hero.

### Labels & Badges
- **`eyebrow-label`** — Red tracked uppercase Latin label above section headings.
- **`badge`** — Dark pill chip for tags/roles.

### Inputs
- **`input`** — White field, hairline divider border, focus shifts border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — White sticky header, tracked uppercase links, ENTRY pill CTA right-aligned, hairline bottom divider.

### Distinctive Components
- **Preloader counter** — Display-scale percentage counting 0→100 on load, the brand's first impression.
- **Interview carousel** — Horizontal rail of six "CLICK TO DIVE" portrait cards with overlay captions.

## Do's and Don'ts

### Do
- Reserve `{colors.primary}` red for ENTRY CTAs and eyebrow labels only
- Go big and heavy on headlines (88px/900) — scale is the brand
- Pair tracked Latin eyebrows with Japanese gothic headlines
- Keep generous 1.8–1.9 line-height on Japanese body copy
- Use pill radius on all CTAs

### Don't
- Don't introduce a second accent color — the red is the whole palette
- Don't tighten Japanese body line-height below 1.7
- Don't put red on large surfaces; it's a punctuation color
- Don't use pure black for body ink — `{colors.ink}` is warm charcoal
- Don't square off the CTA buttons — pills are the brand shape

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, carousel becomes swipe rail, headline scales down |
| Tablet | 600–1024px | 2-up media, larger type returns |
| Desktop | 1024–1400px | Full carousel drag, max content width |
| Large | >1400px | Centered with generous margins |

### Collapsing Strategy
- Hero headline: 88px scales down proportionally, retains heavy weight
- Interview carousel: drag on desktop → native swipe on mobile ("TAP TO DIVE")
- Navigation: tracked links → hamburger with full-screen menu
- Section spacing: 96–160px → ~48px on mobile

### Touch Targets
- ENTRY pill CTAs use 16px vertical padding for comfortable tapping
- Carousel cards are full-width swipe targets on mobile
- Social icons spaced for tap accuracy

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Curio Red `{colors.primary}`
- Background: Pure White `{colors.background}`
- Heading text: Charcoal `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Eyebrow / emphasis: Curio Red `{colors.primary}`
- Border / divider: `{colors.divider}`

### Example Component Prompts
- "Create a hero on white. Headline in Noto Sans JP 88px weight 900, line-height 1.05, letter-spacing -2px, color `{colors.ink}`, with a red tracked uppercase eyebrow (`{colors.primary}`, Inter 13px weight 700, letter-spacing 2px) above it. Red pill ENTRY button (`{colors.primary}`, 9999px radius, 16px 36px padding, white 14px weight 700 tracked label)."
- "Build an interview card: warm surface `{colors.surface}`, 16px radius, portrait image, with a dark overlay caption bar (`{colors.card-overlay}`, white 12px caption) naming the employee. Lay six in a horizontal carousel."
- "Design navigation: white sticky header, hairline `{colors.divider}` bottom border, tracked uppercase ink links, red ENTRY pill CTA right-aligned."
- "Add a preloader: full-screen white, a percentage counter centered in Noto Sans JP 88px weight 900 `{colors.ink}` counting 0 to 100."

### Iteration Guide
1. One accent only — red `{colors.primary}` on CTAs and eyebrows, nowhere else large
2. Headlines are heavy and huge; English labels lean on tracking, not weight
3. Pill radius on every CTA and chip
4. Keep Japanese body line-height ≥1.8
5. Let portraits and the carousel carry the story; type frames the media

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Curio Tech. Brand names and trademarks belong to their respective owners.