/* * TensorCash brand design tokens for TSCScan. * * Source of truth (read-only, copied by value on 2026-10-02): * ~/tensorcash-maxiglobio-site/public/brand/tensorcash-brand.md ("BRAND.md" below) * ~/tensorcash-maxiglobio-site/components/branding/brandSpec.ts ("brandSpec.ts") * ~/tensorcash-maxiglobio-site/components/branding/palettes.ts ("palettes.ts") * ~/tensorcash-maxiglobio-site/public/brand/colour/tensorcash-palette.css * (brand files at commit 30d69bd of that repo, clean in the working tree) * * Every token is namespaced --tc-* so it cannot collide with the explorer's own * custom properties (--bg, --surface, --text, ...). tscscan-theme.css maps the * explorer's properties onto these. * * Values marked DERIVED are not in the brandbook; they are choices made for this * theme and are listed as open questions in README.md. */ :root { color-scheme: light; /* ---- Palette: surfaces (BRAND.md "Colour > Surfaces"; palettes.ts swatches) */ --tc-eggshell: #F3F1EC; /* --paper Page background */ --tc-bone: #ECE9E2; /* --paper-2 Quiet sections, panels */ --tc-shell: #FAF9F6; /* --white Cards, raised surfaces */ --tc-rule: #E3DFD7; /* --rule Dividers, borders */ --tc-line: #D2CDC4; /* --line Strong borders, inputs */ /* ---- Palette: warm neutrals (BRAND.md "Warm neutrals") */ --tc-stone: #B6B1A8; /* --stone Top face, illustration */ --tc-warm-grey: #8C877F; /* --mute-soft Secondary icons */ --tc-mute: #6E6961; /* --mute Captions, metadata */ --tc-ink-soft: #4A4640; /* --ink-soft Body text */ --tc-charcoal: #1F1E1C; /* --ink Headlines, buttons */ /* ---- Palette: sage (BRAND.md "Sage"; "used sparingly: one accent per view") */ --tc-sage-mist: #DCE5D7; /* --accent-soft Highlights, selection */ --tc-sage: #8DAA88; /* --accent Brand accent, logo */ --tc-sage-deep: #5F7D5B; /* --accent-deep Logo shadow face, links */ /* ---- Status colours (BRAND.md "Status colours (website UI only, not brand colours)") */ --tc-ok: #1F7A4D; /* Verified success / verified states */ --tc-oxide: #8A4638; /* Oxide errors / rejected states */ --tc-oxide-soft: #F6EFE9; /* Oxide soft error backgrounds */ /* DERIVED: the brandbook has no soft success tint and no "pending" colour. ok-soft is Verified at 8% over Shell; pending reuses the warm neutrals. */ --tc-ok-soft: #E9F0EA; --tc-pending: var(--tc-mute); --tc-pending-soft: var(--tc-bone); /* ---- Semantic roles (light). The theme only uses these. */ --tc-bg: var(--tc-eggshell); --tc-bg-quiet: var(--tc-bone); --tc-surface: var(--tc-shell); --tc-surface-hover: #F6F4EF; /* DERIVED: midpoint Shell/Eggshell */ --tc-border: var(--tc-rule); --tc-border-strong: var(--tc-line); --tc-text-strong: var(--tc-charcoal); --tc-text: var(--tc-ink-soft); --tc-text-muted: var(--tc-mute); --tc-text-faint: var(--tc-warm-grey); /* BRAND.md: Deep sage = links. Deep sage #5F7D5B is 4.07:1 on Eggshell and 4.36:1 on Shell, under WCAG AA 4.5:1 for the 13-14px hashes that are most of this UI. DERIVED: Deep sage darkened 14% (same hue) -> 5.15:1 on Eggshell, 4.49:1 on Sage mist. Set back to var(--tc-sage-deep) if the brand owner prefers the exact swatch. */ --tc-link: #526C4E; --tc-link-hover: var(--tc-charcoal); --tc-accent: var(--tc-sage); --tc-accent-soft: var(--tc-sage-mist); --tc-selection: var(--tc-sage-mist); /* BRAND.md: Sage mist = selection */ --tc-focus: var(--tc-sage); /* site globals.css :focus-visible */ --tc-button-bg: var(--tc-charcoal); /* BRAND.md: Charcoal = buttons */ --tc-button-text: var(--tc-eggshell); --tc-inverse-bg: var(--tc-charcoal); /* metric stack panel */ --tc-inverse-text: var(--tc-eggshell); --tc-inverse-muted: var(--tc-stone); --tc-inverse-rule: rgba(243, 241, 236, .14); /* Logo: approved colourways only (BRAND.md "Approved colourways"). The lockup image itself is set in tscscan-theme.css (url() is kept out of custom properties so relative paths resolve the same in every browser). Light = Sage tri-tone + Charcoal wordmark; dark = Sage on charcoal. */ --tc-lockup-ratio: 4.105; /* horizontal lockup viewBox 467.958 x 114 */ /* ---- Typography (BRAND.md "Typography"; brandSpec.ts typeWeights/typeScale) */ /* One typeface. Lay Grotesk is a commercial face (Due Studio). The repo only holds TRIAL files, which may not be self-hosted. Until TensorCash buys the Web licence and adds an @font-face (template in README.md), browsers use the documented fallback "Helvetica Neue", Arial. */ --tc-font-sans: "Lay Grotesk", "Helvetica Neue", Arial, sans-serif; /* DERIVED / EXCEPTION: hashes, txids and addresses need a fixed-width face to be compared by eye. BRAND.md says "Don't: a second typeface". This is the one exception the theme makes, and it uses the system mono (no extra font file). Set it to var(--tc-font-sans) to follow the brandbook literally. */ --tc-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --tc-weight-regular: 400; /* Long reading text */ --tc-weight-medium: 500; /* Default: headlines, body, nav, buttons */ --tc-weight-semibold: 600; /* Small emphasis */ --tc-weight-bold: 700; /* Numbers and statements */ /* Type scale. Display/Headline are marketing sizes and unused here. The explorer is a dense data UI, so its page titles use Title (36px) and its data cells sit between UI (15px) and Label (12px). */ --tc-size-display: 96px; --tc-leading-display: .96; --tc-track-display: -.03em; --tc-size-headline: 65px; --tc-leading-headline: 1.02; --tc-track-headline: -.02em; --tc-size-title: 36px; --tc-leading-title: 1.2; --tc-track-title: -.02em; --tc-size-subhead: 20px; --tc-leading-subhead: 1.4; --tc-size-body: 18px; --tc-leading-body: 1.4; --tc-size-ui: 15px; --tc-leading-ui: 1; --tc-size-label: 12px; --tc-leading-label: 1; --tc-track-label: .08em; /* +8%, uppercase only */ --tc-size-label-min: 11px; /* "Kickers ... (11-13 px)" */ /* DERIVED: data sizes for tables and cards (between UI and Label). */ --tc-size-data: 14px; --tc-size-data-sm: 13px; --tc-size-panel-title: 20px; /* Subhead size, Medium, used for panel h2 */ --tc-size-stat: 24px; /* stat card numbers, Bold ("Numbers and statements") */ --tc-track-tight: -.02em; /* "-2% tracking on anything above 28 px" */ /* ---- Layout (BRAND.md "Layout"; brandSpec.ts layoutTokens) */ --tc-header: 80px; /* 64px on mobile, see media query below */ --tc-container: 1480px; /* explorer: wide data tables, as upstream TSCScan (site: 1280) */ --tc-gutter: 24px; /* from 900px; explorer is a data tool (site: 80) */ --tc-gutter-mid: 20px; /* below 900px */ --tc-gutter-mobile: 16px; /* below 800px */ --tc-section: 72px; /* 56px on mobile */ --tc-breakpoint: 800px; /* documentation only: media queries cannot read vars */ /* ---- Spacing: DERIVED 4px base. The brandbook fixes header/section/gutter only. */ --tc-space-1: 4px; --tc-space-2: 8px; --tc-space-3: 12px; --tc-space-4: 16px; --tc-space-5: 20px; --tc-space-6: 24px; --tc-space-8: 32px; --tc-space-10: 40px; /* ---- Radius (BRAND.md: "6px buttons and chips · 12px cards and panels") */ --tc-radius-chip: 6px; --tc-radius-card: 12px; /* ---- Borders (BRAND.md: "1px, Rule #E3DFD7 (Line #D2CDC4 for inputs)") */ --tc-border-width: 1px; /* ---- Shadows. The brandbook defines none and forbids effects on the logo; "Solid, calm, exact." The theme is flat: borders do the separation. DERIVED: one very soft elevation, only for menus that float over content. */ --tc-shadow-none: none; --tc-shadow-float: 0 12px 32px rgba(31, 30, 28, .10), 0 1px 2px rgba(31, 30, 28, .06); /* ---- Motion (BRAND.md "Motion": heavy object, long expo/power3 ease-out, no bounce) */ --tc-ease: cubic-bezier(.16, 1, .3, 1); /* expo.out */ --tc-ease-power3: cubic-bezier(.215, .61, .355, 1); --tc-dur-ui: .9s; --tc-dur-micro: .2s; /* DERIVED: hover colour changes */ } /* * ---- Chart colours (canvas). DERIVED as a set: the brandbook has no data-viz * palette. Every value is a brand swatch or a same-hue tint of one, so charts stay * in sage / charcoal / stone instead of a rainbow. The explorer's canvas code * (app.js, mining-history.js) reads these at draw time through chart-colors.js and * keeps its upstream literal as the fallback. * * Categorical sequence --tc-chart-1 … 12 (pie/donut slices, share bars, legends). * Order rule: ADJACENT slices (including 12 → 1) differ by at least 2.6:1 in WCAG * luminance contrast, so neighbours never blur even where sage tints meet; the * order was chosen to maximise that minimum (it was 1.6:1 with a plain * dark/light alternation). Contrast to the next slot in brackets: * 1 Charcoal (6.5) 2 Sage (3.4) 3 Forest* (5.6) 4 Sage 300* (3.5) * 5 Mute (3.4) 6 Line (5.9) 7 Ink soft (4.4) 8 Stone (2.7) * 9 Deep sage* (4.5) 10 Sage mist (2.8) 11 Warm grey (2.7) 12 Rule (12.5 → 1) * (* = DERIVED tint: Deep sage* is the AA link tone #526C4E; Sage 300 #C3D5BE is * Sage lightened 40%; Forest #3D5139 is Deep sage darkened 35%.) * Slot 12 is the explorer's "everyone else" bucket, so it is the quietest tone. * Segments are also separated by a 2px Shell gap in the share bars. * * Line sequence --tc-chart-line-1 … 5 (multi-series lines on Shell, mining history). * Lines need >= 2:1 against Shell, so the lightest tints are left out: * Charcoal, Sage, Warm grey, Deep sage*, Stone. */ :root { --tc-chart-1: var(--tc-charcoal); --tc-chart-2: var(--tc-sage); --tc-chart-3: #3D5139; --tc-chart-4: #C3D5BE; --tc-chart-5: var(--tc-mute); --tc-chart-6: var(--tc-line); --tc-chart-7: var(--tc-ink-soft); --tc-chart-8: var(--tc-stone); --tc-chart-9: #526C4E; --tc-chart-10: var(--tc-sage-mist); --tc-chart-11: var(--tc-warm-grey); --tc-chart-12: var(--tc-rule); --tc-chart-line-1: var(--tc-charcoal); --tc-chart-line-2: var(--tc-sage); --tc-chart-line-3: var(--tc-warm-grey); --tc-chart-line-4: #526C4E; --tc-chart-line-5: var(--tc-stone); /* Single-series roles */ --tc-chart-primary: var(--tc-sage-deep); /* main line + area wash (was maroon) */ --tc-chart-primary-strong: #3D5139; /* hover point on the primary line */ --tc-chart-secondary: var(--tc-warm-grey); /* second measure (block time; was navy) */ --tc-chart-tertiary: var(--tc-charcoal); /* dashed reference (difficulty) */ --tc-chart-muted-series: var(--tc-stone); /* "other" series */ --tc-chart-ink: var(--tc-charcoal); /* cursors and hairlines (used with alpha) */ --tc-chart-surface: var(--tc-shell); /* marker rings, segment gaps */ --tc-chart-track: var(--tc-bone); /* empty share-bar track, rails */ --tc-chart-grid: var(--tc-rule); --tc-chart-baseline: var(--tc-line); --tc-chart-axis: var(--tc-mute); --tc-chart-axis-faint: var(--tc-warm-grey); --tc-chart-rail: var(--tc-ink-soft); /* one-block payout cells (alpha = count) */ --tc-chart-marker: var(--tc-ink-soft); /* whale transfer markers */ --tc-chart-marker-soft: var(--tc-bone); --tc-chart-marker-text: var(--tc-mute); --tc-chart-bar-top: var(--tc-warm-grey); /* transfer bars, gradient top → base */ --tc-chart-bar-base: var(--tc-line); --tc-chart-bar-focus-top: var(--tc-ink-soft); --tc-chart-bar-focus-base: var(--tc-stone); --tc-chart-up: var(--tc-ok); /* status colours only for direction */ --tc-chart-down: var(--tc-oxide); --tc-chart-flat: var(--tc-mute); /* Mempool map: Charcoal field, warm-dark → sage ramp by value. */ --tc-chart-map-bg: var(--tc-charcoal); --tc-chart-map-1: #2E2C29; --tc-chart-map-2: #3A3834; --tc-chart-map-3: #4A4640; --tc-chart-map-4: #4F5E4C; --tc-chart-map-5: var(--tc-sage-deep); --tc-chart-map-6: var(--tc-sage); --tc-chart-map-selected-start: var(--tc-sage-mist); --tc-chart-map-selected-end: #C3D5BE; --tc-chart-map-outline: var(--tc-eggshell); --tc-chart-map-glow: var(--tc-sage-mist); } @media (max-width: 799px) { :root { --tc-header: 64px; --tc-section: 56px; --tc-size-title: 28px; /* DERIVED: Title scaled for 360px screens */ --tc-size-panel-title: 18px; --tc-size-stat: 20px; } } /* * Dark scheme. DERIVED as a whole: the brandbook has no dark UI palette. It does * approve dark logo colourways ("Sage on charcoal", "Sage mono", Eggshell wordmark * on Charcoal), so the dark scheme is built on Charcoal with Eggshell text and the * Sage-on-charcoal tones for accents. Intermediate surface greys are not brand * colours and need the brand owner's sign-off. * * OPT-IN ONLY: . It does not follow prefers-color-scheme yet, * because only the captured page types (home, blocks, transactions, block, tx, * address, 404) have been checked; pool, holders, models, assets and analytics still * carry hard-coded white surfaces from institutional.css that would show as white * slabs in dark mode. To make it automatic later, wrap the same block in * @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { ... } }. */ :root[data-theme="dark"] { color-scheme: dark; --tc-bg: #1F1E1C; --tc-bg-quiet: #262522; --tc-surface: #2A2926; --tc-surface-hover: #32302C; --tc-border: #3A3834; --tc-border-strong: #4A4640; --tc-text-strong: #F3F1EC; --tc-text: #E3DFD7; --tc-text-muted: #B6B1A8; --tc-text-faint: #8C877F; --tc-link: #9DB898; --tc-link-hover: #C3D5BE; --tc-accent: #9DB898; --tc-accent-soft: rgba(157, 184, 152, .16); --tc-selection: #5F7D5B; --tc-focus: #9DB898; --tc-button-bg: #F3F1EC; --tc-button-text: #1F1E1C; --tc-inverse-bg: #2A2926; --tc-inverse-text: #F3F1EC; --tc-inverse-muted: #B6B1A8; --tc-inverse-rule: rgba(243, 241, 236, .12); --tc-ok: #7FC09A; --tc-ok-soft: rgba(31, 122, 77, .22); --tc-oxide: #D99A8B; --tc-oxide-soft: rgba(138, 70, 56, .25); --tc-pending: #B6B1A8; --tc-pending-soft: #32302C; /* Charts on the dark surfaces: light series first, same alternation rule. */ --tc-chart-1: #E3DFD7; --tc-chart-2: #9DB898; --tc-chart-3: #6E6961; --tc-chart-4: #C3D5BE; --tc-chart-5: #4A4640; --tc-chart-6: #B6B1A8; --tc-chart-7: #5F7D5B; --tc-chart-8: #8C877F; --tc-chart-9: #DCE5D7; --tc-chart-10: #3D5139; --tc-chart-11: #D2CDC4; --tc-chart-12: #3A3834; --tc-chart-line-1: #F3F1EC; --tc-chart-line-2: #9DB898; --tc-chart-line-3: #B6B1A8; --tc-chart-line-4: #C3D5BE; --tc-chart-line-5: #8C877F; --tc-chart-primary: #9DB898; --tc-chart-primary-strong: #C3D5BE; --tc-chart-secondary: #B6B1A8; --tc-chart-tertiary: #F3F1EC; --tc-chart-ink: #F3F1EC; --tc-chart-surface: #2A2926; --tc-chart-track: #32302C; --tc-chart-grid: #3A3834; --tc-chart-baseline: #4A4640; --tc-chart-axis: #B6B1A8; --tc-chart-axis-faint: #8C877F; --tc-chart-rail: #C3D5BE; --tc-chart-marker: #D2CDC4; --tc-chart-marker-soft: #3A3834; --tc-chart-marker-text: #B6B1A8; --tc-chart-bar-top: #B6B1A8; --tc-chart-bar-base: #4A4640; --tc-chart-bar-focus-top: #E3DFD7; --tc-chart-bar-focus-base: #8C877F; }