SORAH Design
Guidelines

---
name: SORAH Design System
version: 5.3.0
colors:
  vi: "#00BFFF"          # Brand only — logo & brand moments. Never for UI actions.
  primary: "#006BFF"     # Actions, selection, positive change. One primary button per screen. Icons & >=18px headings only for text.
  blueFill: "#0060E6"    # Ground for white text (buttons, pills, badges). 5.5:1 — #006BFF is 4.0:1 and fails AA.
  blueText: "#05396B"    # Blue text under 18px. 11.7:1 on white.
  primaryDeep: "#05396B" # Hover / pressed / second data series.
  negative: "#DA003C"    # Negative change, warnings, destructive only. Never decorative.
  ink: "#111111"
  ink2: "#4A4A4A"
  ink3: "#767676"        # Last step usable as text (4.5:1).
  ink4: "#8A8A8A"        # Rules, icons, dividers. NEVER text.
  paper: "#FFFFFF"
  tint: "#E6F0FF"
  tint2: "#F2F7FF"
  rule: "#E5E5E5"
  rule2: "#D4D4D4"
  disabled: "#CCCCCC"
  frost: "#CBD9F9"       # Glass tint plane (82%) — icon & illustration language.
  modes: # v5.0 — flat two-mode ground. "auto" follows OS appearance. Sky textures are NOT UI backgrounds.
    lightBg: "#FFFFFF"   # Pure white ground; cards = white + 1px hairline rgba(17,17,17,.09), no shadow (lift shadow on selected state only).
    darkBg: "#0C1428"    # Flat navy ground; cards = dark glass.
  dark:
    bg: "#0C1428"        # Flat navy. (nightsky texture retired from UI backgrounds in v5.0)
    surface: "rgba(10,18,40,.42)" # Dark glass + blur(14px) + 1px rgba(255,255,255,.16) — never opaque black slabs on Nightsky.
    surfaceFallback: "#141414"    # Only on flat-black fallback ground.
    border: "rgba(255,255,255,.16)"
    text: "#F5F5F5"
    primary: "#1E8CFF"   # Elevated blue — #006BFF sinks on dark.
    blueFill: "#1E8CFF"  # Ground for buttons on dark…
    onBlueFill: "#08122B" # …with deep navy text (5.6:1). White on #1E8CFF is 3.3:1.
    blueText: "#4DA3FF"
    negative: "#FF4D6D"
typography:
  numeric:  { fontFamily: Poppins, weight: 800, feature: tabular-nums }
  displayEn:{ fontFamily: Poppins, weight: 800, letterSpacing: 0.01em }
  headingJp:{ fontFamily: "Noto Sans JP", weight: 900 }
  body:     { fontFamily: "Noto Sans JP", weight: 400, size: 15px, lineHeight: 1.85 }
  kicker:   { fontFamily: Poppins, weight: 700, size: 10px, letterSpacing: 0.2em, transform: uppercase }
  minSize:  # At default (100%) scale. MUST track OS text scaling (Dynamic Type / sp / rem) up to 200%.
    phone:  { body: 15px, caption: 12px, absolute: 11px }   # 9.5px tab labels only with icons.
    tablet: { body: 15px, caption: 12px, absolute: 11px }
    desktop:{ body: 15px, caption: 12px, absolute: 11px }   # 10px uppercase kickers desktop-only.
  scaling: { web: rem, ios: dynamic-type, android: sp, layoutMustSurvive: 200% }
a11y:                    # v5.3 — verified on SORAH App v0.7 with an automated audit (contrast / size / tap).
  contrast:  { bodyText: 4.5, largeText: 3.0, note: "Large = >=24px, or >=18.66px bold." }
  textColor: { blueOnLight: "#05396B", blueOnDark: "#4DA3FF", lastUsableGray: ink3 }
  buttonFill:{ light: "#0060E6", lightLabel: "#FFFFFF", dark: "#1E8CFF", darkLabel: "#08122B" }
  tapTarget: { min: 44, unit: pt, inlineLinkException: 24 }
  motion:    { respectReducedMotion: true, autoplayStartsStopped: true }
  decoration:{ svg: 'aria-hidden="true" focusable="false"', focusRing: "3px, 2px offset" }
