/* ========================================================================== tokens.css — the Figma variable collection, transcribed -------------------------------------------------------------------------- Source: BritBox Hi-Fi Design [NativeTV] | Main — gV2NHKzbIfSXx1WkhVuOA3 Read with get_variable_defs on the frames listed in source.md §2. NAMING IS 1:1 WITH THE FIGMA PATH, so any value here can be traced back to the design file by reading its own name. The transform is mechanical: lowercase · "&" becomes "and" · "," dropped "/" and " " become "-" · runs of "-" collapse to one Buttons/Size, Padding & Gap/Padding/Large/Button-Sides-Padding --buttons-size-padding-and-gap-padding-large-button-sides-padding The names are long. That is the cost of being able to check one against the design file without a lookup table, and it is the right way round: a token nobody can trace is a token nobody can verify. EVERY LENGTH IS IN PIXELS AT 1920x1080 — the frame the designs are drawn at. Nothing here is scaled; the whole TV is scaled once, by app.js. Values NOT from the collection are in the last block and say so. ========================================================================== */ :root { /* ---- Screen grounds -------------------------------------------------- */ --full-screen-content-screen-frame-background-colour: #001015; --full-screen-form-screens-frame-background-colour: #001015; /* ---- BritBox primaries ----------------------------------------------- */ --britbox-primary-white: #ffffff; --britbox-primary-britbox-dark-teal: #00202b; --britbox-primary-chevron-light-blue: #00b6e6; --primary-palette-and-tints-white-500: #ffffff; --natural-light-could-500: #e8edf2; /* ---- Type families --------------------------------------------------- Mundial (headings) and Museo Sans Rounded (the CTV/* styles) are licensed faces and are not in this repository. Inter is, and is the collection's own Normal-Font-Family. See ASSETS.md §3 — the substitution is recorded there, not hidden here. */ --font-family-header-font-family: 'Mundial', 'Inter', system-ui, sans-serif; --font-family-normal-font-family: 'Inter', system-ui, sans-serif; /* ---- Type sizes and weights ------------------------------------------ */ --font-size-font-size-64: 64px; --font-size-font-size-42: 42px; --font-size-font-size-32: 32px; --font-size-font-size-28: 28px; --font-weight-inter-regular-font-weight: 400; --font-weight-inter-medium-font-weight: 500; --font-weight-inter-bold-font-weight: 600; --font-weight-mundial-header-bold-font-weight: 700; /* ---- Composed text styles -------------------------------------------- Figma composes these from the parts above; so does this file, so a change to a part still reaches the style. */ --headings-h1: var(--font-weight-mundial-header-bold-font-weight) var(--font-size-font-size-64) / 68px var(--font-family-header-font-family); --paywall-landing-subtitle: var(--font-weight-inter-regular-font-weight) var(--font-size-font-size-28) / 1.5 var(--font-family-normal-font-family); --navigation-text-regular: var(--font-weight-inter-regular-font-weight) var(--font-size-font-size-32) / 36px var(--font-family-normal-font-family); --navigation-subtitle-regular: var(--font-weight-inter-regular-font-weight) var(--font-size-font-size-28) / 1.5 var(--font-family-normal-font-family); --rail-title: var(--font-weight-inter-bold-font-weight) var(--font-size-font-size-42) / 42px var(--font-family-normal-font-family); --rail-title-letter-spacing: -2px; --button-text-bold: var(--buttons-font-style-button-font-weight) var(--buttons-font-style-button-font-size) / 32px var(--font-family-normal-font-family); --input-field-text: var(--input-field-font-style-input-field-font-weight) var(--input-field-font-style-input-field-font-size) / 32px var(--font-family-normal-font-family); --body-large-body-medium: var(--font-weight-inter-medium-font-weight) var(--font-size-font-size-28) / 1.5 var(--font-family-normal-font-family); --body-large-body-regular: var(--font-weight-inter-regular-font-weight) var(--font-size-font-size-28) / 42px var(--font-family-normal-font-family); --hero-h1-tagline: var(--font-weight-inter-medium-font-weight) var(--cards-font-style-h1-hero-tagline-h1-hero-tagline-font-size) / 40px var(--font-family-normal-font-family); --hero-individual-page-availability-text: var(--individual-programme-and-movie-page-font-style-hero-availability-text-individual-programme-page-availabilitytext-font-weight) var(--individual-programme-and-movie-page-font-style-hero-availability-text-individual-programme-page-availabilitytext-font-size) / 40px var(--font-family-normal-font-family); --tags-individual-page-tags: var(--tags-font-style-individual-page-tags-individual-page-tag-font-weight) var(--tags-font-style-individual-page-tags-individual-page-tag-big-font-size) / 100px var(--font-family-normal-font-family); --tags-indivudual-rating-tags: var(--tags-font-style-individual-page-tags-individual-page-tag-font-weight) var(--tags-font-style-individual-page-tags-individual-page-tag-small-font-size) / 100px var(--font-family-normal-font-family); --tab-items: var(--individual-programme-and-movie-page-font-style-tabs-individual-programme-movie-top-menu-tab-font-weight) var(--individual-programme-and-movie-page-font-style-tabs-individual-programme-movie-top-menu-tab-font-size) / 36px var(--font-family-normal-font-family); /* ---- Navigation ------------------------------------------------------ */ --navigation-colours-navigation-bar-navigation-frame-background-colour: #0000004d; --navigation-colours-navigation-item-default-state-default-navigation-item-text-colour: #f8f4eb; --navigation-colours-navigation-item-active-state-active-navigation-item-text: #f8f4eb; --navigation-colours-navigation-item-active-state-active-navigation-item-background: #f8f4eb33; --navigation-corner-radius-navigation-item-corner-radius: 100px; --navigation-size-padding-and-gap-size-navigation-bar-navigation-bar-width-size: 1920px; --navigation-size-padding-and-gap-size-navigation-bar-navigation-bar-height-size: 128px; --navigation-size-padding-and-gap-size-navigation-bar-navigation-bar-title-and-subtitle-height-size: 220px; --navigation-size-padding-and-gap-padding-navigation-bar-navigation-bar-left-and-right-padding: 112px; --navigation-size-padding-and-gap-padding-navigation-bar-navigation-bar-top-and-bottom-padding: 32px; --navigation-size-padding-and-gap-gap-navigation-bar-items-gap: 24px; --navigation-size-padding-and-gap-gap-navigation-item-text-and-line-gap: 32px; --navigation-size-padding-and-gap-padding-navigation-item-navigation-item-left-and-right-padding: 24px; --navigation-size-padding-and-gap-size-navigation-item-text-navigation-item-height-size: 68px; --navigation-size-padding-and-gap-size-navigation-item-icon-navigation-icon-width-size: 68px; --navigation-size-padding-and-gap-size-navigation-item-icon-navigation-icon-height-size: 68px; /* ---- Buttons ---------------------------------------------------------- */ --buttons-colours-primary-default-primary-default-button-background-colour: #f8f4eb33; --buttons-colours-primary-default-primary-default-button-text-and-icon-colour: #f8f4eb; --buttons-colours-primary-focus-primary-focus-button-background-colour: #f8f4eb; --buttons-colours-primary-focus-primary-focus-button-text-and-icon-colour: #042c39; --buttons-colours-primary-disabled-primary-disabled-button-background-colour: #f8f4eb33; --buttons-colours-primary-disabled-primary-disabled-button-text-and-icon-colour: #f8f4eb; --buttons-corner-radius-button-corner-radius: 8px; --buttons-font-style-button-font-size: 28px; --buttons-font-style-button-font-weight: 600; --buttons-size-padding-and-gap-size-large-button-width-size: 379px; --buttons-size-padding-and-gap-size-large-button-height-size: 86px; --buttons-size-padding-and-gap-padding-large-button-sides-padding: 32px; --buttons-size-padding-and-gap-padding-large-button-top-and-bottom-padding: 22px; --buttons-size-padding-and-gap-gap-normal-button-button-icon-and-text-gap: 8px; --buttons-sizes-buttons-standard-corners: 100px; --buttons-padding-buttons-large-horizontal-padding: 48px; --buttons-padding-buttons-large-verticle-padding: 22px; /* ---- Paywall / promo landing ------------------------------------------ */ --paywall-page-colours-paywall-page-text-colour: #f8f4eb; --paywall-page-size-padding-and-gap-gap-normal-paywall-page-normal-paywall-page-title-and-subtitle-gap: 16px; --paywall-page-size-padding-and-gap-gap-normal-paywall-page-normal-paywall-page-title-and-button-gap: 40px; --paywall-page-size-padding-and-gap-gap-buttons-paywall-page-buttons-gap: 16px; --paywall-page-size-padding-and-gap-size-normal-paywall-page-content-frame-normal-paywall-page-content-width-size: 1690px; --paywall-page-size-padding-and-gap-size-normal-paywall-page-content-frame-normal-paywall-page-content-height-size: 354px; --paywall-page-size-padding-and-gap-size-frame-size-paywall-page-width-size: 1920px; --paywall-page-size-padding-and-gap-size-frame-size-paywall-page-height-size: 1080px; /* ---- Input fields ------------------------------------------------------ */ --input-field-colours-background-input-field-background-colour: #02212a; --input-field-colours-outline-input-field-focussed-outline-colour: #f8f4eb; --input-field-colours-text-input-field-text-entry-colour: #f8f4eb; --input-field-colours-text-input-field-no-text-colour: #f8f4eb99; --input-field-colours-show-password-show-hide-fill-bg: #a6e2f533; --input-field-corner-radius-input-field-corner-radius-size: 4px; --input-field-font-style-input-field-font-size: 28px; --input-field-font-style-input-field-font-weight: 400; --input-field-size-padding-and-gap-padding-input-field-sides-padding-size: 32px; --input-field-size-padding-and-gap-padding-input-field-top-and-bottom-size: 22px; --input-field-size-padding-and-gap-size-email-input-field-email-width-size: 1234px; --input-field-size-padding-and-gap-size-email-input-field-email-height-size: 86px; --input-field-size-padding-and-gap-size-password-input-field-input-field-password-width-size: 1234px; --input-field-size-padding-and-gap-size-password-input-field-input-field-password-field-height-size: 86px; --input-field-size-padding-and-gap-size-password-show-password-show-password-toggle-width-size: 86px; --input-field-size-padding-and-gap-size-password-show-password-show-password-toggle-height-size: 86px; --input-field-size-padding-and-gap-gap-input-field-password-field-and-showicon-gap: 8px; --input-field-size-padding-and-gap-gap-form-and-buttons-input-field-form-buttons-gap: 48px; --credentials-input-frame-size-padding-and-gap-gap-credentials-input-frame-gap: 24px; --credentials-input-frame-size-padding-and-gap-size-sign-in-full-frame-sign-in-credentials-input-frame-width: 1234px; --plan-selection-colours-full-frame-plan-selection-full-frame-text-colour: #f8f4eb; /* ---- Cards, heroes and rails ------------------------------------------- */ --cards-colours-h1-hero-text-h1-hero-tagline-colour: #f8f4eb; --cards-colours-h1-hero-outline-h1-hero-focus-outline-colour: #f8f4eb; --cards-font-style-h1-hero-tagline-h1-hero-tagline-font-size: 32px; --cards-size-padding-and-gap-hero-size-image-h2-peaking-h2-hero-image-width-size: 1690px; --cards-size-padding-and-gap-hero-size-image-h2-peaking-h2-hero-image-height-size: 563px; --cards-size-padding-and-gap-hero-size-text-frame-h1-hero-text-frame-width-size: 835px; --cards-size-padding-and-gap-hero-size-content-title-logo-h1-hero-logo-width-size: 721px; --cards-size-padding-and-gap-hero-size-content-title-logo-h1-hero-logo-height-size: 240px; --cards-size-padding-and-gap-hero-gap-h1-hero-text-frame-contenttag-and-tagline-gap: 16px; --cards-size-padding-and-gap-pr1-promotional-banner-pr1-promotional-banner-width-size: 1690px; --cards-size-padding-and-gap-pr1-promotional-banner-pr1-promotional-banner-height-size: 233px; --cards-size-padding-and-gap-t1-size-t1-cards-image-width-size: 322px; --cards-size-padding-and-gap-t1-size-t1-cards-image-height-size: 187px; --cards-size-padding-and-gap-t2-size-t2-cards-image-width-size: 550px; --cards-size-padding-and-gap-t2-size-t2-cards-image-height-size: 313px; --cards-size-padding-and-gap-s2-s2-cards-image-height-size: 322px; --cards-corner-radius-cards-image-corner-radius-size: 0px; --rails-colours-text-rail-cards-title-text-colour: #f8f4eb; --rails-size-padding-and-gap-gap-rail-cards-title-and-cards-gap: 32px; /* ---- Tags -------------------------------------------------------------- */ --tags-colours-premier-tag-premier-tag-background-colour: #00000099; --tags-corner-radius-tags-premier-tag-corner-radius: 4px; --tags-size-padding-and-gap-size-premier-premier-tag-width-size: 36px; --tags-size-padding-and-gap-size-premier-premier-tag-height-size: 36px; --tags-size-padding-and-gap-padding-premier-tag-premier-tag-sides-padding: 2px; --tags-size-padding-and-gap-padding-premier-tag-premier-tag-top-and-bottom-padding: 2px; --tags-font-style-individual-page-tags-individual-page-tag-big-font-size: 28px; --tags-font-style-individual-page-tags-individual-page-tag-small-font-size: 22px; --tags-font-style-individual-page-tags-individual-page-tag-font-weight: 600; /* ---- Individual programme & movie page --------------------------------- */ --individual-programme-and-movie-page-colours-tabs-top-menu-text-individual-programme-movie-menu-tab-default-text-colour: #f8f4eb; --individual-programme-and-movie-page-colours-show-description-individual-programme-movie-show-description-text-colour: #f8f4eb; --individual-programme-and-movie-page-colours-tags-hero-tags-individual-programme-movie-hero-tag-text-colour: #f8f4eb; --individual-programme-and-movie-page-colours-tags-release-date-individual-programme-movie-release-tag-text-colour: #a6e2f5; --individual-programme-and-movie-page-colours-tags-rating-individual-programme-movie-rating-tag-text-colour: #f8f4ebb2; --individual-programme-and-movie-page-colours-tags-rating-individual-programme-movie-rating-tag-outline-colour: #f8f4ebb2; --individual-programme-and-movie-page-colours-disclaimer-individual-programme-movie-disclaimer-text-colour: #f8f4ebb2; --individual-programme-and-movie-page-font-style-tabs-individual-programme-movie-top-menu-tab-font-size: 32px; --individual-programme-and-movie-page-font-style-tabs-individual-programme-movie-top-menu-tab-font-weight: 600; --individual-programme-and-movie-page-font-style-hero-availability-text-individual-programme-page-availabilitytext-font-size: 24px; --individual-programme-and-movie-page-font-style-hero-availability-text-individual-programme-page-availabilitytext-font-weight: 600; --individual-programme-and-movie-page-corner-radius-tabs-individual-programme-secondary-nav-tab-corner-radius: 500px; --individual-programme-and-movie-page-size-padding-and-gap-gap-tabs-top-menu-individual-programme-movie-menu-bar-items-gap: 16px; --individual-programme-and-movie-page-size-padding-and-gap-padding-tabs-top-menu-individual-programme-movie-menu-bar-sides-padding: 112px; --individual-programme-and-movie-page-size-padding-and-gap-size-tabs-top-bar-individual-programme-movie-menu-bar-width-size: 1920px; --individual-programme-and-movie-page-size-padding-and-gap-size-tabs-top-bar-individual-programme-movie-menu-bar-height-size: 100px; --individual-programme-and-movie-page-size-padding-and-gap-size-hero-logo-hero-logo-width-size: 600px; --individual-programme-and-movie-page-size-padding-and-gap-size-hero-logo-hero-logo-height-size: 200px; --individual-programme-and-movie-page-size-padding-and-gap-size-tags-individual-programme-movie-hero-tag-width-size: 909px; --individual-programme-and-movie-page-size-padding-and-gap-size-tags-individual-programme-movie-hero-tag-height-size: 40px; --individual-programme-and-movie-page-size-padding-and-gap-size-disclaimer-individual-programme-movie-disclaimer-height-size: 32px; --individual-programme-and-movie-page-size-padding-and-gap-gap-content-frame-individual-programme-movie-content-frame-gap: 24px; --individual-programme-and-movie-page-size-padding-and-gap-gap-content-frame-individual-programme-movie-tags-and-disclaimer-gap: 16px; --individual-programme-and-movie-page-size-padding-and-gap-size-content-frame-individual-programme-movie-full-content-frame-width: 1691px; --individual-programme-and-movie-page-size-padding-and-gap-size-content-frame-individual-programme-movie-full-content-frame-height: 663px; /* ---- Spacing ----------------------------------------------------------- */ --spacings-spacing-32: 32px; /* ====================================================================== NOT FROM THE COLLECTION ---------------------------------------------------------------------- Measured off the frames at 1:1, or decided. Each one is written down once here rather than repeated as a literal in a component rule, and each is argued for in source.md §4. ====================================================================== */ /* The 112px navigation side padding is the only horizontal inset the collection names, and every screen honours it. It is the safe area. */ --safe-area-x: 112px; /* FOCUS. The comps draw card focus as a flat 4px white border and nothing else. The border width is theirs, measured off the Originals rail at 1:1; the ring, lift and scale are not — see source.md §5. */ --focus-ring-width: 4px; --focus-ring-colour: var(--cards-colours-h1-hero-outline-h1-hero-focus-outline-colour); --focus-scale-card: 1.06; --focus-scale-tile: 1.04; --focus-lift: 0 18px 48px rgba(0, 0, 0, 0.55); /* LAYOUT VALUES MEASURED OFF THE FRAMES, because the collection names the sizes of things but not the spaces between them. The two gaps both fall out of the same arithmetic, which is a good sign they are right: the content width is 1690, and 5 landscape cards of 322 with 4 gaps of 20 fill it exactly (1610 + 80), as do 6 portrait cards of 265 with 5 gaps of 20 (1590 + 100). Read off 15951:250646 and 16256:174628 respectively. The hero peek gap is read off 8740:153307: a slide ends at 1806 and the next begins at 1834. */ --hero-peek-gap: 28px; --rail-card-gap: 20px; --card-portrait-width: 265px; --card-portrait-height: 398px; /* The Continue Watching bar floats clear of the artwork's corners rather than running the full width of its foot — 16256:174628. */ /* Episode stills are their own size, 435 x 250 — 246:35877. They are not T1 cards and were being built from the T1 token. */ --episode-still-width: 435px; --episode-still-height: 250px; --card-progress-inset: 12px; --card-progress-height: 5px; /* Sampled off 1735:246174 — rgb(166, 226, 245). The same pale cyan as the programme page's release tag, NOT Chevron Light Blue. */ --colour-splash-spinner: #a6e2f5; /* Device linking — 143:24348. Sampled and measured off the frame; the collection has no page-specific variables for it. */ --device-link-footer-ground: #0c1b20; --device-link-footer-top: 831px; --device-link-code-box-width: 80px; --device-link-code-box-height: 113px; --device-link-code-box-gap: 8px; --device-link-qr-size: 313px; --device-link-link-colour: #a6e2f5; /* The trailer player's scrubber. Drawn on the canvas, not bound. */ --player-scrubber-height: 8px; /* The unfilled track reads as about 55% cream over the chrome ramp in 4666:336327 — solved from the render, where the track sits at 153 against a ground of 51 and a full fill of 233. It was 4d (30%), which is the value you reach for when you are guessing at "a dim track". */ --player-scrubber-track: #f8f4eb80; --player-scrubber-fill: #f8f4eb; --player-chrome-ramp: linear-gradient(to top, #000000cc 0%, #00000080 28%, transparent 62%); /* The paywall's artwork wall sits under a wash so the copy can carry. ONE LINEAR RAMP, transparent at the top to solid at the foot, and nothing else. This was a flat #001015a6 scrim plus a four-stop ramp, which was guessed rather than measured and darkened the wall to about three times what the design does. Derived properly this time: the frame's own render of 1930:135511 was compared against the Background Image's source fill row by row, solving for alpha at each height. The answer came back alpha = y, near enough exactly — 0.019 at 2% of the height, 0.5 at the middle, 0.973 at 98%. That is a plain linear-gradient and the four stops were describing a curve that is not there. The collection names no scrim variable for this screen at all, so this is a measurement, not a token — which is why it lives in this block. */ --paywall-wall-ramp: linear-gradient(to bottom, #00101500 0%, #001015 100%); /* Motion. Not in the collection — the file has no motion variables. */ --dur-focus: 180ms; --dur-screen: 420ms; --dur-fade: 260ms; --ease-focus: cubic-bezier(0.22, 0.80, 0.28, 1); --ease-screen: cubic-bezier(0.32, 0.72, 0.24, 1); }