/* ============================================================ Junbi 準備 — Colors & Type Source: Figma "Junbi 準備 — Design System" (April 2026) 31 design tokens total: 10 colors × theme + 9 type + 7 spacing + 3 radius + 2 borders ============================================================ */ /* ---- Webfont stacks ---------------------------------------- Junbi ships SF Pro on device. For web, we mirror that with `-apple-system` first, then load Inter (closest cross-platform match used in Figma alongside SF) and Noto Sans JP (Japanese). Display logo wordmark uses Judson — a humanist serif close to the hand-set "junbi" wordmark in the Figma logo page. --------------------------------------------------------- */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;700&display=swap"); :root { /* ── Junbi theme — default ─────────────────────────── */ /* Theme tokens (10 swap on theme change) */ --primary: #991600; /* CTAs, links, brand red — sumi-stamp red */ --primary-press: #7a1100; /* derived: pressed/hover primary */ --background: #F7F6F2; /* screen bg — warm paper */ --surface: #FFFFFF; /* cards, inputs */ --textPrimary: #000000; /* headlines, scores */ --textSecondary: #A38B71; /* labels, subtitles, headers */ --textOnPrimary: var(--background); /* derived */ --border: #EDE8E1; /* card/input borders, separators, in-progress, inactive tab */ --highlight: #E6D8D6; /* selected answer fill, declining badge bg */ --positive: #586852; /* positive badge text+border, avatar */ --positiveSubtle: #DDE3DA; /* positive badge fill */ /* Theme-independent */ --stampPass: var(--primary); /* derived: stampPass = primary */ --stampFail: #9C9890; /* 不合格 grey, theme-independent */ --error: #C4432B; /* error states */ /* Aliases (kept for back-compat — same as textSecondary) */ --textTertiary: var(--textSecondary); --shadow: rgba(0,0,0,0.04); /* ── Type ──────────────────────────────────────────── */ --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Inter", system-ui, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Inter", system-ui, sans-serif; --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", -apple-system, sans-serif; /* 9 type styles — 6 sizes × 2 weights (Regular 400 / Bold 700) */ /* 9 type styles — content-architecture scale */ --t-h1-size: 22px; --t-h1-weight: 700; /* page-level scores, hero numbers */ --t-h2-size: 22px; --t-h2-weight: 400; /* question prompts, large reading copy */ --t-h3-size: 16px; --t-h3-weight: 700; /* section scores, sub-headers */ --t-subtitle-size: 14px; --t-subtitle-weight: 700; /* card titles, CTAs */ --t-body-size: 14px; --t-body-weight: 400; /* default body */ --t-labelBold-size: 13px; --t-labelBold-weight: 700; /* tab labels, eyebrow headers */ --t-label-size: 13px; --t-label-weight: 400; /* labels, subtitles, helper */ --t-caption-size: 11px; --t-caption-weight: 700; /* badges, pill text */ --t-overline-size: 11px; --t-overline-weight: 400; /* meta, micro copy */ /* ── Spacing — 5-step generic scale ────────────────── */ --space-xs: 4px; /* tight: label → value */ --space-sm: 8px; /* between cards, answer tiles */ --space-md: 16px; /* default: screen padding, card padding, content gap */ --space-lg: 24px; /* between major sections */ --space-xl: 32px; /* hero spacing, very large gaps */ /* Aliases (back-compat with prior role-named tokens) */ --sp-screenPadding: var(--space-md); --sp-cardPadding: var(--space-md); --sp-cardGap: var(--space-sm); --sp-sectionGap: var(--space-lg); --sp-contentGap: var(--space-md); --sp-labelGap: var(--space-xs); --sp-answerGap: var(--space-sm); /* ── Radius (continuous / squircle) ────────────────── */ --r-card: 12px; /* cards, modals */ --r-button: 9999px; /* all buttons — fully rounded */ --r-compact: 9999px; /* alias — back-compat */ --r-pill: 9999px; /* badges, pills, number circles */ --r-handle: 3px; /* bottom-sheet handle */ /* ── Border widths ─────────────────────────────────── */ --bw-1: 1px; /* cards, inputs, badges, options, separators, tab bar */ --bw-2: 2px; /* secondary outline button, active tab underline */ /* ── Component sizes ───────────────────────────────── */ --h-cta: 48px; /* primary CTA height — full-width */ --h-compact: 40px; /* compact button */ --sz-avatar: 48px; /* profile circle */ --sz-stampInline: 42px; --sz-stampHero: 59px; --sz-numCircle: 24px; /* answer number circle */ --sz-tabIcon: 24px; --h-tabBar: 89px; /* incl. 34px safe area */ } /* ============================================================ Sakura theme (locked, unlock by completing a drill) ------------------------------------------------------------ Approximated from /Settings/History – swatches: rose+crimson ============================================================ */ [data-theme="sakura"] { --primary: #BD191D; --primary-press: #95141a; --background: #FFF7F7; --surface: #FFFFFF; --textPrimary: #1B0A0A; --textSecondary: #B07A78; --border: #F4DDDD; --highlight: #FFE3E0; --positive: #586852; --positiveSubtle: #DDE3DA; } /* ============================================================ Cyber theme (locked, unlock by completing an exam) ============================================================ */ [data-theme="cyber"] { --primary: #FF00B3; --primary-press: #c9008e; --background: #F1F0EE; --surface: #FFFFFF; --textPrimary: #0B0B12; --textSecondary: #6E6B72; --border: #E2E1DE; --highlight: #EAD7F3; --positive: #3C3E65; --positiveSubtle: #DDE0F1; } /* ============================================================ Semantic helpers ============================================================ */ body { margin: 0; font-family: var(--font-system); background: var(--background); color: var(--textPrimary); font-size: var(--t-body-size); font-weight: var(--t-body-weight); line-height: 1.4; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .t-heroScore { font-size: var(--t-heroScore-size); font-weight: var(--t-heroScore-weight); line-height:100%; } .t-questionSentence { font-size: var(--t-questionSentence-size); font-weight: var(--t-questionSentence-weight); line-height:140%; } .t-sectionScore { font-size: var(--t-sectionScore-size); font-weight: var(--t-sectionScore-weight); line-height:100%; } .t-cardTitle { font-size: var(--t-cardTitle-size); font-weight: var(--t-cardTitle-weight); line-height:120%; } .t-body { font-size: var(--t-body-size); font-weight: var(--t-body-weight); line-height:140%; } .t-sectionHeader { font-size: var(--t-sectionHeader-size); font-weight: var(--t-sectionHeader-weight); line-height:120%; } .t-caption { font-size: var(--t-caption-size); font-weight: var(--t-caption-weight); line-height:130%; color: var(--textSecondary); } .t-badge { font-size: var(--t-badge-size); font-weight: var(--t-badge-weight); line-height:100%; letter-spacing:0.01em; } .t-mini { font-size: var(--t-mini-size); font-weight: var(--t-mini-weight); line-height:120%; color: var(--textSecondary); } /* Section titles inside the Figma design-system frame are 24/700 red */ .t-sectionTitle { font-size: 24px; font-weight: 700; line-height: 100%; color: var(--primary); } /* Wordmark — Judson serif, the "junbi" lettering on the brand page */ .t-wordmark { font-family: var(--font-display); font-weight: 400; font-size: 84px; line-height: 0.9; color: var(--primary); letter-spacing: -0.01em; }