dataViz:                 # v5.1 — two registers. Decide the register first, then obey the shared laws.
  registers:
    product:   { ground: mode, numerals: "Poppins 800 tabular", accent: "#006BFF", negative: "#DA003C", numbersFirst: true }
    editorial: { ground: "#FFFFFF", roman: Gotham, palette: "paper ink/gray + ONE data scale", numbersInBody: true, alsoObeys: "SEE editorial principles" }
  decide: "Seen inside a screen the reader is operating -> product. Received on its own -> editorial. Figures inside articles are editorial."
  laws:
    - one figure, one message
    - colour encodes hierarchy, never decorates
    - label directly; a legend is the fallback
    - a number without a reference means nothing
    - the annotation layer is the figure
    - never distort the comparison (bars from zero, no dual axis, no truncation, no 3D)
    - nothing important behind hover or tap
    - draw the uncertainty (provisional, missing, observation date)
    - must survive greyscale and red-green deficiency
  forms:
    line: continuous          # max 3 series
    bar: discrete-comparison  # zero baseline, meaningful order
    stripe: one-dimensional-time
    area: composition
    dot: distribution
    hex: density              # never finer than the source raster
    map: "only when location itself is the finding"
    pie: not-used
  scales:
    diverging: { use: "signed anomaly only", mid: white }
    sequential: { use: "quantity / density / depth", ramp: "white -> ink or #05396B" }
    categorical: not-used
  brandColourInData:
    "#00BFFF": never          # brand only
    "#006BFF": "one emphasised series (product register)"
    "#05396B": "second series or deep end of a sequential ramp"
    "#DA003C": "negative change only"
    rainbow: never
  numerals: { tabular: true, grouping: true, unitTight: true, significantDigitsOnly: true, translateLargeNumbers: true }
  forbidden: [ shadow, gradient-fill, 3d, dual-axis, truncated-axis, area-encoded-circles, decorative-icons, floating-small-plot ]
  scenes:                # v5.2 — full-screen single-subject figures (Data Scape). From SORAH App 2024 (AD).
    types:
      timeseries: { subjects: [arctic-ice, climate-stripes], start: autoplay, stop: tap-chart, then: "slider snaps per year", readout: "axis value | measured value + sparkline" }
      globe:      { subjects: [forest, river], start: autorotate, stop: tap-globe, then: drag-rotate, switch: "2-state segmented button, same hue light/deep", readout: "rate | quantity" }
    chrome: { title: fixed-top-ellipsis, close: x-top-right, tools: [related-article, information], tutorial: "first open only, fade 2s" }
    layout: { portrait: "stack, centered vertically", landscape: "visual left, readout right" }
    palettes:            # content colour — never leaks outside the scene
      arcticIce: { bg: "#16223C", ice: "#7ACAFD" }
      forest:    { bg: "#FBFBFB", fg: "#008102" }
      river:     { bg: "#FFFFFF", fg: "#006AAD" }
      stripes:   { cold: "#074D92", mid: "#FFFFFF", warm: "#F3241C" }
    readoutAlwaysVisible: true
    sourceAndDateRequired: true
copy:                    # v5.1 — two registers; see section 08.
  registers:
    ui:        { form: 敬体, voice: "capable, brief, never blaming", numbersFirst: true }
    editorial: { form: 常体, voice: "observational, pared down", person: "first person plural, named sparingly", numbersInBody: true }
  headline:  { maxJaChars: 17, mustHave: [subject, comparison], mustNotHave: [conclusive-number, jargon] }
  mixedScript: { digitRunTight: true, latinWordRunQuarterSpace: true, idempotent: true }
  kanaOpening: { verbStems: kanji, auxiliaries: kana, formalNouns: kana }
  checks: [ "can the reader re-explain it", "does the figure alone signal something is off", "is the reference stated" ]
  banned: [ 革新的, 革命的, イノベーション, "世界をより良くする(単独)", 届ける濫用, 提供する濫用, 絵文字, 専門略号, Creative Platform ]
  stateCopy:             # v5.2 — state name (2–3 words) -> one sentence of action + place -> recovery. From SORAH App 2024.
    pattern: [ stateName, actionAndPlace, recovery ]
    en: { ready: "Ready to Scan", empty: "Add to Your Collection", error: "Scan error", success: "Register success", confirm: "Register your Product" }
    ja: { ready: "スキャンできます", empty: "コレクションに追加", error: "読み取れませんでした", success: "登録しました", confirm: "この製品を登録" }
    rules: [ "never use the word エラー as a state name", "success gets Close only — no celebration", "error carries two recoveries: retry + help" ]
