--- version: alpha name: Apify description: "A tool bazaar at midnight — one ember counter glowing over near-black shelves." colors: on-surface-variant: "#A3A3A3" on-surface: "#DFDFDF" surface: "#020202" outline: "#2A2A2A" primary: "#FF4A00" panel: "#0F0F0F" graphite: "#1D1D1D" steel: "#454545" raised-night: "#1A1B21" silver: "#D8D8D8" ash: "#888888" signal-white: "#FFFFFF" ink: "#161616" counter-orange: "#F86606" link-blue: "#6B9FFF" badge-navy: "#152447" typography: caption: fontFamily: Inter fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0em label-slug: fontFamily: Inter fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0em body: fontFamily: Inter fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0em body-lg: fontFamily: Inter fontSize: 18px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0em heading-sm: fontFamily: Inter fontSize: 26px fontWeight: 400 lineHeight: 1.3 letterSpacing: 0em heading: fontFamily: Inter fontSize: 40px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0em heading-lg: fontFamily: Inter fontSize: 48px fontWeight: 400 lineHeight: 1.15 letterSpacing: 0em display-sm: fontFamily: GT Walsheim fontSize: 58px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0em display: fontFamily: GT Walsheim fontSize: 72px fontWeight: 400 lineHeight: 1.1 letterSpacing: 0em rounded: micro: 2px segmented-control-small-controls: 6px buttons-actor-cards: 8px icon-tiles: 12px announcement-capsule-large-containers: 16px nav-pills-new-chip: 100px spacing: "2": 2px "4": 4px "8": 8px "12": 12px "16": 16px "24": 24px --- # Apify — Style Reference > A tool bazaar at midnight — one ember counter glowing over near-black shelves. **Theme:** dark Apify's marketing system is a near-black marketplace where the merchandise supplies the color. The canvas is `#020202` — two ticks off true black — and everything on it is drawn in a grey ladder (`#DFDFDF` → `#A3A3A3` → `#888888`) with `#1D1D1D` hairlines doing all the framing. Orange, the brand color, is rationed to the point of ceremony: `#F86606` exists for exactly one element — the live Actor counter in the hero headline — and `#FF4A00` lives only inside the logo mark; neither ever fills a button, because the CTA is *white*. Display type is GT Walsheim at weight 400 from 26px all the way to 72px — scale carries the hierarchy, never boldness — while Inter runs the UI and IBM Plex Mono renders every `owner/actor-name` slug like a terminal path. The one place the page gets loud is inside the Actor cards' icon tiles, where partner brands (TikTok, Instagram, Google Maps) keep their own colors — the marketplace stays monochrome so the inventory can glow. ## Tokens — Colors | Name | Value | Token | Role | |------|-------|-------|------| | Void | `#020202` | `--color-void` | Page canvas, nav, card bodies, trust register — the whole page floats on it | | Panel | `#0F0F0F` | `--color-panel` | One step up: announcement-capsule fill, segmented-control rail, and the sparse dot-grid texture stippled across the hero | | Graphite | `#1D1D1D` | `--color-graphite` | The structural hairline — 1px card borders, the trust-wall crop-frame — and the solid fill of the card metrics strip | | Border | `#2A2A2A` | `--color-border` | Secondary 1px stroke: announcement-capsule outline, control-rail border, icon-tile ring | | Steel | `#454545` | `--color-steel` | Strongest border and the 2px input focus ring (`0 0 0 2px`) | | Raised Night | `#1A1B21` | `--color-raised` | Scanned raised-surface step for overlay chrome (dropdown/menu panels) | | Chalk | `#DFDFDF` | `--color-chalk` | Primary text — headlines, nav links, card titles. Never pure white; white is reserved for the CTA fill | | Silver | `#D8D8D8` | `--color-silver` | Control-rail label text on `#0F0F0F` | | Smoke | `#A3A3A3` | `--color-smoke` | Secondary text — hero subhead, card descriptions, trust-wall heading, the grey star glyphs and grayscale partner wordmarks | | Ash | `#888888` | `--color-ash` | Tertiary text — mono actor slugs, rating counts, inactive nav pills | | Signal White | `#FFFFFF` | `--color-signal-white` | The primary-action fill ("Get started", "Find your Actor") — the single brightest object on the page | | Ink | `#161616` | `--color-ink` | Text on white buttons | | Counter Orange | `#F86606` | `--color-counter-orange` | ONE job: the live tool-counter numerals in the hero ("53,952"). Never a CTA, never a link, never a fill | | Logo Orange | `#FF4A00` | `--color-logo-orange` | The logo mark only — it appears nowhere else on the page | | Link Blue | `#6B9FFF` | `--color-link` | Inline text links and the "New" chip label — the only interactive hue | | Badge Navy | `#152447` | `--color-badge-navy` | Fill of the "New" chip inside the announcement capsule | Apify also ships a complete **light-mode console token system** (~150 CSS variables: neutral/primary/success/warning/danger ramps, five plan-tier fills, eight named data-viz hue triads, a five-step shadow stack, and actor-schema field-type colors). That is the product-UI palette, not the marketing page — it is preserved verbatim in Quick Start rather than tabled here. ## Tokens — Typography ### GT Walsheim — Display voice: every headline from 26px to the 72px hero counter, always weight 400 — scale does the shouting, weight never does · `--font-display` - **Substitute:** Circular Std, Sofia Pro, Poppins - **Weights:** 400 - **Sizes:** 26px, 40px, 48px, 58px, 72px - **Line height:** ~1.1 at display sizes, ~1.3 at 26px *(inferred from render; scan reports sizes/weights only)* - **Letter spacing:** near-default — the geometric roundness of Walsheim carries the character without tracking tricks - **Role:** Display voice: every headline from 26px to the 72px hero counter, always weight 400 — scale does the shouting, weight never does ### Inter — The UI workhorse: nav links, buttons, body copy, card descriptions, metrics — 400/500 for text, 600–700 for emphasis (650 is the variable-font eyebrow weight) · `--font-body` - **Substitute:** SF Pro Text, Roboto, system-ui - **Weights:** 400, 500, 600, 650, 700 - **Sizes:** 12px, 14px, 16px, 18px - **Line height:** ~1.4–1.55 *(inferred from render)* - **Letter spacing:** default - **Role:** The UI workhorse: nav links, buttons, body copy, card descriptions, metrics — 400/500 for text, 600–700 for emphasis (650 is the variable-font eyebrow weight) ### IBM Plex Mono — The slug voice: every Actor identity renders as `owner/actor-name` in 14px mono Ash — a deliberate terminal-path aesthetic that says "this is a runnable thing" · `--font-mono` - **Substitute:** JetBrains Mono, SF Mono, Menlo - **Weights:** 400 - **Sizes:** 14px - **Line height:** ~1.4 *(inferred from render)* - **Letter spacing:** default mono - **Role:** The slug voice: every Actor identity renders as `owner/actor-name` in 14px mono Ash — a deliberate terminal-path aesthetic that says "this is a runnable thing" ### Type Scale | Role | Size | Line Height | Letter Spacing | Token | |------|------|-------------|----------------|-------| | caption | 12px | 1.4 | — | `--text-caption` | | label / slug | 14px | 1.4 | — | `--text-label` | | body | 16px | 1.5 | — | `--text-body` | | body-lg | 18px | 1.55 | — | `--text-body-lg` | | heading-sm | 26px | 1.3 | — | `--text-heading-sm` | | heading | 40px | 1.2 | — | `--text-heading` | | heading-lg | 48px | 1.15 | — | `--text-heading-lg` | | display-sm | 58px | 1.1 | — | `--text-display-sm` | | display | 72px | 1.1 | — | `--text-display` | *Line heights are inferred from the rendered page; the scan captures sizes and weights only.* ## Tokens — Spacing & Shapes **Base unit:** 4px **Density:** comfortable ### Spacing Scale | Name | Value | Token | |------|-------|-------| | 2 | 2px | `--spacing-2` | | 4 | 4px | `--spacing-4` | | 8 | 8px | `--spacing-8` | | 12 | 12px | `--spacing-12` | | 16 | 16px | `--spacing-16` | | 24 | 24px | `--spacing-24` | ### Border Radius | Element | Value | |---------|-------| | Micro (chips, code spans) | 2px | | Segmented control / small controls | 6px | | Buttons, Actor cards | 8px (pixel-measured on the card corners — not 12px) | | Icon tiles | 12px | | Announcement capsule, large containers | 16px | | Nav pills, "New" chip | 100px | | Avatars / dots | 50% | ### Shadows | Name | Value | Token | |------|-------|-------| | Button crisp | `1px 2px 2.5px -2.5px rgba(8,8,10,0.32), 0.4px 0.8px 1px -1.2px rgba(8,8,10,0.32), 0px 0.5px 1.5px 0px rgba(8,8,10,0.32)` | `--shadow-button` | | Focus ring | `0 0 0 2px #454545` | `--shadow-focus` | | Overlay | `0 16px 40px 0 rgba(0,0,0,0.65)` | `--shadow-overlay` | ### Layout - **Page max-width:** ~1200px content column (cards span 360→1558 at a 1920 viewport) - **Section gap:** ~100–120px - **Card padding:** ~20–24px body, 2px outer wrapper - **Element gap:** 12px between search bar and CTA; ~24px card gutters ## Components ### Primary Button — White Fill **Role:** The commit action: "Get started" in the nav, "Find your Actor" beside the search bar Solid `#FFFFFF` fill, `#161616` Inter 16px weight 500 label, 8px radius, 12px 24px padding, finished with the crisp triple micro-shadow (`--shadow-button`). On a `#020202` page the white rectangle IS the accent — orange is never used for actions. A compact variant runs 8px 16px padding for inline placements. ### Announcement Capsule **Role:** Hero-top news ribbon ("New — Apify AI beta is live. Find and run the right Actor in seconds →") A `#0F0F0F` capsule with a 1px `#2A2A2A` outline and full-round ends, sitting on the dot-gridded canvas. Inside: a `#152447` navy pill chip labeled "New" in Link Blue `#6B9FFF`, then Inter 16px `#DFDFDF` copy, then a small arrow. The navy-on-near-black chip is the quietest possible way to say "new" — no orange, no glow. ### Live Tool Counter Hero **Role:** The headline — a live count of marketplace Actors ("53,952 tools for your AI") GT Walsheim 72px weight 400. The numerals render in Counter Orange `#F86606` (pixel-verified against the scan — this is the counter's hex, distinct from the logo's `#FF4A00`); the words stay Chalk `#DFDFDF`. This is the entire orange budget of the page spent on a single ever-incrementing number — the count is the pitch. ### Actor Search Bar **Role:** The hero's functional centerpiece — type what you want to scrape, find an Actor Input on `#020202` with a visible grey border, `#DFDFDF` 16px text, 8px radius; when focused it carries the 2px `#454545` ring (`--shadow-focus`). Paired to its right with the white "Find your Actor" button at 12px gap. The pairing of a near-invisible field with a white button makes the action unmissable. ### Actor Card **Role:** The marketplace unit — one card per Actor in the 3×2 hero grid Transparent body on the `#020202` canvas, 1px `#1D1D1D` hairline border, **8px radius** (pixel-measured on the corner curve). Top row: a ~40px icon tile, then the Actor name in Inter 16px weight 600 `#DFDFDF` over its slug in IBM Plex Mono 14px `#888888` (`clockworks/tiktok-scraper`). Below: a two-line clamped description in Inter 14px `#A3A3A3`. The card ends in the metrics strip. Cards sit in ~24px gutters with no shadow — the hairline is the whole frame. ### Card Metrics Strip **Role:** The trust footer welded to the bottom of every Actor card A full-width solid `#1D1D1D` strip (the only filled surface in the card), 8px bottom radius. Left: maker avatar dot + name in `#A3A3A3` 14px. Right: a star glyph and rating in **grey** — `#A3A3A3` star, "4.8" with "(339)" count in `#888888` — plus a users icon and run count ("227K"). The stars are never gold; ratings are instrumentation here, not decoration. ### Icon Tile **Role:** The Actor's identity chip in the card top-left ~40px square, 12px radius, ringed by 1px `#2A2A2A`. The tile carries the target platform's own mark in its native brand colors — Instagram's gradient, Google Maps' pin, TikTok's note on a near-black tile. This is the sanctioned color leak: partner brands stay saturated so the monochrome page reads as shelving, not content. ### Global Nav **Role:** Persistent top bar — logo, product menus, auth actions `#020202` background, no border, ~68px tall. Left: the Apify mark (the one home of `#FF4A00`, alongside its green and `#246DFF` blue facets) + white wordmark in bold. Center: Inter 16px `#DFDFDF` dropdown triggers (Product ⌄, Solutions ⌄, Developers ⌄, Resources ⌄, Pricing). Right: "Contact sales" and "Log in" as bare text links, then the white "Get started" button. One filled element in the whole bar. ### Pill Tab / Nav Item **Role:** Hover/selection chrome for nav and tab items Text-only resting state, 100px-radius pill hit-area, 8px 12px padding, Inter 18px weight 400. Active items read `#DFDFDF`, inactive `#888888` — state is carried purely by the grey ladder, no underlines, no accent color. ### Segmented Control Rail **Role:** Category/tab switcher for store browsing sections A `#0F0F0F` rail with 1px `#2A2A2A` border, 6px radius, 4px internal padding, labels in `#D8D8D8` 18px. The 6px-inside-8px radius step keeps nested controls visually tighter than their containers. ### Trust Logo Wall **Role:** Social-proof register — "Trusted by global technology leaders" A **dark** register, pixel-verified: the `#020202` canvas continues straight through it, framed by a thin `#1D1D1D` crop-frame rule (no white panel, no background switch). The heading sits centered in Inter 16px `#A3A3A3`; partner wordmarks (Decathlon, Square…) render as grayscale marks in `#A3A3A3`/`#888888`. Proof is whispered in grey, exactly like the star ratings. ### Section Heading Block **Role:** Opens each below-fold story ("Browse Apify Store →" and section titles) GT Walsheim 400 at 58px/48px in `#DFDFDF`, optionally preceded by a 14px weight-600 eyebrow. Store-wide links ("Browse Apify Store") sit in Inter 16px weight 500 `#DFDFDF` with a trailing arrow — white text, not blue, because they are wayfinding rather than inline links. ## Do's and Don'ts ### Do - Spend `#F86606` on exactly one element per page — the live counter numerals. Its rarity is the drama. - Keep `#FF4A00` inside the logo mark. Two oranges, two jobs, zero overlap. - Make the primary CTA a white `#FFFFFF` rectangle with `#161616` text and the crisp triple micro-shadow — white is the action color on this page. - Set every headline in GT Walsheim weight 400; let 26 → 72px scale carry all hierarchy. - Render Actor slugs in IBM Plex Mono 14px `#888888` — the terminal-path look is identity, not decoration. - Frame cards with 1px `#1D1D1D` hairlines at 8px radius and fill only the metrics strip. - Keep star ratings grey (`#A3A3A3` glyph, `#888888` counts) — instrumentation, not reward stickers. - Let partner marks keep their native colors inside 12px icon tiles ringed in `#2A2A2A`. ### Don't - Never fill a CTA with orange — no orange buttons exist anywhere in this system. - Never render the trust/logo wall as a white panel — it stays on `#020202` inside a `#1D1D1D` crop-frame with grayscale wordmarks. - Never gild the stars — there is no gold in this palette. - Never bold a headline; weight 400 at 72px is the voice, 600+ belongs to 14–16px UI emphasis only. - Never push card radius to 12px+ — cards are 8px; 12px belongs to icon tiles, 16px to the announcement capsule. - Never use pure `#000000` or pure white text — the canvas is `#020202` and text tops out at `#DFDFDF`. - Never add glows or colored shadows — the only shadows are the crisp button triple, the `#454545` focus ring, and the overlay drop. - Never let the console's light-mode blue (`#246dff`) leak into marketing surfaces — on this page blue means the `#6B9FFF` link tint and nothing else. ## Surfaces | Level | Name | Value | Purpose | |-------|------|-------|---------| | 0 | Void Canvas | `#020202` | Page background, nav, card bodies, trust register | | 1 | Panel | `#0F0F0F` | Announcement capsule, control rail, hero dot-grid stipple | | 2 | Graphite | `#1D1D1D` | Hairline borders and the card metrics-strip fill | | 3 | Raised Night | `#1A1B21` | Overlay/dropdown chrome | | Flip | Signal White | `#FFFFFF` | The CTA fill — the only bright surface, reserved for action | ## Elevation Depth is a three-grey luminance ladder (`#020202` → `#0F0F0F` → `#1D1D1D`), stepped so subtly that most of the page reads perfectly flat. Shadows exist but are surgical: a crisp sub-3px triple under white buttons (sharpening the edge rather than lifting it), a 2px `#454545` ring for focus, and one heavy `0 16px 40px rgba(0,0,0,0.65)` drop reserved for true overlays. Cards get no shadow at all — a 1px `#1D1D1D` hairline at 8px radius is their entire third dimension. ## Imagery No photography. The page's only pictures are logos: partner-platform marks in full native color inside the Actor cards' 12px icon tiles (Instagram's gradient, Google Maps' pin, TikTok's note), and the same idea inverted at the trust wall, where enterprise wordmarks are flattened to grayscale `#A3A3A3`. The scan's stray saturated hexes (`#34A853`, `#E01E5A`, `#D97757`, `#FBB800`…) are exactly these third-party marks — none of them are Apify tokens. The one atmospheric flourish is the hero's sparse `#0F0F0F` dot-grid stippled on `#020202`, a graph-paper ghost that reads as "infrastructure" without drawing a single line. ## Layout A single centered column, ~1200px, on an uninterrupted `#020202` full-bleed. The hero stacks announcement capsule → 72px counter headline → two-line 18px `#A3A3A3` subhead → search-bar-plus-white-button pair → a 3×2 grid of Actor cards → a centered "Browse Apify Store →" link. Below, the trust register continues on the same canvas inside a thin `#1D1D1D` crop-frame — the page never changes background color; sections are paced by whitespace and hairlines alone. Nav is a single row with no border, separated from content purely by the dark gap. ## The Orange Ration Two oranges, two contracts. `#FF4A00` is the identity: it lives in the logo mark and nowhere else. `#F86606` is the performance: it colors the live Actor-count numerals in the hero — a number that ticks upward as the marketplace grows — and nothing else on the page. Because the brand color is locked away from buttons, links, and fills, the white CTA inherits all the urgency, and the counter's glow reads like a stock ticker: the single warm element on a cold page, and it's *data*. Any design that puts this orange on a button, a badge, or a heading has broken the system's central law. ## Agent Prompt Guide ## Quick Color Reference - background: `#020202` (panel step `#0F0F0F`) - text: `#DFDFDF` (secondary `#A3A3A3`, tertiary `#888888`) - surface: `#1D1D1D` (metrics strip) / `#1A1B21` (overlay) - border: `#1D1D1D` hairline / `#2A2A2A` secondary / `#454545` focus ring - accent: `#F86606` (hero counter only) / `#6B9FFF` (links) - primary action: `#FFFFFF` fill with `#161616` text — no orange CTAs exist ## Example Component Prompts 1. **Hero counter block**: On a `#020202` canvas stippled with a sparse `#0F0F0F` dot grid, set "53,952 tools for your AI" in GT Walsheim 72px weight 400 — the numerals in `#F86606`, the words in `#DFDFDF`. Below, a two-line Inter 18px `#A3A3A3` subhead, centered. 2. **Actor search pair**: A text input on `#020202` with 8px radius, `#DFDFDF` 16px text, and a `0 0 0 2px #454545` focus ring, beside a white button (`#FFFFFF` fill, `#161616` Inter 16px weight 500, 8px radius, 12px 24px padding, shadow `1px 2px 2.5px -2.5px rgba(8,8,10,0.32), 0.4px 0.8px 1px -1.2px rgba(8,8,10,0.32), 0 0.5px 1.5px rgba(8,8,10,0.32)`) labeled "Find your Actor", 12px gap. 3. **Actor card**: Transparent card on `#020202`, 1px `#1D1D1D` border, 8px radius. Header: 40px icon tile (12px radius, 1px `#2A2A2A` ring) + name in Inter 16px weight 600 `#DFDFDF` over `apify/instagram-scraper` in IBM Plex Mono 14px `#888888`. Two-line description in Inter 14px `#A3A3A3`. Footer: full-width `#1D1D1D` strip with maker name in `#A3A3A3` 14px, a grey `#A3A3A3` star + "4.7" and "(511)" in `#888888`, and a user count "345K" right-aligned. 4. **Announcement capsule**: A `#0F0F0F` capsule with 1px `#2A2A2A` border and fully rounded ends; inside, a `#152447` pill chip labeled "New" in `#6B9FFF` 14px, then "Apify AI beta is live. Find and run the right Actor in seconds" in Inter 16px `#DFDFDF`, then a `#DFDFDF` arrow. Centered above the hero headline. 5. **Trust logo wall**: Keep the `#020202` background — do not switch to white. Draw a thin `#1D1D1D` crop-frame rule around the section, center "Trusted by global technology leaders" in Inter 16px `#A3A3A3`, and lay out enterprise wordmarks as grayscale `#A3A3A3` marks with generous spacing. ## Similar Brands - **Vercel** — the same near-black developer canvas with white-filled CTAs and hierarchy carried by a grey text ladder instead of color. - **Linear** — dark product-marketing register, hairline-bordered cards, and a strict one-accent discipline on a monochrome field. - **Raycast** — dev-tool storefront energy: dark canvas, colorful third-party icons as the only saturation, mono type for identifiers. - **Railway** — infrastructure marketing in near-black with restrained luminance-step surfaces and quiet grey social proof. - **GitHub (dark)** — the marketplace-of-tools pattern: monochrome chrome, grey metadata and counts, partner avatars supplying the color. ## Quick Start ### CSS Custom Properties ```css :root { /* ===== Marketing page (dark) — observed tokens ===== */ /* Colors */ --color-void: #020202; --color-panel: #0F0F0F; --color-graphite: #1D1D1D; --color-border: #2A2A2A; --color-steel: #454545; --color-raised: #1A1B21; --color-chalk: #DFDFDF; --color-silver: #D8D8D8; --color-smoke: #A3A3A3; --color-ash: #888888; --color-signal-white: #FFFFFF; --color-ink: #161616; --color-counter-orange: #F86606; --color-logo-orange: #FF4A00; --color-link: #6B9FFF; --color-badge-navy: #152447; /* Typography — Families */ --font-display: 'GT Walsheim', 'Circular Std', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Typography — Scale */ --text-caption: 12px; --leading-caption: 1.4; --text-label: 14px; --leading-label: 1.4; --text-body: 16px; --leading-body: 1.5; --text-body-lg: 18px; --leading-body-lg: 1.55; --text-heading-sm: 26px; --leading-heading-sm: 1.3; --text-heading: 40px; --leading-heading: 1.2; --text-heading-lg: 48px; --leading-heading-lg: 1.15; --text-display-sm: 58px; --leading-display-sm: 1.1; --text-display: 72px; --leading-display: 1.1; /* Typography — Weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-eyebrow: 650; --font-weight-bold: 700; /* Spacing */ --spacing-unit: 4px; --spacing-2: 2px; --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-24: 24px; /* Border Radius */ --radius-micro: 2px; --radius-control: 6px; --radius-card: 8px; --radius-tile: 12px; --radius-capsule: 16px; --radius-pill: 100px; --radius-round: 50%; /* Shadows */ --shadow-button: 1px 2px 2.5px -2.5px rgba(8, 8, 10, 0.32), 0.4px 0.8px 1px -1.2px rgba(8, 8, 10, 0.32), 0px 0.5px 1.5px 0px rgba(8, 8, 10, 0.32); --shadow-focus: 0 0 0 2px #454545; --shadow-overlay: 0 16px 40px 0 rgba(0, 0, 0, 0.65); /* Layout */ --page-max-width: 1200px; /* ===== Shipped console token system (light-mode product UI) — preserved verbatim ===== */ --swiper-theme-color: #007aff; /* third-party Swiper default */ --color-neutral-text: #1f2123; --color-neutral-text-muted: #3d3f43; --color-neutral-text-subtle: #6d7178; --color-neutral-text-disabled: #c9cbcf; --color-neutral-text-on-primary: #ffffff; --color-neutral-icon-on-primary: #ffffff; --color-neutral-background: #ffffff; --color-neutral-background-muted: #f9f9fa; --color-neutral-background-subtle: #f4f4f5; --color-neutral-background-white: #ffffff; --color-neutral-card-background: #ffffff; --color-neutral-card-background-hover: #ffffff; --color-neutral-border: #d2d3d6; --color-neutral-separator-subtle: #e4e5e6; --color-neutral-hover: #edeeef; --color-neutral-on-surface: rgba(109, 113, 120, 0.12); --color-neutral-disabled: #f4f4f5; --color-neutral-overflow: #e4e5e6; --color-neutral-icon: #4f5257; --color-neutral-icon-subtle: #9ea2a8; --color-neutral-icon-disabled: #bfc1c5; --color-neutral-field-border: #c9cbcf; --color-neutral-action-secondary: #d2d3d6; --color-neutral-action-secondary-hover: #e4e5e6; --color-neutral-action-secondary-active: #d2d3d6; --color-neutral-chip-background: #e4e5e6; --color-neutral-chip-background-hover: #d2d3d6; --color-neutral-chip-background-active: #c9cbcf; --color-neutral-chip-background-disabled: #d2d3d6; --color-neutral-large-tooltip-background: #ffffff; --color-neutral-large-tooltip-border: #e4e5e6; --color-neutral-small-tooltip-text: #ffffff; --color-neutral-small-tooltip-background: #161718; --color-neutral-small-tooltip-border: #1f2123; --color-neutral-overlay: #191b22; --color-neutral-field-background: #f9f9fa; --color-neutral-text-placeholder: #a9acb1; --color-primary-text: #246dff; --color-primary-text-interactive: #246dff; --color-primary-icon: #246dff; --color-primary-action: #246dff; --color-primary-action-hover: #4788ff; --color-primary-action-active: #0043ca; --color-primary-field-border-active: #246dff; --color-primary-border-subtle: #c2d7ff; --color-primary-background: #e0ebff; --color-primary-background-subtle: #f0f5ff; --color-primary-background-hover: #e0ebff; --color-primary-chip-background: #e0ebff; --color-primary-chip-background-subtle: #f0f5ff; --color-primary-chip-background-hover: #e0ebff; --color-primary-chip-text: #0043ca; --color-primary-shadow-active: #c2d7ff; --color-primary-black-action: #242528; --color-primary-black-action-hover: #292b2e; --color-primary-black-action-active: #0a0a0b; --color-primary-black-background: #1b1c1d; --color-primary-black-background-hover: #3d3f43; --color-primary-black-chip-text: #f9f9fa; --color-success-text: #008a27; --color-success-icon: #008a27; --color-success-background: #e4f5e5; --color-success-background-hover: #cfe9d1; --color-success-background-subtle: #e8f9ef; --color-success-background-subtle-hover: #cfe9d1; --color-success-background-subtle-active: #80da8d; --color-success-chip-background: #e4f5e5; --color-success-chip-background-hover: #cfe9d1; --color-success-chip-text: #086e08; --color-success-border: #00ab46; --color-success-border-subtle: #80da8d; --color-success-action: #008a27; --color-success-action-hover: #00ab46; --color-success-action-active: #086e08; --color-warning-text: #a96600; --color-warning-icon: #e39c04; --color-warning-background: #f9f0db; --color-warning-background-hover: #f7dfb1; --color-warning-background-subtle: #f9f6ea; --color-warning-chip-background: #f9f0db; --color-warning-chip-background-hover: #f7dfb1; --color-warning-chip-text: #8c4e02; --color-warning-border: #ca8200; --color-warning-border-subtle: #f5b315; --color-warning-field-border: #f5b315; --color-danger-text: #e3231d; --color-danger-icon: #e3231d; --color-danger-background: #fff0ec; --color-danger-background-hover: #fedad1; --color-danger-background-subtle: #fcf2ef; --color-danger-background-subtle-hover: #fedad1; --color-danger-background-subtle-active: #ffb39f; --color-danger-chip-background: #fff0ec; --color-danger-chip-background-hover: #fedad1; --color-danger-chip-text: #bb0401; --color-danger-border: #fa4d37; --color-danger-border-subtle: #ffb39f; --color-danger-field-border: #fa4d37; --color-danger-action: #e3231d; --color-danger-action-hover: #fa4d37; --color-danger-action-active: #bb0401; --color-special-free-plan-background: #ffc89f; --color-special-starter-plan-background: #ffdd96; --color-special-scale-plan-background: #a1b7ff; --color-special-business-plan-background: #a7f2ed; --color-special-enterprise-plan-background: #bf97ed; --color-special-highlight: #e0ebff; --color-rose-light: #f483b5; --color-rose-base: #c6387d; --color-rose-dark: #781552; --color-rose-text: #b6006b; --color-buttercup-light: #ffdd96; --color-buttercup-base: #f0b21b; --color-buttercup-dark: #c37319; --color-buttercup-text: #a65d00; --color-paprika-light: #e44467; --color-paprika-base: #9b0238; --color-paprika-dark: #4a0018; --color-paprika-text: #ba0044; --color-teal-light: #a7f2ed; --color-teal-base: #30c0bb; --color-teal-dark: #297774; --color-teal-text: #018181; --color-indigo-light: #a1b7ff; --color-indigo-base: #5d85e1; --color-indigo-dark: #365494; --color-indigo-text: #2563c1; --color-slate-light: #c1c5e1; --color-slate-base: #8490c4; --color-slate-dark: #525c85; --color-slate-text: #566087; --color-coral-light: #ffc89f; --color-coral-base: #fa8136; --color-coral-dark: #bb4511; --color-coral-text: #c74000; --color-lavender-light: #bf97ed; --color-lavender-base: #6a14de; --color-lavender-dark: #330276; --color-lavender-text: #6e00f4; --color-bamboo-light: #64cda5; --color-bamboo-base: #12966f; --color-bamboo-dark: #195d46; --color-bamboo-text: #007455; --shadow-1: 1px 2px 2.5px -2.5px rgba(63, 71, 93, 0.13), 0.4px 0.8px 1px -1.2px rgba(63, 71, 93, 0.14), 0px 0.5px 1.5px 0px rgba(63, 71, 93, 0.15); --shadow-2: 4px 8px 10.1px -2.5px rgba(63, 71, 93, 0.12), 1.7px 3.3px 4.2px -1.7px rgba(63, 71, 93, 0.13), 0.7px 1.4px 1.8px -0.8px rgba(63, 71, 93, 0.14), 0.3px 0.5px 0.7px 0px rgba(63, 71, 93, 0.15); --shadow-3: 4.5px 9px 12.1px -2px rgba(63, 71, 93, 0.12), 1.9px 3.9px 5.2px -1.3px rgba(63, 71, 93, 0.13), 0.8px 1.7px 2.3px -0.7px rgba(63, 71, 93, 0.14), 0.3px 0.5px 0.7px 0px rgba(63, 71, 93, 0.15); --shadow-4: 4.7px 9.4px 14.2px -1px rgba(63, 71, 93, 0.12), 2.2px 4.3px 6.5px -0.7px rgba(63, 71, 93, 0.13), 1px 2px 3px -0.3px rgba(63, 71, 93, 0.14), 0.3px 0.5px 0.8px 0px rgba(63, 71, 93, 0.15); --shadow-5: 18.8px 37.5px 39.3px -3.7px rgba(63, 71, 93, 0.06), 12.3px 15.4px 25.8px -3.2px rgba(63, 71, 93, 0.07), 7.7px 15.4px 16.1px -2.7px rgba(63, 71, 93, 0.08), 4.6px 9.1px 9.6px -2.1px rgba(63, 71, 93, 0.09), 2.6px 5.1px 5.4px -1.6px rgba(63, 71, 93, 0.10), 1.4px 2.8px 2.9px -1.1px rgba(63, 71, 93, 0.11), 0.7px 1.5px 1.6px -0.5px rgba(63, 71, 93, 0.12), 0.3px 0.5px 0.5px 0px rgba(63, 71, 93, 0.15); --section-background-texture: url('/img/section-background-texture.svg'); --brand-grid-texture: url('/img/brand/brand-grid-texture.svg'); --brand-hero-background-image: url('/img/brand/hero-background-light.svg'); --actor-schema-field-string-text: #018181; --actor-schema-field-string-background: #EBFBF8; --actor-schema-field-number-text: #8C4E02; --actor-schema-field-number-background: #F9F0DB; --actor-schema-field-boolean-text: #104B37; --actor-schema-field-boolean-background: #DFFFF0; --actor-schema-field-object-text: #4C41C0; --actor-schema-field-object-background: #E8E6F9; --actor-schema-field-array-text: #0043CA; --actor-schema-field-array-background: #E0EBFF; } ``` ### Tailwind v4 ```css @theme { /* Marketing page (dark) — observed tokens */ --color-void: #020202; --color-panel: #0F0F0F; --color-graphite: #1D1D1D; --color-border: #2A2A2A; --color-steel: #454545; --color-raised: #1A1B21; --color-chalk: #DFDFDF; --color-silver: #D8D8D8; --color-smoke: #A3A3A3; --color-ash: #888888; --color-signal-white: #FFFFFF; --color-ink: #161616; --color-counter-orange: #F86606; --color-logo-orange: #FF4A00; --color-link: #6B9FFF; --color-badge-navy: #152447; /* Typography — Families */ --font-display: 'GT Walsheim', 'Circular Std', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* Typography — Scale */ --text-caption: 12px; --leading-caption: 1.4; --text-label: 14px; --leading-label: 1.4; --text-body: 16px; --leading-body: 1.5; --text-body-lg: 18px; --leading-body-lg: 1.55; --text-heading-sm: 26px; --leading-heading-sm: 1.3; --text-heading: 40px; --leading-heading: 1.2; --text-heading-lg: 48px; --leading-heading-lg: 1.15; --text-display-sm: 58px; --leading-display-sm: 1.1; --text-display: 72px; --leading-display: 1.1; /* Spacing */ --spacing-2: 2px; --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-24: 24px; /* Border Radius */ --radius-micro: 2px; --radius-control: 6px; --radius-card: 8px; --radius-tile: 12px; --radius-capsule: 16px; --radius-pill: 100px; --radius-round: 50%; /* Shadows */ --shadow-button: 1px 2px 2.5px -2.5px rgba(8, 8, 10, 0.32), 0.4px 0.8px 1px -1.2px rgba(8, 8, 10, 0.32), 0px 0.5px 1.5px 0px rgba(8, 8, 10, 0.32); --shadow-focus: 0 0 0 2px #454545; --shadow-overlay: 0 16px 40px 0 rgba(0, 0, 0, 0.65); /* Shipped console token system (light-mode product UI) — preserved verbatim */ --color-neutral-text: #1f2123; --color-neutral-text-muted: #3d3f43; --color-neutral-text-subtle: #6d7178; --color-neutral-text-disabled: #c9cbcf; --color-neutral-text-on-primary: #ffffff; --color-neutral-icon-on-primary: #ffffff; --color-neutral-background: #ffffff; --color-neutral-background-muted: #f9f9fa; --color-neutral-background-subtle: #f4f4f5; --color-neutral-background-white: #ffffff; --color-neutral-card-background: #ffffff; --color-neutral-card-background-hover: #ffffff; --color-neutral-border: #d2d3d6; --color-neutral-separator-subtle: #e4e5e6; --color-neutral-hover: #edeeef; --color-neutral-on-surface: rgba(109, 113, 120, 0.12); --color-neutral-disabled: #f4f4f5; --color-neutral-overflow: #e4e5e6; --color-neutral-icon: #4f5257; --color-neutral-icon-subtle: #9ea2a8; --color-neutral-icon-disabled: #bfc1c5; --color-neutral-field-border: #c9cbcf; --color-neutral-action-secondary: #d2d3d6; --color-neutral-action-secondary-hover: #e4e5e6; --color-neutral-action-secondary-active: #d2d3d6; --color-neutral-chip-background: #e4e5e6; --color-neutral-chip-background-hover: #d2d3d6; --color-neutral-chip-background-active: #c9cbcf; --color-neutral-chip-background-disabled: #d2d3d6; --color-neutral-large-tooltip-background: #ffffff; --color-neutral-large-tooltip-border: #e4e5e6; --color-neutral-small-tooltip-text: #ffffff; --color-neutral-small-tooltip-background: #161718; --color-neutral-small-tooltip-border: #1f2123; --color-neutral-overlay: #191b22; --color-neutral-field-background: #f9f9fa; --color-neutral-text-placeholder: #a9acb1; --color-primary-text: #246dff; --color-primary-text-interactive: #246dff; --color-primary-icon: #246dff; --color-primary-action: #246dff; --color-primary-action-hover: #4788ff; --color-primary-action-active: #0043ca; --color-primary-field-border-active: #246dff; --color-primary-border-subtle: #c2d7ff; --color-primary-background: #e0ebff; --color-primary-background-subtle: #f0f5ff; --color-primary-background-hover: #e0ebff; --color-primary-chip-background: #e0ebff; --color-primary-chip-background-subtle: #f0f5ff; --color-primary-chip-background-hover: #e0ebff; --color-primary-chip-text: #0043ca; --color-primary-shadow-active: #c2d7ff; --color-primary-black-action: #242528; --color-primary-black-action-hover: #292b2e; --color-primary-black-action-active: #0a0a0b; --color-primary-black-background: #1b1c1d; --color-primary-black-background-hover: #3d3f43; --color-primary-black-chip-text: #f9f9fa; --color-success-text: #008a27; --color-success-icon: #008a27; --color-success-background: #e4f5e5; --color-success-background-hover: #cfe9d1; --color-success-background-subtle: #e8f9ef; --color-success-background-subtle-hover: #cfe9d1; --color-success-background-subtle-active: #80da8d; --color-success-chip-background: #e4f5e5; --color-success-chip-background-hover: #cfe9d1; --color-success-chip-text: #086e08; --color-success-border: #00ab46; --color-success-border-subtle: #80da8d; --color-success-action: #008a27; --color-success-action-hover: #00ab46; --color-success-action-active: #086e08; --color-warning-text: #a96600; --color-warning-icon: #e39c04; --color-warning-background: #f9f0db; --color-warning-background-hover: #f7dfb1; --color-warning-background-subtle: #f9f6ea; --color-warning-chip-background: #f9f0db; --color-warning-chip-background-hover: #f7dfb1; --color-warning-chip-text: #8c4e02; --color-warning-border: #ca8200; --color-warning-border-subtle: #f5b315; --color-warning-field-border: #f5b315; --color-danger-text: #e3231d; --color-danger-icon: #e3231d; --color-danger-background: #fff0ec; --color-danger-background-hover: #fedad1; --color-danger-background-subtle: #fcf2ef; --color-danger-background-subtle-hover: #fedad1; --color-danger-background-subtle-active: #ffb39f; --color-danger-chip-background: #fff0ec; --color-danger-chip-background-hover: #fedad1; --color-danger-chip-text: #bb0401; --color-danger-border: #fa4d37; --color-danger-border-subtle: #ffb39f; --color-danger-field-border: #fa4d37; --color-danger-action: #e3231d; --color-danger-action-hover: #fa4d37; --color-danger-action-active: #bb0401; --color-special-free-plan-background: #ffc89f; --color-special-starter-plan-background: #ffdd96; --color-special-scale-plan-background: #a1b7ff; --color-special-business-plan-background: #a7f2ed; --color-special-enterprise-plan-background: #bf97ed; --color-special-highlight: #e0ebff; --color-rose-light: #f483b5; --color-rose-base: #c6387d; --color-rose-dark: #781552; --color-rose-text: #b6006b; --color-buttercup-light: #ffdd96; --color-buttercup-base: #f0b21b; --color-buttercup-dark: #c37319; --color-buttercup-text: #a65d00; --color-paprika-light: #e44467; --color-paprika-base: #9b0238; --color-paprika-dark: #4a0018; --color-paprika-text: #ba0044; --color-teal-light: #a7f2ed; --color-teal-base: #30c0bb; --color-teal-dark: #297774; --color-teal-text: #018181; --color-indigo-light: #a1b7ff; --color-indigo-base: #5d85e1; --color-indigo-dark: #365494; --color-indigo-text: #2563c1; --color-slate-light: #c1c5e1; --color-slate-base: #8490c4; --color-slate-dark: #525c85; --color-slate-text: #566087; --color-coral-light: #ffc89f; --color-coral-base: #fa8136; --color-coral-dark: #bb4511; --color-coral-text: #c74000; --color-lavender-light: #bf97ed; --color-lavender-base: #6a14de; --color-lavender-dark: #330276; --color-lavender-text: #6e00f4; --color-bamboo-light: #64cda5; --color-bamboo-base: #12966f; --color-bamboo-dark: #195d46; --color-bamboo-text: #007455; --shadow-1: 1px 2px 2.5px -2.5px rgba(63, 71, 93, 0.13), 0.4px 0.8px 1px -1.2px rgba(63, 71, 93, 0.14), 0px 0.5px 1.5px 0px rgba(63, 71, 93, 0.15); --shadow-2: 4px 8px 10.1px -2.5px rgba(63, 71, 93, 0.12), 1.7px 3.3px 4.2px -1.7px rgba(63, 71, 93, 0.13), 0.7px 1.4px 1.8px -0.8px rgba(63, 71, 93, 0.14), 0.3px 0.5px 0.7px 0px rgba(63, 71, 93, 0.15); --shadow-3: 4.5px 9px 12.1px -2px rgba(63, 71, 93, 0.12), 1.9px 3.9px 5.2px -1.3px rgba(63, 71, 93, 0.13), 0.8px 1.7px 2.3px -0.7px rgba(63, 71, 93, 0.14), 0.3px 0.5px 0.7px 0px rgba(63, 71, 93, 0.15); --shadow-4: 4.7px 9.4px 14.2px -1px rgba(63, 71, 93, 0.12), 2.2px 4.3px 6.5px -0.7px rgba(63, 71, 93, 0.13), 1px 2px 3px -0.3px rgba(63, 71, 93, 0.14), 0.3px 0.5px 0.8px 0px rgba(63, 71, 93, 0.15); --shadow-5: 18.8px 37.5px 39.3px -3.7px rgba(63, 71, 93, 0.06), 12.3px 15.4px 25.8px -3.2px rgba(63, 71, 93, 0.07), 7.7px 15.4px 16.1px -2.7px rgba(63, 71, 93, 0.08), 4.6px 9.1px 9.6px -2.1px rgba(63, 71, 93, 0.09), 2.6px 5.1px 5.4px -1.6px rgba(63, 71, 93, 0.10), 1.4px 2.8px 2.9px -1.1px rgba(63, 71, 93, 0.11), 0.7px 1.5px 1.6px -0.5px rgba(63, 71, 93, 0.12), 0.3px 0.5px 0.5px 0px rgba(63, 71, 93, 0.15); --actor-schema-field-string-text: #018181; --actor-schema-field-string-background: #EBFBF8; --actor-schema-field-number-text: #8C4E02; --actor-schema-field-number-background: #F9F0DB; --actor-schema-field-boolean-text: #104B37; --actor-schema-field-boolean-background: #DFFFF0; --actor-schema-field-object-text: #4C41C0; --actor-schema-field-object-background: #E8E6F9; --actor-schema-field-array-text: #0043CA; --actor-schema-field-array-background: #E0EBFF; } ```