/* ============================================================= Shwat Design System — Colors & Typography Tokens シュワット株式会社 提案資料 デザインシステム ============================================================= */ /* ---- Web font imports (fallbacks for preview / HTML artifacts) ---- Production PPTX embeds Noto Sans JP + Lato via PowerPoint. Web previews use Google Fonts. */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Noto+Sans+JP:wght@400;500;700;900&display=swap'); :root { /* ============================================================ 1. BRAND COLORS — Teal system (main) ============================================================ */ --brand-primary: #03A8A8; /* 最頻出・メインアクセント (深ティール) */ --brand-primary-dark: #00A6AC; /* ロゴS字・濃い強調 (濃ティール) */ --brand-primary-light: #00C7B0; /* グラデ上部・数字強調 (明ティール) */ /* ============================================================ 2. TEXT & BASE ============================================================ */ --text-primary: #545454; /* 基本テキスト */ --text-deep: #1B1B2B; /* まれに強調で使用する濃黒 */ --text-muted: #808080; /* 軸ラベル・補助注記 (primary を薄く扱う時) */ --base-white: #FFFFFF; /* ============================================================ 3. ACCENT — Red-orange (注目の旗印) ============================================================ */ --accent-red: #FF4A33; /* 強調赤 (注目数字「98%」など) */ --accent-coral: #FF7060; /* サブコーラル (ラベル・サブ強調) */ --accent-warning: #FF4646; /* 警告赤 */ --accent-gold: #FFB21E; /* 料金プラン Lite */ --accent-orange: #FF751D; /* 料金プラン Standard */ /* ============================================================ 4. SURFACES — 淡色 (あしらい・背景ボックス) ============================================================ */ --surface-teal-light: #ECFBFA; /* 薄ティール (テキスト囲み枠背景) */ --surface-teal-pale: #F1F8F8; /* 極薄ティール (注釈ボックス背景) */ --surface-coral-light:#FFF1EE; /* 薄サーモン (警告・注目の囲み) */ --surface-gold-light: #FFF8E6; /* 料金 Lite カード背景 */ --surface-premium: #FFEBE6; /* 料金 Premium カード背景 */ /* ============================================================ 5. LINES / DIVIDERS ============================================================ */ --line-soft: #E6E6E6; /* グリッド線 */ --line-medium: #CCCCCC; /* テーブルボーダー・ドットリーダー */ /* ============================================================ 6. TYPOGRAPHY — Font stacks ============================================================ */ --font-jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; --font-en: "Lato", "Helvetica Neue", Arial, sans-serif; /* ---- Weights ---- */ --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; --weight-heavy: 900; /* ============================================================ 7. TYPE SCALE (20×11.25inch スライド基準, px換算) 1 inch ≈ 96px, 1pt ≈ 1.333px 参考値として CSS でも使えるサイズを定義 ============================================================ */ --fs-cover-main: 84pt; /* 表紙メイン見出し */ --fs-cover-sub: 40pt; /* 表紙サブコピー */ --fs-section: 68pt; /* セクション区切り見出し */ --fs-slide-title: 38pt; /* スライドタイトル */ --fs-h2: 30pt; /* 小見出し */ --fs-h3: 24pt; /* サブ見出し */ --fs-body: 20pt; /* 本文 */ --fs-caption: 15pt; /* キャプション・注記 */ --fs-en-label: 32pt; /* 英語見出し (章ラベル) */ --fs-stat-hero: 180pt; /* 数字強調 (「98%」など) */ /* ============================================================ 8. SPACING (inch → rem 両対応) スライドは inch 設計、Web プレビューは rem ============================================================ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* Slide margins (inch) */ --slide-margin-x: 0.8in; --slide-content-top: 1.3in; --slide-block-gap: 0.5in; /* ============================================================ 9. RADII — 控えめ。硬質で信頼感のある造形 ============================================================ */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 9999px; /* ============================================================ 10. ELEVATION — ごく控えめの影。基本はフラット ============================================================ */ --shadow-none: none; --shadow-card: 0 2px 8px rgba(3, 168, 168, 0.08); --shadow-lift: 0 8px 24px rgba(27, 27, 43, 0.10); /* ============================================================ 11. LINE HEIGHT / LETTER SPACING ============================================================ */ --lh-tight: 1.25; /* 見出し 1.2〜1.3 */ --lh-body: 1.7; /* 本文 1.6〜1.8 */ --ls-title: 0.03em; /* 日本語タイトル字間 +20〜40 相当 */ } /* ============================================================= Semantic helpers — so HTML previews can reference consistently ============================================================= */ html, body { font-family: var(--font-jp); color: var(--text-primary); background: var(--base-white); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, .h1, .slide-title { font-family: var(--font-jp); font-weight: var(--weight-heavy); color: var(--text-primary); line-height: var(--lh-tight); letter-spacing: var(--ls-title); text-wrap: pretty; } h2, .h2 { font-family: var(--font-jp); font-weight: var(--weight-bold); color: var(--brand-primary); line-height: var(--lh-tight); letter-spacing: var(--ls-title); } h3, .h3 { font-family: var(--font-jp); font-weight: var(--weight-bold); color: var(--text-primary); line-height: var(--lh-tight); } p, .body { font-family: var(--font-jp); font-weight: var(--weight-regular); color: var(--text-primary); } .caption { font-family: var(--font-jp); font-weight: var(--weight-regular); color: var(--text-muted); font-size: 0.85em; } .en-label { font-family: var(--font-en); font-weight: var(--weight-heavy); color: var(--brand-primary); letter-spacing: 0.02em; text-transform: none; } .stat-hero { font-family: var(--font-en); font-weight: var(--weight-heavy); color: var(--accent-red); line-height: 1; letter-spacing: -0.02em; }