Design Brand · v1.0

和紙に刻む、黎明に照らす。

Carved in paper, lit by dawn.

Trinity AOS は founder の判断を carved-in-stone する AOS。石ではなく和紙に刻む——脆くも繊維で支え合い、光を透かし、経年で深まる。水墨パステルは、墨の deliberateness（熟慮）と、淡彩の breathing room（余白）の両立。

02 — Philosophy

Three Pillars

The design principles that define Trinity AOS

01.

Clean × Pastel

白黒は素地の clarity。pastel は唯一の accent。両者の対比が craftsman の deliberateness を表す。

02.

Washi as Material

和紙テクスチャはパステル部分にのみ宿る。素材としての washi は、AI を「製品」ではなく「道具」に変える。

03.

間 (Ma) is a Feature

余白は装飾ではなく機能。決断の前後には沈黙が要る。Trinity AOS の UI は、間を削らず、設計する。

03 — Color System

Clean Foundation, Pastel Signature

Black & white base with analogous pastel accents

Light Mode Foundation

--paper#FAFAFA主背景 / Paper

--paper-soft#F4F4F5Sub layer

--ink#0A0A0A主テキスト / Ink

--ink-soft#52525B副テキスト

--line#E4E4E7Border

Dark Mode Foundation

--paper#0A0A0A主背景 / Paper

--paper-soft#161618Sub layer

--ink#FAFAFA主テキスト / Ink

--ink-soft#A1A1AA副テキスト

--line#27272ABorder

Pastel Accents

--p-sakura#F4C8D4桜 / Sakura

--p-fuji#C8BFE8藤 / Fuji

--p-asagi#B8D4E8浅葱 / Asagi

--p-wakana#C8DEC8若苗 / Wakana

Pastel は単色で使わず、必ずグラデーションとして扱う。下記の gradient-pastel-washi を参照。

Text on Pastel

Heading on pastel

Body text on pastel surface stays dark in both modes.

Same in dark mode

The pastel surface is always bright, so text stays dark.

text on pastel = #1A1525 (--ink-on-pastel)
        always, regardless of light/dark mode

04 — Typography

Mincho × Gothic, JP-EN Harmonized

Zen Old Mincho for titles, Zen Kaku Gothic New for body

DISPLAY · font-mincho · 56px / 600 / tracking-tight

三位一体の判断を、和紙に刻む。

H1 · font-mincho · 40px / 600

Decision-making AOS for craftsman-CEOs.

H2 · font-mincho · 32px / 500

対話・累積記憶・構造的反論。

H3 · font-gothic · 22px / 700

9 つの genesis question で identity を彫る。

BODY · font-gothic · 16px / 400 / leading-[1.8]

Trinity AOS は、founder が「直感的に正しい」と感じる判断を、AI との対話を通じて言語化し、cumulative memory として蓄積する operating system です。Decision-making の core に置くことで、founder の vision を organization 全体で共有します。

MONO · font-mono · 14px / 400taos-license-A1B2-C3D4-E5F6-G7H8-J9K0

05 — Washi Texture

材料としての和紙

Washi fiber texture is exclusive to pastel surfaces

Apply washi to:

Pastel gradient surfaces
TrinityLogo
2
Active stepper bullet
Section dividers (deckle edge)

Never apply washi to:

✕Body background (stays clean paper)
✕Standard cards / panels
✕Form inputs
✕Plain text

Rule: washi is the material of pastel.
      Pastel without washi feels synthetic.
      Washi without pastel feels heavy.
      Together: signature texture.

06 — Pastel Gradient

Analogous Flow, Washi-Mixed

135-degree gradient from sakura to wakana

.gradient-pastel-washi {
  background: linear-gradient(135deg,
    #F4C8D4 0%,    /* 桜 */
    #DDC3DE 30%,   /* 桜→藤 transition */
    #C8BFE8 50%,   /* 藤 */
    #B8D4E8 75%,   /* 浅葱 */
    #C8DEC8 100%   /* 若苗 */
  );
  /* + washi-fiber.svg overlay, mix-blend-multiply, opacity .45 */
}

近似色 (analogous) のみで構成。補色は使わない。

07 — Components

Reusable Primitives

Button, card, and brand components

Buttons

Primary uses pastel washi, ghost uses border-line, solid uses ink background.

WashiCard Variants

Default

shadow-sm

Elevated

shadow-lg shadow-ink/5

Flat

shadow-none

TrinityLogo

sm (32px)

md (48px)

lg (56px)

Logo Symbolism

Three Rings

COS / CPO / CLO — the founding chiefs. Also represents Human(s) + Agents + Organization OS working in harmony.

Interlocking Ribbon

Orchestration, dialogue accumulation, and multi-perspective judgment — the continuous flow of decision-making.

White Ribbon

Reliability, clarity, and institutional structure. The stable foundation upon which decisions are carved.

Pastel Gradient

Cultural diversity, personality, and cumulative memory. The human element woven into the system.

三つの環が交わるところに、判断が生まれる。
白は信頼、パステルは個性。
織り合わせることで、組織は呼吸する。

08 — Spacing & Rhythm

間 (Ma) — The Feature

Generous breathing room between sections

Section spacing

space-y-32 md:space-y-40

Between major sections. The "ma" that lets decisions breathe.

Content padding

px-6 md:px-12 / p-8

Container and card padding. Comfortable but not excessive.

09 — Motion

Subtle, Deliberate

Easing functions and transition timing

--ease-sumi: cubic-bezier(0.4, 0, 0.2, 1)
--ease-smooth: cubic-bezier(0.32, 0.72, 0, 1)

Hover states

duration-200, subtle scale or brightness

Page transitions

duration-300, ease-sumi

Modals/drawers

duration-300, ease-smooth for opening

10 — Accessibility

A11y Considerations

Color contrast, focus states, screen readers

Color contrast

ink on paper = #0A0A0A on #FAFAFA → 19.3:1 (AAA)
ink-on-pastel on pastel = #1A1525 on pastels → 7+:1 (AA)

Focus states

All interactive elements use outline-ring/50 on focus. Ring color is p-asagi for visibility.

Screen reader support

Semantic HTML, proper heading hierarchy, aria-labels on icon buttons, sr-only text where needed.

This page is the canonical reference for Trinity AOS design language.