/* ============================================================
ミライトラボ — Colors & Type
Base tokens + semantic tokens for design system usage.
Import this into any HTML artifact to get brand-correct output.
============================================================ */
/* ---------- Webfonts ----------
OFFICIAL (from ブランドスタイルガイド.pdf):
- Japanese body: 秀英丸ゴシック (Shuei Maru Gothic) — paid Morisawa font
- English: Avenir (今後はAvenirに統一予定)
- Canva 長文・小字: セザンヌ (Cezanne) — paid Fontworks
- Canva 強調: つなぎゴシック (Tsunagi Gothic) — 縦書き不可·SPのみ
- Canva 英数字: lazydog
⚠ Fallback stack: Shuei-Maru-Gothic / Cezanne / Tsunagi / lazydog are NOT
web-distributable without a license. For prototypes, we substitute
Google Fonts nearest-matches (flagged throughout) — swap in real .ttf/.woff
in the fonts/ folder when licensing is arranged.
・ 秀英丸ゴシック → Zen Maru Gothic (closest free JP rounded gothic)
・ Avenir → Nunito (geometric sans w/ similar proportions)
・ セザンヌ → Shippori Mincho (dense serif, similar mood)
・ つなぎゴシック → Zen Kaku Gothic New
・ lazydog → Caveat (handwritten latin)
*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&family=Nunito:wght@400;500;700;800&family=Shippori+Mincho:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Caveat:wght@400;700&display=swap');
:root {
/* ========== BRAND (from official style guide) ========== */
--mirait-green: #3F9877; /* 翾翠色 ミドリ色 · 基本 */
--mirait-pink: #C85179; /* 中紅 ピンク · 補色·遺移ボタン・アクセント */
--charcoal: #545455; /* チャコール */
--grey-warm-dark: #D1C6B8; /* グレー色 濃いめ */
--greige: #E6E5DA; /* グレージュ · グレー色 */
--note-bg: #EDEEEE; /* ミライトnote 背景 */
/* Derived green scale (tints of the brand green). */
--mirait-green-600: #2E7C5D; /* hover / pressed */
--mirait-green-400: #6DAE95;
--mirait-green-200: #B6D6C8;
--mirait-green-100: #DCEBE3;
--mirait-green-50: #E4F2ED; /* Instagram 薄いグリーン (official) */
/* Derived pink scale (tints of 中紅). */
--mirait-pink-600: #A8395F;
--mirait-pink-400: #D98BA3;
--mirait-pink-200: #ECBECD;
--mirait-pink-100: #F5DCE4;
/* ========== INSTAGRAM FIGURE COLORS (official) ==========
Used in 図解 / 説明 diagrams. Each pair is dark-on-text, light-on-bg. */
--insta-blue: #0356A6;
--insta-blue-bg: #DCE8F4;
--insta-red: #BB171B;
--insta-red-bg: #F7E1E1;
--insta-orange: #E68A3F;
--insta-orange-bg: #FCF2EA;
--insta-green-bg: #E4F2ED; /* text stays 翾翠色 #3F9877 */
/* ========== NEUTRALS ==========
Paper is a slightly warmer neutral derived from the greige/note-bg family,
keeping the warm paper feel while matching the style guide. */
--paper: #F6F5EF; /* default page bg (sits between greige & note-bg) */
--paper-2: var(--greige);
--note: var(--note-bg);
--ink: var(--charcoal);
--ink-2: #6F6F70;
--ink-3: #8E8B83;
--ink-4: var(--grey-warm-dark);
--hairline: #D8D3C5;
--white: #FFFFFF;
/* ========== SEMANTIC ========== */
--fg-1: var(--ink);
--fg-2: var(--ink-2);
--fg-3: var(--ink-3);
--fg-on-green: #F6F5EF;
--fg-on-pink: #FFFFFF;
--fg-on-accent: var(--ink);
--bg-1: var(--paper);
--bg-2: var(--paper-2);
--bg-inverted: var(--mirait-green);
--bg-card: var(--white);
--border-default: var(--hairline);
--border-strong: var(--ink-4);
--border-brand: var(--mirait-green-200);
--link: var(--mirait-green-600);
--link-hover: var(--mirait-green);
/* Status — using official Instagram figure colors for warning/danger/info
so everything in the system is documented, not invented. */
--success: var(--mirait-green);
--warning: var(--insta-orange);
--danger: var(--insta-red);
--info: var(--insta-blue);
/* ========== RADII ==========
Everything is generously rounded. Nothing sharp — matches the mL mark. */
--radius-xs: 6px;
--radius-sm: 10px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--radius-pill: 999px;
--radius-blob: 42% 58% 54% 46% / 46% 42% 58% 54%; /* organic blob */
/* ========== SHADOWS ==========
Soft, warm, diffuse — like paper on paper. No hard drop shadows. */
--shadow-xs: 0 1px 2px rgba(84, 84, 85, 0.06);
--shadow-sm: 0 2px 6px rgba(84, 84, 85, 0.08), 0 1px 2px rgba(84, 84, 85, 0.05);
--shadow-md: 0 6px 18px rgba(84, 84, 85, 0.10), 0 2px 4px rgba(84, 84, 85, 0.05);
--shadow-lg: 0 18px 42px rgba(84, 84, 85, 0.14), 0 4px 8px rgba(84, 84, 85, 0.06);
--shadow-sticker: 0 4px 0 rgba(84, 84, 85, 0.10), 0 10px 20px rgba(84, 84, 85, 0.12);
--shadow-inset: inset 0 2px 4px rgba(84, 84, 85, 0.08);
/* ========== SPACING ========== */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
/* ========== MOTION ========== */
--ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); /* main UI easing */
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful pops */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 120ms;
--dur-base: 220ms;
--dur-slow: 420ms;
--dur-hero: 720ms;
/* ========== TYPE FAMILIES ==========
OFFICIAL: 秀英丸ゴシック (JP body) + Avenir (English).
Canva: セザンヌ (長文), つなぎゴシック (強調), lazydog (英数字).
Substituted here with Google Fonts equivalents — see @import note. */
--font-display: '秀英丸ゴ StdN', 'Shuei Maru Gothic', 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', system-ui, sans-serif;
--font-body: '秀英丸ゴ StdN', 'Shuei Maru Gothic', 'Zen Maru Gothic', 'Hiragino Sans', 'Yu Gothic', system-ui, sans-serif;
--font-latin: 'Avenir', 'Avenir Next', 'Nunito', 'Hiragino Sans', system-ui, sans-serif;
--font-serif-jp: 'セザンヌ', 'Cezanne', 'Shippori Mincho', 'Hiragino Mincho ProN', serif; /* Canva 長文 */
--font-ui: 'つなぎゴシック', 'Tsunagi Gothic', 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif; /* Canva 強調 */
--font-hand: 'lazydog', 'Caveat', 'Yomogi', cursive; /* Canva 英数字 */
--font-numeric: 'Avenir', 'Nunito', 'Zen Maru Gothic', sans-serif;
/* ========== TYPE SCALE ==========
Tuned for JP; line-heights are larger than Latin norms because
kana/kanji need breathing room. */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-md: 18px;
--text-lg: 20px;
--text-xl: 24px;
--text-2xl: 30px;
--text-3xl: 38px;
--text-4xl: 48px;
--text-5xl: 64px;
--text-6xl: 84px;
--leading-tight: 1.2;
--leading-snug: 1.4;
--leading-normal: 1.7; /* JP body — generous */
--leading-loose: 1.9;
--tracking-tight: -0.01em;
--tracking-normal: 0;
--tracking-wide: 0.06em;
--tracking-kids: 0.02em; /* slight open feel for children */
}
/* ============================================================
SEMANTIC ELEMENT DEFAULTS
Use these as the baseline; override per component as needed.
============================================================ */
.ml-root,
.ml-root * { -webkit-font-smoothing: antialiased; }
.ml-root {
font-family: var(--font-body);
color: var(--fg-1);
background: var(--bg-1);
font-size: var(--text-base);
line-height: var(--leading-normal);
letter-spacing: var(--tracking-kids);
}
.ml-h1, h1.ml {
font-family: var(--font-display);
font-weight: 900;
font-size: var(--text-5xl);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
color: var(--fg-1);
text-wrap: pretty;
}
.ml-h2, h2.ml {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-3xl);
line-height: 1.3;
letter-spacing: var(--tracking-tight);
}
.ml-h3, h3.ml {
font-family: var(--font-display);
font-weight: 700;
font-size: var(--text-xl);
line-height: 1.4;
}
.ml-h4, h4.ml {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--text-md);
line-height: 1.5;
}
.ml-eyebrow {
font-family: var(--font-ui);
font-weight: 700;
font-size: var(--text-sm);
letter-spacing: var(--tracking-wide);
text-transform: none; /* JP does not use case; we rely on tracking */
color: var(--mirait-green-600);
}
.ml-body { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg-1); }
.ml-lead { font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--fg-2); }
.ml-small { font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--fg-3); }
.ml-meta { font-size: var(--text-xs); line-height: var(--leading-snug); color: var(--fg-3); letter-spacing: var(--tracking-wide); }
.ml-hand {
font-family: var(--font-hand);
font-weight: 400;
color: var(--mirait-green-600);
}
.ml-num {
font-family: var(--font-numeric);
font-variant-numeric: tabular-nums;
font-weight: 700;
}
.ml-link {
color: var(--link);
text-decoration: underline;
text-decoration-thickness: 2px;
text-decoration-color: var(--mirait-green-200);
text-underline-offset: 3px;
transition: color var(--dur-fast) var(--ease-out-soft),
text-decoration-color var(--dur-fast) var(--ease-out-soft);
}
.ml-link:hover {
color: var(--link-hover);
text-decoration-color: var(--mirait-green);
}
/* ============================================================
DECORATIVE UTILITIES — used throughout the brand
============================================================ */
/* Paper texture — subtle grain, never dominant */
.ml-paper {
background-color: var(--paper);
background-image:
radial-gradient(circle at 20% 30%, rgba(184, 174, 164, 0.08) 0, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(184, 174, 164, 0.06) 0, transparent 40%);
}
/* Dotted grid — subtle notebook feel */
.ml-dots {
background-color: var(--paper);
background-image: radial-gradient(circle, var(--hairline) 1.2px, transparent 1.2px);
background-size: 20px 20px;
}
/* Hand-drawn underline accent (uses pink for more pop now that it's brand) */
.ml-marker {
background: linear-gradient(180deg, transparent 62%, var(--mirait-pink-100) 62%, var(--mirait-pink-100) 92%, transparent 92%);
padding: 0 4px;
}
/* Sticker — raised rounded pill with soft offset shadow */
.ml-sticker {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--white);
border-radius: var(--radius-pill);
box-shadow: var(--shadow-sticker);
font-family: var(--font-display);
font-weight: 700;
}
/* ============================================================
PHOTOGRAPHY — warm tint, grain, placeholder
Photography leads the brand. Use these utilities on every
![]()
or photo slot. Placeholder is only until real shots land.
============================================================ */
:root {
/* Warm photo overlay — very subtle green→orange wash */
--photo-tint: linear-gradient(180deg, rgba(63,152,119,0) 0%, rgba(84,84,85,0.08) 60%, rgba(84,84,85,0.22) 100%),
linear-gradient(0deg, rgba(230,138,63,0.06), rgba(230,138,63,0.06));
--photo-tint-text-over: linear-gradient(180deg, rgba(42,42,43,0) 35%, rgba(42,42,43,0.55) 100%);
--photo-radius: var(--radius-lg);
}
.ml-photo {
position: relative;
overflow: hidden;
border-radius: var(--photo-radius);
background: var(--greige);
box-shadow: var(--shadow-sm);
isolation: isolate;
}
.ml-photo > img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* Warm tint overlay */
.ml-photo.is-warm::after {
content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: var(--photo-tint);
mix-blend-mode: multiply;
}
/* Dark-to-bottom gradient for text laid over photography */
.ml-photo.is-text-over::after {
background: var(--photo-tint-text-over);
}
/* Film-grain pass */
.ml-photo.is-grain::before {
content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
opacity: 0.12; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* Placeholder mode — use ONLY until real photography is dropped in. */
.ml-photo.is-placeholder {
background:
linear-gradient(135deg, var(--mirait-green-100) 0%, var(--greige) 50%, var(--insta-orange-bg) 100%);
display: flex; align-items: center; justify-content: center;
}