--- version: alpha name: Terminal Industries description: "A surveyed white plain, a deep pine night, one acid switch." colors: on-surface-variant: "rgba(5, 36, 36, 0.7)" on-surface: "rgba(5, 36, 36, 0.05)" outline: "#C2C2C2" primary: "#ABFF02" surface: "rgba(255, 255, 255, 0.1)" pine: "#052424" white: "#FFFFFF" light-light-gray: "#DDDDDD" dirty-white: "#F0F0F0" dark-gray: "#7F7F7F" rule-gray: "#979797" band: "#1D1D1D" black: "#000000" ink-15: "rgba(5, 36, 36, 0.15)" white-60: "rgba(255, 255, 255, 0.6)" white-30: "rgba(255, 255, 255, 0.3)" typography: sequence-display: fontFamily: SuisseIntl fontSize: 109.997px fontWeight: 400 lineHeight: 104.497px letterSpacing: -1.46667px display: fontFamily: SuisseIntl fontSize: 90.0096px fontWeight: 400 lineHeight: 90.0096px letterSpacing: -3.6px heading-2: fontFamily: SuisseIntl fontSize: 63.9936px fontWeight: 400 lineHeight: 67.1933px letterSpacing: -0.853333px heading-3: fontFamily: SuisseIntl fontSize: 46.0032px fontWeight: 400 lineHeight: 55.2038px letterSpacing: -0.613333px title: fontFamily: SuisseIntl fontSize: 46px fontWeight: 400 lineHeight: 55.2px letterSpacing: -0.46px heading-4: fontFamily: SuisseIntl fontSize: 30px fontWeight: 400 lineHeight: 37.5px letterSpacing: -0.3px proof-stat: fontFamily: SuisseIntl fontSize: 36px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0em lead: fontFamily: SuisseIntl fontSize: 23.0016px fontWeight: 400 lineHeight: 28.982px letterSpacing: -0.306667px body: fontFamily: SuisseIntl fontSize: 20px fontWeight: 400 lineHeight: 29.2px letterSpacing: -0.2px body-small: fontFamily: SuisseIntl fontSize: 18px fontWeight: 400 lineHeight: 24.3px letterSpacing: 0.36px caption: fontFamily: SuisseIntl fontSize: 16px fontWeight: 400 lineHeight: 20.8px letterSpacing: -0.16px nav: fontFamily: SuisseIntl fontSize: 14px fontWeight: 400 lineHeight: 14px letterSpacing: 0.42px mono-label: fontFamily: Geist Mono fontSize: 11px fontWeight: 400 lineHeight: 13.2px letterSpacing: 1.5px mono-label-tight: fontFamily: Geist Mono fontSize: 11px fontWeight: 400 lineHeight: 8.91px letterSpacing: 1.98px mono-tab: fontFamily: Geist Mono fontSize: 12.9984px fontWeight: 400 lineHeight: 10.5287px letterSpacing: 2.34px rounded: buttons-links-tabs-chat-field-phone-trig: 8px image-frame: 10px card-media: 12px form-panel: 17px calculator-cta-block: 18px feature-tile-solutions-card-expanded-car: 20px feature-image-left-hung: 20px feature-image-right-hung: 0px product-card: 24px slider-track: 100px sections-footer-survey-rules-text-inputs: 0px spacing: 3xs: 5px 2xs: 8px xs: 10.0032px sm: 12px md: 15px lg: 16px xl: 20.0064px 2xl: 24px 3xl: 32px 4xl: 48px 5xl: 64px 6xl: 70px 7xl: 80px 8xl: 120px 9xl: 140px 10xl: 180px 11xl: 230px 12xl: 300px --- # Terminal Industries — Style Reference > A surveyed white plain, a deep pine night, one acid switch. **Theme:** light This is one system alternating two grounds: a white canvas ruled with hairline survey lines carries the argument, and full-bleed bands of black and deep pine drop in for the hero, the product sequence and the close — the same floating header pill and pine footer sit on both, on every page captured. The palette is almost entirely a near-black green on white, with `#ABFF02` rationed to the primary CTA, a list rule and a feature tile: the accent is a switch, not a wash. Type is SuisseIntl everywhere, headlines set at 90.0096px with −3.6px of tracking so the words close into a single mass, weight held at 400 where most systems reach for bold — scale does the shouting. Every button word, eyebrow and column head drops into Geist Mono at 11px tracked to 1.5–1.98px, which is where the whole technical voice lives. Rhythm is generous — 180px of section padding, 230px in the footer — against corners kept tight at 8px for controls and 20–24px for cards. Elevation is nearly absent: a lone pine panel floats on a 40/80 drop shadow, everything else flat. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Pine | `#052424` | `--color-dark-green` | Ink and dark surface both: body copy, headlines on white, the footer fill, the lifted form panel. Green, not neutral — swap it for `#000000` and the brand collapses. | | White | `#FFFFFF` | `--color-white` | The canvas, the ink on every dark band, and the secondary CTA's fill — white reads as a button here, not only as ground. | | Lime | `#ABFF02` | `--color-lime` | The one saturated colour: primary CTA fill, one feature tile, a 3px list rule, the bright stop of the proof gradient. Almost never text — four of its twenty-seven observations. Never a wash. | | Light Light Gray | `#DDDDDD` | `--color-light-light-gray` | Tertiary CTA fill, and the ink of the large character-reveal type on dark. A greyed-back white, not a border colour. | | Light Gray | `#C2C2C2` | `--color-light-gray` | The tab's ink and 1px border, the carousel nav button fill, one feature tile. The utility grey. | | Dirty White | `#F0F0F0` | `--color-dirty-white` | The product card's fill and the calculator submit button — rare enough that a filled tile reads as a card without a shadow. | | Dark Gray | `#7F7F7F` | `--color-dark-gray` | The numbered eyebrow over product-card headings and the muted intro line. Editorial credit ink, never a CTA. | | Rule Gray | `#979797` | `--color-rule-gray` | The survey rules on the white canvas — a fill on 1px divs, not a border property. | | Band | `#1D1D1D` | `--color-band` | The dark gradient section, fading to `rgba(29, 29, 29, 0.75)` at its foot. | | Black | `#000000` | `--color-black` | The sequence backdrop and the black feature section — full-bleed bands carrying imagery, never type. | | Ink 70 | `rgba(5, 36, 36, 0.7)` | `--color-ink-70` | Body copy inside light cards and calculator inputs — the default secondary text on white. | | Ink 05 | `rgba(5, 36, 36, 0.05)` | `--color-ink-05` | Ghost button and active tab fill. The quietest interactive surface in the system. | | Ink 15 | `rgba(5, 36, 36, 0.15)` | `--color-ink-15` | The 1px hairline around card media — the structural line on light cards. | | White 60 | `rgba(255, 255, 255, 0.6)` | `--color-white-60` | The 1px border on the Ask Terminal field and the phone trigger. | | White 30 | `rgba(255, 255, 255, 0.3)` | `--color-white-30` | The underline border on form inputs over dark. | | White 10 | `rgba(255, 255, 255, 0.1)` | `--color-white-10` | Fill behind the Ask Terminal field and phone trigger — glass, not a panel. | | Proof Gradient | `linear-gradient(#64A002, #ABFF02)` | `--gradient-proof` | The proof-point number — the one place lime becomes type. Its `#64A002` floor keeps it readable at 36px on white. | ## Tokens — Typography ### SuisseIntl — the whole voice: display, headings, body, labels and nav, at 400 or 450 unless a character-reveal span pushes it · `--font-primary` - **Substitute:** Suisse Int'l, Neue Haas Grotesk Display, Helvetica Now Display - **Weights:** 400, 450, 500, 600, 700 - **Sizes:** 14px, 16px, 18px, 20px, 23px, 23.0016px, 30px, 36px, 46px, 46.0032px, 63.9936px, 90.0096px, 109.997px - **Line height:** 14px at 14px (1.0) through 104.497px at 109.997px (0.95) — display sits at or below 1.0, body runs 1.20–1.46 - **Letter spacing:** negative above 20px, positive below. −3.6px at 90.0096px, −1.46667px at 109.997px, −0.853333px at 63.9936px, −0.613333px at 46.0032px, −0.46px at 46px, −0.3px at 30px, −0.306667px at 23.0016px, −0.2px at 20px, +0.36px at 18px, +0.42px at 14px - **Role:** display, headings, body, form labels and nav — one family doing every job, separated by scale and tracking rather than by a second face ### Geist Mono — every button word, eyebrow, tab and footer column head; the technical register · `--font-mono` - **Substitute:** Geist Mono, JetBrains Mono, IBM Plex Mono - **Weights:** 400, 600 - **Sizes:** 11px, 12.9984px - **Line height:** 8.91px and 13.2px at 11px; 10.5287px at 12.9984px — sub-unity leading, because these are single lines - **Letter spacing:** 1.5px and 1.98px at 11px; 2.34px at 12.9984px — roughly +0.14em to +0.18em, uppercase in practice - **Role:** button labels, numbered eyebrows, tab labels and footer column heads — the technical layer, never larger than 13px ### Type Scale | Role | Size | Line Height | Letter Spacing | Token | |------|------|-------------|----------------|-------| | Sequence display | 109.997px | 104.497px | -1.46667px | `--text-display-xl` | | Display | 90.0096px | 90.0096px / 85.5091px | -3.6px | `--text-display` | | Heading 2 | 63.9936px | 67.1933px | -0.853333px | `--text-h2` | | Heading 3 | 46.0032px | 55.2038px | -0.613333px | `--text-h3` | | Title | 46px | 55.2px | -0.46px | `--text-title` | | Heading 4 | 30px | 37.5px | -0.3px | `--text-h4` | | Proof stat | 36px | normal | normal | `--text-stat` | | Lead | 23.0016px | 28.982px | -0.306667px | `--text-lead` | | Body | 20px | 29.2px | -0.2px | `--text-body` | | Body small | 18px | 24.3px | 0.36px | `--text-body-sm` | | Caption | 16px | 20.8px | -0.16px | `--text-caption` | | Nav | 14px | 14px | 0.42px | `--text-nav` | | Mono label | 11px | 13.2px | 1.5px | `--text-label` | | Mono label tight | 11px | 8.91px | 1.98px | `--text-label-tight` | | Mono tab | 12.9984px | 10.5287px | 2.34px | `--text-tab` | ## Tokens — Spacing & Shapes **Base unit:** 4px **Density:** comfortable ### Spacing Scale | Name | Value | Token | |------|-------|-------| | 3xs | 5px | `--spacing-3xs` | | 2xs | 8px | `--spacing-2xs` | | xs | 10.0032px | `--spacing-xs` | | sm | 12px | `--spacing-sm` | | md | 15px | `--spacing-md` | | lg | 16px | `--spacing-lg` | | xl | 20.0064px | `--spacing-xl` | | 2xl | 24px | `--spacing-2xl` | | 3xl | 32px | `--spacing-3xl` | | 4xl | 48px | `--spacing-4xl` | | 5xl | 64px | `--spacing-5xl` | | 6xl | 70px | `--spacing-6xl` | | 7xl | 80px | `--spacing-7xl` | | 8xl | 120px | `--spacing-8xl` | | 9xl | 140px | `--spacing-9xl` | | 10xl | 180px | `--spacing-10xl` | | 11xl | 230px | `--spacing-11xl` | | 12xl | 300px | `--spacing-12xl` | `--spacing: 5.128vw` is declared on `:root` *(declared, not painted)* — no census row resolves it. ### Border Radius | Element | Value | |---------|-------| | Buttons, links, tabs, chat field, phone trigger, overlay chip | 8px | | Image frame | 10px | | Card media | 12px | | Form panel | 17px | | Calculator CTA block | 18px | | Feature tile, solutions card, expanded card | 20px | | Feature image, left-hung | 20px 0px 0px 20px | | Feature image, right-hung | 0px 20px 20px 0px | | Product card | 24px | | Slider track | 100px | | Sections, footer, survey rules, text inputs | 0px | ### Shadows | Name | Value | Token | |------|-------|-------| | Panel | `rgba(255, 255, 255, 0.06) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.25) 0px 40px 80px 0px` | `--shadow-panel` | ### Layout - **Page max-width:** `not measured` — sections are full-bleed on a 70px horizontal gutter - **Section gap:** 180px dominant; 300px on the tall content wrapper, 230px in the footer, 140px on dark bands, 120px and 80px on lighter blocks - **Card padding:** 40px product card, 64px 70px solutions card, 64px form panel - **Element gap:** 16px default; 8px and 12px inside controls, 24px and 32px between cards, 48px between column groups ## Components ### Primary CTA Button **Role:** The action the page most wants — carried in lime so it can be found without reading. Built from `.cta-button.cta-button--primary`: an `` filled `#ABFF02` with `#052424` text, Geist Mono 11px/600, line-height 13.2px, tracking 1.5px, padding 8px 27.9936px, radius 8px, border none, shadow none. Horizontal padding runs more than three times the vertical, turning an 11px label into a wide low plate rather than a pill. Lime is the loudest colour here, so this shape appears once per view — a second lime button in the same frame destroys the signal. ### Secondary and Tertiary CTA Buttons **Role:** The two supporting actions that sit beside the lime one without competing. `.cta-button.cta-button--secondary` fills `#FFFFFF` with `#052424` text; `.cta-button.cta-button--tertiary` fills `#DDDDDD` with `#052424` text. Both take the identical Geist Mono 11px/600 label, 13.2px line-height, 1.5px tracking, padding 8px 27.9936px, radius 8px, border none, shadow none. Geometry holds and only luminance changes — the whole hierarchy device is three buttons of one size, ranked by brightness. ### Site Header Bar **Role:** A floating strip carrying navigation, the assistant field and all three CTAs above whatever ground the page is on. `.site-header` paints `#FFFFFF` ink and rides over white canvas, black bands and photography alike. Nav triggers such as `.nav-dropdown-trigger` set SuisseIntl 14px/450, line-height 14px, tracking +0.42px in `#FFFFFF`, 8px between a label and its chevron; `.header-actions` spaces the control cluster on 12px. Its own fill, radius and border are `not measured` — the bar renders as a translucent slab that takes the luminance of whatever passes behind it. ### Ask Terminal Field **Role:** The inline assistant prompt in the header — always available, never modal. `.ai-input-wrapper` is a `
` filled `rgba(255, 255, 255, 0.1)` with a 1px `rgba(255, 255, 255, 0.6)` border, padding 8px 12px, radius 8px, no shadow. Its submit control `.ai-input-submit` inks the arrow at `rgba(255, 255, 255, 0.45)`. The construction is glass — a 10% white fill under a 60% white hairline — so the field takes its colour from what passes behind it. Never give it a solid fill: that translucency is what lets one header sit on a sunset photograph and a black grid alike. ### Tab Control **Role:** Switches the story between gate, yard and dock without moving the page. Two measured variants. Resting `.tab`: a `