Structured
Emergence
Value emerges from structure.
Dissolving Boundaries ── crossing domains, dissolving the lines between them.
Quiet, but moving forward.
Purpose of the system
This design system serves three purposes. When a call is hard to make, return here.
Design principles
The overall concept is Structured Emergence — value emerges from structure. The color concept is Dissolving Boundaries — crossing domains and dissolving the lines between them, embodied by two opposing colors (Coral / Deep Blue) and the OKLCH gradient where they meet.
Inside a strong black-and-white skeleton sits a gradient where warm and cool dissolve into each other. Boldness is concentrated in one place — the gradient — while type, layout, and motion stay quiet. When color leads, everything else closes with black and whitespace.
Color system — two tiers
Color is two-tiered: a black-and-white structure (the canvas) and two colors plus their gradient (the meaning). Most of any screen (roughly 85%+) runs in white, black, and gray; the gradient appears only in small areas, only at moments where boundaries dissolve.
#BF64C2. Default sRGB muddies it into gray-purple — killing the moment where boundaries dissolve.The neutral gray base secures a fair, flat point of view; on top of it, the two colors tell the story of the business. The moment where “nurture” and “explore” meet aligns, literally, with the positioning of crossing domains and dissolving boundaries.
ink or paper by default. Never use Coral or the gradient as body-text color on light backgrounds (insufficient contrast). Deep Blue may be used for small text such as links. Never carry meaning by color alone — always pair it with labels, position, and shape.Logo
The logo comprises the symbol, vertical lockup, horizontal lockup, and logotype. The symbol and lockups carry the brand gradient (the signature); text-led uses take the monochrome logotype. No decoration — showing the bare skeleton is the foundation of trust.
Typography — quiet structure
With color (the gradient) carrying expression, type keeps to structure. No serif headings. Three weights: Regular (400) / Medium (500) / Bold (700).
44–60px ・ 700 ・ 1.35
13–14px ・ 500 ・ 0.08em
28–36px ・ 700 ・ 1.5
20–22px ・ 700 ・ 1.6
16–17px ・ 400 ・ 1.9
15–16px ・ 400–500 ・ 1.7
13px ・ 400 ・ ink-60
クリエイティビティはどこに宿るのか。
[Japanese heading] ← Noto Sans JP 700
Layout & spacing
A 12-column grid. Keep the surface simple; take whitespace generously. Content max-width ~1200px; text blocks narrower still (~640–720px). Radius stays shallow (0–4px preferred, 8px max). Dividers are hairlines + whitespace. No drop shadows.
Graphic language — five geometric primitives
No abstract CG, no AI-ish spheres. Five geometric primitives form one consistent symbolic system, and color rides on them. The base is ink hairline; only the signature Update Loop takes the brand gradient.
Update Loop — the loop that moves forward
Never an ordinary PDCA circle. Drawn as a spiral — a flow that inches forward. The loop's path (the Value Line) is drawn in the brand gradient (Coral→Deep Blue is the direction of travel: nurture→explore); the phase nodes and labels sit quietly.
Components (Scope 1)
Don't multiply UI. A small set of patterns, reused.
Anti-template principles: no accent bars on card tops / shallow radius (0–4px) / hairlines + whitespace over boxed containers / CTAs never “color band + solid button.”
Motion & guardrails
prefers-reduced-motion.Bilingual policy
Japanese leads; the English is never a word-for-word translation. The English keeps the canonical core of meaning as a minimal company introduction — naturally signaling readiness for global-facing projects without overplaying the global firm impression.
Hooks for Scope 2
Not built now — but never broken. The LP components are designed so they can later grow into the corporate site (automated publishing). Keep the following in mind; no implementation needed yet.
Tokyo-based ・ works with international partners