/* * Info Kraft shared design tokens. * Modeled on Google's product surface (Gmail, Drive, Calendar 2024+): * grayscale base, Google Blue accent, 8px grid, Material elevations. * EVERY project must import this file. Critic rejects projects that * roll their own colors, fonts, or spacing scales. */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap"); :root { /* === Palette === */ /* Surfaces */ --ik-bg: #ffffff; --ik-bg-subtle: #f8f9fa; --ik-bg-canvas: #f1f3f4; --ik-surface: #ffffff; --ik-surface-1: #ffffff; --ik-surface-2: #f8f9fa; --ik-surface-3: #f1f3f4; /* Text */ --ik-text-primary: #202124; --ik-text-secondary: #5f6368; --ik-text-tertiary: #80868b; --ik-text-disabled: #bdc1c6; --ik-text-on-accent: #ffffff; /* Lines */ --ik-border: #dadce0; --ik-border-strong: #bdc1c6; --ik-divider: #e8eaed; /* Accent (Google Blue 600) */ --ik-accent: #1a73e8; --ik-accent-hover: #1967d2; --ik-accent-pressed: #185abc; --ik-accent-soft: #e8f0fe; --ik-accent-on: #ffffff; /* Semantic */ --ik-success: #1e8e3e; --ik-success-soft: #e6f4ea; --ik-warning: #f9ab00; --ik-warning-soft: #fef7e0; --ik-danger: #d93025; --ik-danger-soft: #fce8e6; --ik-info: #1a73e8; --ik-info-soft: #e8f0fe; /* === Typography === */ --ik-font-sans: "Roboto", "Google Sans", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", "Segoe UI", system-ui, sans-serif; --ik-font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --ik-text-xs: 0.75rem; /* 12px */ --ik-text-sm: 0.875rem; /* 14px — Gmail body */ --ik-text-base: 1rem; /* 16px */ --ik-text-lg: 1.125rem; /* 18px */ --ik-text-xl: 1.375rem; /* 22px — Gmail subject */ --ik-text-2xl: 1.75rem; /* 28px */ --ik-text-3xl: 2.25rem; /* 36px — only for hero h1 */ --ik-leading-tight: 1.25; --ik-leading-snug: 1.4; --ik-leading-normal: 1.5; --ik-leading-relaxed: 1.7; --ik-weight-regular: 400; --ik-weight-medium: 500; --ik-weight-bold: 700; /* === 8px grid spacing === */ --ik-space-0: 0; --ik-space-1: 4px; --ik-space-2: 8px; --ik-space-3: 12px; --ik-space-4: 16px; --ik-space-5: 24px; --ik-space-6: 32px; --ik-space-7: 48px; --ik-space-8: 64px; --ik-space-9: 96px; /* === Radius === */ --ik-radius-xs: 4px; --ik-radius-sm: 8px; /* default for buttons, chips */ --ik-radius-md: 12px; --ik-radius-lg: 16px; /* default for cards */ --ik-radius-xl: 24px; --ik-radius-pill: 9999px; /* === Elevation (Material) === */ --ik-elev-0: none; --ik-elev-1: 0 1px 2px 0 rgba(60, 64, 67, 0.30), 0 1px 3px 1px rgba(60, 64, 67, 0.15); --ik-elev-2: 0 1px 2px 0 rgba(60, 64, 67, 0.30), 0 2px 6px 2px rgba(60, 64, 67, 0.15); --ik-elev-3: 0 4px 8px 3px rgba(60, 64, 67, 0.15), 0 1px 3px 0 rgba(60, 64, 67, 0.30); --ik-elev-4: 0 6px 10px 4px rgba(60, 64, 67, 0.15), 0 2px 3px 0 rgba(60, 64, 67, 0.30); /* === Layout === */ --ik-content-narrow: 720px; --ik-content-default: 960px; --ik-content-wide: 1280px; --ik-header-height: 64px; /* === Motion === */ --ik-duration-fast: 100ms; --ik-duration-base: 200ms; --ik-duration-slow: 300ms; --ik-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); --ik-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); --ik-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); } /* * Dark mode is intentionally NOT supported. * Past attempts produced contrast bugs in AI-generated components that * hardcoded light backgrounds: hovers and accent text became invisible * under prefers-color-scheme: dark. Until we have a per-component dark- * mode review pass, the design system is light-only. * * If a future project genuinely needs a dark theme, opt in explicitly * with a class on (e.g., body[data-theme="dark"]) — not via OS * preference — and document the exhaustive override list. */ /* === Reset / base === */ *, *::before, *::after { box-sizing: border-box; } html { color-scheme: light; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; background: var(--ik-bg-canvas); color: var(--ik-text-primary); font-family: var(--ik-font-sans); font-size: var(--ik-text-sm); line-height: var(--ik-leading-normal); font-feature-settings: "palt"; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--ik-weight-medium); letter-spacing: -0.005em; color: var(--ik-text-primary); } h1 { font-size: var(--ik-text-3xl); line-height: var(--ik-leading-tight); font-weight: var(--ik-weight-regular); } h2 { font-size: var(--ik-text-2xl); line-height: var(--ik-leading-snug); } h3 { font-size: var(--ik-text-xl); } h4 { font-size: var(--ik-text-lg); } p { margin: 0 0 var(--ik-space-4); } a { color: var(--ik-accent); text-decoration: none; transition: color var(--ik-duration-fast) var(--ik-easing-standard); } a:hover { text-decoration: underline; text-underline-offset: 2px; color: var(--ik-accent-hover); } a:focus-visible { outline: 2px solid var(--ik-accent); outline-offset: 2px; border-radius: var(--ik-radius-xs); } code { font-family: var(--ik-font-mono); font-size: 0.9em; background: var(--ik-surface-2); border: 1px solid var(--ik-border); border-radius: var(--ik-radius-xs); padding: 1px 6px; } hr { border: none; border-top: 1px solid var(--ik-divider); margin: var(--ik-space-6) 0; } img, svg { max-width: 100%; height: auto; display: block; } /* === Material Symbols === */ .material-symbols-outlined { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; vertical-align: middle; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; } /* === Skip-link for a11y === */ .ik-skip-link { position: absolute; left: var(--ik-space-2); top: var(--ik-space-2); background: var(--ik-accent); color: var(--ik-accent-on); padding: var(--ik-space-2) var(--ik-space-4); border-radius: var(--ik-radius-sm); transform: translateY(-200%); transition: transform var(--ik-duration-base) var(--ik-easing-standard); z-index: 1000; } .ik-skip-link:focus { transform: translateY(0); text-decoration: none; }