rounded:                 # Concentric scale — nesting must stay concentric (30 > 22 > 14).
  s: 14px                # Inputs, small chips-in-cards.
  m: 22px                # Cards, lists, sheets' rows, bubbles.
  l: 30px                # Screens, sheets, hero surfaces.
  capsule: 999px         # Every button, bar, chip, HUD.
glass:                   # Liquid-Glass material — floating control layer only.
  light: { background: "rgba(255,255,255,.55)", blur: 18px, saturate: 1.6,
           border: "1px rgba(255,255,255,.65)", highlight: "inset 0 1px 0 rgba(255,255,255,.7)" }
  tinted: { background: "rgba(0,107,255,.9)" }   # Primary actions.
  shadow: "0 6px 18px rgba(5,57,107,.14)"        # Soft float — glass layer only, never on paper.
spacing: [8px, 12px, 16px, 24px, 40px, 64px]   # 4px grid.
motion:
  tap: { duration: 120ms, easing: ease }
  appear: { duration: 260ms, easing: ease }
  spring: { duration: 350ms, easing: "cubic-bezier(.34,1.56,.64,1)" }  # Expressive layer only.
  splashPulse: { duration: 1.7s, effect: "scale 1 -> 1.06", loop: ease-in-out } # Mark on splash; min 1.1s then fade .55s.
  hudPulse: { duration: 1.2s }            # Loading HUD (glass squircle + mark).
  pullToRefresh: mark rotates and descends with pull; refresh past threshold.
  scanPulse: { discs: 3, fill: "#66B4E7 @ 10% stacked", sizes: "1.45x / 1.86x / 2.34x of mark", hairlines: "3.24x / 6.55x, 1px #6BBDEB", duration: 2.6s, stagger: 0.85s, easing: ease-out, scale: "1 -> 2.6", opacity: ".28 -> 0", stopWhen: "OS NFC sheet appears" } # v5.2 — measured from App 2024 p.5
  sceneAutoplay: { start: auto, stop: tap, resume: never-automatic }     # v5.2
  tutorial: { fadeIn: .3s, hold: 2s, fadeOut: .3s, firstOpenOnly: true } # v5.2
texture:                 # Sky family — graded from sorah.io hero sky (hero-cloud), abstract + film grain.
  morninglight: sky-morning.jpg # Morning review / day start / goal setting.
  daylight: sky-day.jpg      # Default light scenes, heroes, nav backdrops.
  twilight: sky-twilight.jpg # Achievement / celebration / onboarding moments.
  nightsky: sky-night.jpg    # Dark mode background and night-time data scenes.
  rule: v5.0 — artwork only (app icons, key visuals, Sky Type, print). NEVER a UI screen background.
  skyType: display/H1 only — clip a sky texture into bold type (background-clip:text).
iconography:            # Two-plane glassmorphism icons — no line icons.
  planes: [ "{colors.frost} main shape", "{colors.primary} meaningful core only" ]
  meaning: solid marks the semantic core (door, hands, typing dots, badge, lens, head).
  forbidden: decorative circles or accents with no meaning.
  overlap: solid passing behind frost is blurred (2.4 @48px); crisp solid details on top.
  grid: 48px, concentric radii; tab-bar size 23px; on tinted tabs invert to white.
copy:
  nutrients: use Japanese words (たんぱく質・脂質・炭水化物), never P/F/C abbreviations.
  keyNumbers: primary figures (kcal etc.) go full-width at the top of result cards.
