/* ======================================================================== KANTIN — DESIGN TOKENS Dark-first, Swiss-modern, monochrome with a single hover accent. ======================================================================== */ /* --- Brand type: Helvetica Neue LT Pro — full range --------------------- Weights: 100 UltraLight, 200 Thin, 300 Light, 400 Roman, 500 Medium, 700 Bold, 800 Heavy, 900 Black. Italics for all weights. Condensed + Extended are exposed as their own font-families so the type scale can pick width explicitly. -------------------------------- */ /* Standard width */ @font-face { font-family: 'Helvetica Neue'; src: url('fonts/HelveticaNeueLTProUltLt.otf') format('opentype'); font-weight: 100; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue'; src: url('fonts/HelveticaNeueLTProUltLtIt.otf') format('opentype'); font-weight: 100; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue'; src: url('fonts/HelveticaNeueLTProTh.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue'; src: url('fonts/HelveticaNeueLTProThIt.otf') format('opentype'); font-weight: 200; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue'; src: url('fonts/HelveticaNeueLTProLt.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue'; src: url('fonts/HelveticaNeueLTProLtIt.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue'; src: url('fonts/HelveticaNeueLTProRoman.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue'; src: url('fonts/HelveticaNeueLTProIt.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue'; src: url('fonts/HelveticaNeueLTProMd.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue'; src: url('fonts/HelveticaNeueLTProMdIt.otf') format('opentype'); font-weight: 500; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue'; src: url('fonts/HelveticaNeueLTProBd.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue'; src: url('fonts/HelveticaNeueLTProBdIt.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue'; src: url('fonts/HelveticaNeueLTProHv.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue'; src: url('fonts/HelveticaNeueLTProHvIt.otf') format('opentype'); font-weight: 800; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue'; src: url('fonts/HelveticaNeueLTProBlk.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue'; src: url('fonts/HelveticaNeueLTProBlkIt.otf') format('opentype'); font-weight: 900; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } /* Condensed width — use for tight tabular headers + packaging type */ @font-face { font-family: 'Helvetica Neue Cn'; src: url('fonts/HelveticaNeueLTProThCn.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Cn'; src: url('fonts/HelveticaNeueLTProThCnO.otf') format('opentype'); font-weight: 200; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Cn'; src: url('fonts/HelveticaNeueLTProLtCn.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Cn'; src: url('fonts/HelveticaNeueLTProLtCnO.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Cn'; src: url('fonts/HelveticaNeueLTProCn.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Cn'; src: url('fonts/HelveticaNeueLTProCnO.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Cn'; src: url('fonts/HelveticaNeueLTProMdCn.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Cn'; src: url('fonts/HelveticaNeueLTProMdCnO.otf') format('opentype'); font-weight: 500; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Cn'; src: url('fonts/HelveticaNeueLTProBdCn.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Cn'; src: url('fonts/HelveticaNeueLTProBdCnO.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Cn'; src: url('fonts/HelveticaNeueLTProHvCn.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Cn'; src: url('fonts/HelveticaNeueLTProHvCnO.otf') format('opentype'); font-weight: 800; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Cn'; src: url('fonts/HelveticaNeueLTProBlkCn.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Cn'; src: url('fonts/HelveticaNeueLTProBlkCnO.otf') format('opentype'); font-weight: 900; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } /* Extended width — use for oversized display moments (covers, posters) */ @font-face { font-family: 'Helvetica Neue Ex'; src: url('fonts/HelveticaNeueLTProThEx.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Ex'; src: url('fonts/HelveticaNeueLTProThExO.otf') format('opentype'); font-weight: 200; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Ex'; src: url('fonts/HelveticaNeueLTProLtEx.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Ex'; src: url('fonts/HelveticaNeueLTProLtExO.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Ex'; src: url('fonts/HelveticaNeueLTProEx.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Ex'; src: url('fonts/HelveticaNeueLTProExO.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Ex'; src: url('fonts/HelveticaNeueLTProMdEx.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Ex'; src: url('fonts/HelveticaNeueLTProMdExO.otf') format('opentype'); font-weight: 500; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Ex'; src: url('fonts/HelveticaNeueLTProBdEx.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Ex'; src: url('fonts/HelveticaNeueLTProBdExO.otf') format('opentype'); font-weight: 700; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Ex'; src: url('fonts/HelveticaNeueLTProHvEx.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Ex'; src: url('fonts/HelveticaNeueLTProHvExO.otf') format('opentype'); font-weight: 800; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Ex'; src: url('fonts/HelveticaNeueLTProBlkEx.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Helvetica Neue Ex'; src: url('fonts/HelveticaNeueLTProBlkExO.otf') format('opentype'); font-weight: 900; font-style: italic; font-display: swap; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } /* Accent face — for moments of warmth / hand-touched tags, captions */ @font-face { font-family: 'Gochi Hand'; src: url('fonts/GochiHand-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } :root { /* ---- SURFACE & INK (dark-first) ---------------------------------- */ --k-bg: #0A0A0A; /* canvas */ --k-surface: #131313; /* raised surface */ --k-surface-2: #1A1A1A; /* input, card interior */ --k-line: rgba(253,253,253,0.12); --k-line-strong: rgba(253,253,253,0.24); --k-line-faint: rgba(253,253,253,0.06); --k-ink: #FDFDFD; /* primary text */ --k-ink-2: rgba(253,253,253,0.72); --k-ink-3: rgba(253,253,253,0.48); --k-ink-4: rgba(253,253,253,0.32); /* ---- ACCENTS ----------------------------------------------------- */ --k-accent: #ED74C3; /* primary accent — link hover, key focus */ --k-accent-soft: rgba(237,116,195,0.14); /* Secondary accents (use sparingly — states, data viz, tagging) */ --k-sec-blue: #3963B5; --k-sec-green: #00B381; --k-sec-amber: #F2C14E; --k-sec-violet: #8E44AD; --k-sec-orange: #E67E22; /* ---- TYPE -------------------------------------------------------- */ --k-font: 'Helvetica Neue', Helvetica, Arial, sans-serif; --k-font-cn: 'Helvetica Neue Cn', 'Helvetica Neue', Helvetica, Arial, sans-serif; --k-font-ex: 'Helvetica Neue Ex', 'Helvetica Neue', Helvetica, Arial, sans-serif; --k-accent-font: 'Gochi Hand', 'Caveat', cursive; --k-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Swiss type scale — tight leading on display, generous on body */ --k-t-display: clamp(64px, 9vw, 160px); --k-t-h1: clamp(40px, 5vw, 80px); --k-t-h2: clamp(28px, 3vw, 44px); --k-t-h3: 22px; --k-t-body: 15px; --k-t-small: 13px; --k-t-micro: 11px; /* ---- SPACING (8pt) ---------------------------------------------- */ --k-1: 4px; --k-2: 8px; --k-3: 12px; --k-4: 16px; --k-5: 24px; --k-6: 32px; --k-7: 48px; --k-8: 64px; --k-9: 96px; --k-10: 128px; /* ---- GRID (Swiss) ------------------------------------------------ */ --k-gutter: 24px; --k-col: 12; --k-margin: 48px; /* ---- RADII ------------------------------------------------------- */ --k-r-0: 0px; /* default: sharp corners */ --k-r-1: 2px; /* inputs, tags */ --k-r-2: 4px; /* cards */ --k-r-pill: 9999px; /* ---- MOTION ------------------------------------------------------ */ --k-ease: cubic-bezier(0.2, 0.6, 0.2, 1); --k-fast: 120ms; --k-base: 220ms; --k-slow: 420ms; } html, body { background: var(--k-bg); color: var(--k-ink); font-family: var(--k-font); font-size: var(--k-t-body); line-height: 1.45; margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } * { box-sizing: border-box; } /* Swiss link treatment: underlined, trailing comma optional, accent on hover */ .k-link { color: var(--k-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color var(--k-base) var(--k-ease); cursor: pointer; } .k-link:hover { color: var(--k-accent); } /* Mono caption — registration mark style used across foundations */ .k-caption { font-family: var(--k-mono); font-size: var(--k-t-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--k-ink-3); }