components:
  buttonPrimary: { material: "{glass.tinted}", textColor: "#FFFFFF", minHeight: 44px, radius: "{rounded.capsule}" }
  buttonSecondary: { material: "{glass.light}", textColor: "{colors.primaryDeep}", radius: "{rounded.capsule}" }
  buttonDanger:  { backgroundColor: "rgba(218,0,60,.92)", textColor: "#FFFFFF", radius: "{rounded.capsule}" }
  card:          { backgroundColor: "{colors.paper}", border: "1px {colors.rule}", radius: "{rounded.m}", shadow: none }
  statHero:      { background: "linear-gradient(130deg,#05396B -10%,#006BFF 55%,#00BFFF 130%)", textColor: "#FFFFFF", radius: "{rounded.m}", typography: "{typography.numeric}" }
  listGroup:     { backgroundColor: "{colors.paper}", radius: "{rounded.m}", separator: "1px {colors.rule} inset-left 16px" }
  tabBar:        { layout: split-pills, main: "capsule, max 4 tabs, selected = white pill + lift shadow", ai: "detached 66px circle, tinted blue, badge dot", placement: floating-near-bottom, content-scrolls-under: true }
  appHeader:     { content: centered-wordmark-only, border: none, meta: none, mark-usage: "splash & loading only" }
  refresh:       pull-to-refresh (no header button)
  keyboard:      hide tab bar while keyboard is open; composer hugs the keyboard
  sheet:         { material: "{glass.light}", radius: "{rounded.l} {rounded.l} 0 0", grabber: required }
  composer:      { material: "{glass.light}", radius: "{rounded.capsule}" }
  # v5.2 — from SORAH App 2024 (AD)
  coachSheet:    { use: "empty state of a possession", material: paper, radius: "{rounded.l} {rounded.l} 0 0", grabber: required, parts: [ headline-what-you-get, action-and-place, thumbnail-plus ] }
  modalConfirm:  { radius: "{rounded.l}", parts: [ title, sentence, photo, name, description, "primary+secondary stacked full-width" ], scrim: true, maxPerScreen: 1 }
  resultCard:    { parts: [ circle-icon, state-name, one-sentence, one-action ], success: "Close only", error: "retry + help link" }
  readoutPair:   { label: "9–10px uppercase kicker", value: "{typography.numeric} 28–32px", unit: "1/3 size", divider: "1px vertical rule", below: "sparkline + slider snapping to axis unit" }
  articleHeader: { order: [ hero-image-full-bleed, date-blue, headline, byline-blue, tags, rule, lede-bold ], blueOnly: [ date, byline ] }
  authStack:     { order: [ apple, google, email-signup, login ], socialButtons: vendor-spec-unchanged, verify: "shield + one sentence", crossLink: "Sign up <-> Log in as text link" }
  settingsList:  { style: inset-grouped-chevron, order: [ user, language, help, about, legal, licence ], logout: "red text row, last", deleteAccount: "text link at bottom of user settings + confirm" }
  actionBlue:    { token: "{colors.primary}", note: "App 2024 used ≈#426ABC; normalised to #006BFF. Bright VI blue = brand moments, deep blue = tappable." }
---

## Overview
SORAH inc. — "Shifting perceptions for a better world".
Typography-led, content-first, Liquid-Glass component language.
Two layers: PAPER (content — opaque white, hairline rules, concentric radii,
no shadows) and GLASS (controls — translucent capsules floating above content
with blur and soft shadows). Glass sits over the sky-texture family
(Daylight / Twilight / Nightsky) at brand moments — at most once per screen.

## Colors
White : blue : others = 90 : 7 : 3. Good change = primary blue, bad change =
negative red, across every product. #006BFF on white is 4.0:1 — never use it
for body text under 18px (use #05396B). VI blue #00BFFF is brand-only.

## Typography
Numbers are always Poppins 800 tabular with small units in ink3.
Japanese text is Noto Sans JP; mixed runs follow Noto.

## Layout
4px grid. Content max 760px (app) / 1060px (docs). Separate with 1px rules
and whitespace, never shadows.

## Elevation & Depth
Paper layer: no shadows — depth via luminance steps + hairline borders.
Glass layer: translucent material (blur 18px, saturate 1.6, hairline,
top highlight) with a soft float shadow. Never nest glass inside glass.
Readable content never sits on glass — glass carries controls and labels only.

## Shapes
Concentric radius scale 14/22/30px, capsules for every control.
Nested corners stay concentric with their container and the device screen.
Right angles survive only in corporate-site and document design.

## Components
One primary button and one hero stat per screen. Missing data renders an
ink4 em-dash, never zero. Lists are inset-grouped rounded cards.
Tab bar floats detached from the screen edge; sheets are glass with a grabber.
Possession-type empty states use a paper coaching sheet (what / how / where).
Confirmations show the photo; results are circle-icon + state + one action.
AI/conversational: user = blue bubble right, AI = tint2 bubble left,
composer = glass capsule.

## Scenes (Data Scape)
Full-screen single-subject figures: timeseries (autoplay, tap to stop, slider
snaps per year, "axis | value" readout) or globe (autorotate, tap to stop,
2-state switch in one hue). Subject colour fills the scene and never leaks
into chrome. Source + observation date live behind the (i) button.

## Do's and Don'ts
Do: sign every delta (+/−) beside its color. Respect prefers-reduced-motion.
Don't: decorative dividers under headings — separate with whitespace or a 1px rule only.
Don't: gradients/shadows on the static skeleton, red as decoration,
new colors without revising this file.