Booleans

Remix this template to create a similar design — same sections, layout, animations, colors, and typography.

A landing page for a feature-flag platform. Off-white canvas, electric blue with red and teal accents, Instrument Serif display over Geist.

core colors

typefaces

tokens

agent.kombai.com/kombai-inspiration-library/templates/booleans/index.html

Palette

The system's color tokens.

blue

#1E7FFF

yellow

#F5C842

red

#FF4545

teal

#2ECAAD

green

#2CC26E

surface

#0D0D0F

surface-2

#141417

surface-light

#FAFAFA

card

#FFFFFF

text

#1A1A1A

text-muted

#666666

text-faint

#888888

on-dark

#FFFFFF

border-light

RGBA(0,0,0,0.08)

border-dark

RGBA(255,255,255,0.07)

syntax-keyword

#C792EA

syntax-string

#C3E88D

syntax-fn

#82AAFF

syntax-prop

#F07178

chart-grad

LINEAR-GRADIENT(180DEG, RGBA(30,127,255,0.28), RGBA(30,127,255,0))

Typography

Type tokens — family, size.

heroThe quick brown fox jumps'Instrument Serif', Georgia, serif
clamp(72px, 12vw, 160px)

displayThe quick brown fox jumps'Instrument Serif', Georgia, serif
clamp(52px, 8vw, 112px)

h2The quick brown fox jumps'Geist', system-ui, sans-serif
clamp(36px, 5vw, 60px)

eyebrowThe quick brown fox jumps'Geist', system-ui, sans-serif
12px

bodyThe quick brown fox jumps'Geist', system-ui, sans-serif
18px

monoThe quick brown fox jumps'Geist Mono', 'Fira Code', monospace
14px

Spacing & Shape

Layout spacing tokens.

Token	Value	Preview
xs	4px
sm	8px
md	16px
lg	24px
xl	32px
xxl	40px
section	120px

Border Radius

Corner rounding tokens.

Token	Value	Preview
sm	8px
md	16px
pill	99px
full	9999px

design.md

The system as one file your coding agent can read and build from.

design.mdreadable by AI agents

tokens (raw)

name: booleans-design
version: alpha
description: >
  A developer-tool landing page for a feature-flag product, built on a light
  porcelain surface (#fafafa) bookending a full-bleed dark Spline hero and a
  dark code section. The signature move pairs an editorial italic serif display
  (Instrument Serif) against Geist's clean UI sans and Geist Mono for code,
  over a five-voltage brand palette — electric blue #1E7FFF leads, with amber,
  red, teal and green doing semantic and accent duty. Soft 16px-radius cards,
  hand-built mock UI visuals (no stock icons), blurred brand-color glow blobs,
  and a live data-driven flag toggle define the geometry and the interactivity.
colors:
  # Brand / Voltages
  blue: '#1E7FFF'      # primary accent — eyebrows, CTAs, links, chart line, active states
  yellow: '#F5C842'    # rollout slider fill/handle, glow blob
  red: '#FF4545'       # kill-switch label, danger accent, glow blob
  teal: '#2ECAAD'      # chip values, targeted-release accent
  green: '#2CC26E'     # live/positive metrics, savings value, pulse dot
  # Surface
  surface: '#0d0d0f'   # near-black — hero bg, dark code section, primary buttons
  surface-2: '#141417' # raised dark panel — code card
  surface-light: '#fafafa' # page surface — body, bento/flag/cta sections
  card: '#ffffff'      # light card fill — bento cards, mockups
  # Text
  text: '#1a1a1a'      # body text on light
  text-muted: '#666666' # subheads, card body copy
  text-faint: '#888888' # captions, metric labels
  on-dark: '#ffffff'   # text on dark surfaces
  # Hairlines
  border-light: 'rgba(0,0,0,0.08)'   # light card borders
  border-dark: 'rgba(255,255,255,0.07)' # dark panel borders
  # Syntax (Material Palenight-ish)
  syntax-keyword: '#c792ea'  # purple keywords
  syntax-string: '#c3e88d'   # green strings / flag names
  syntax-fn: '#82aaff'       # blue function/class
  syntax-prop: '#f07178'     # coral props / tags
  # Gradient
  chart-grad: 'linear-gradient(180deg, rgba(30,127,255,0.28), rgba(30,127,255,0))' # chart area fill
typography:
  hero:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontSize: clamp(72px, 12vw, 160px)
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.03em
    fontStyle: italic
  display:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontSize: clamp(52px, 8vw, 112px)
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -0.02em
    fontStyle: italic
  h2:
    fontFamily: "'Geist', system-ui, sans-serif"
    fontSize: clamp(36px, 5vw, 60px)
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.02em
  eyebrow:
    fontFamily: "'Geist', system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.6
    letterSpacing: 0.18em
    textTransform: uppercase
  body:
    fontFamily: "'Geist', system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
  mono:
    fontFamily: "'Geist Mono', 'Fira Code', monospace"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.8
rounded:
  sm: 8px
  md: 16px
  pill: 99px
  full: 9999px
spacing:                      # base unit 4px; common rhythm 8/12/16/24/32/40
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 40px
  section: 120px
components:
  btn-primary:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-dark}'
    typography: '{typography.body}'
    rounded: '{rounded.sm}'
    padding: '12px 24px'
    # hover: bg #2a2a30, translateY(-1px)
  btn-secondary:
    backgroundColor: 'transparent'
    textColor: '{colors.text}'
    border: '1px solid rgba(0,0,0,0.15)'
    rounded: '{rounded.sm}'
    padding: '12px 24px'
  hero-cta:
    backgroundColor: '{colors.blue}'
    textColor: '{colors.on-dark}'
    rounded: '{rounded.sm}'
    padding: '14px 28px'
    # hover: bg #0d6de8
  bento-card:
    backgroundColor: '{colors.card}'
    border: '1px solid {colors.border-light}'
    rounded: '{rounded.md}'
    padding: '32px'
    # hover: box-shadow 0 8px 32px rgba(0,0,0,0.06)
  code-card:
    backgroundColor: '{colors.surface-2}'
    border: '1px solid {colors.border-dark}'
    rounded: '{rounded.md}'
    padding: '0'
  chip:
    backgroundColor: '{colors.card}'
    textColor: '{colors.teal}'
    typography: '{typography.mono}'
    border: '1px solid rgba(0,0,0,0.09)'
    rounded: '6px'
  big-toggle:
    trackColor: '#e0e0e0'      # on: {colors.blue}
    knobColor: '{colors.card}'
    rounded: '{rounded.pill}'
    # track 80x44, knob 36px, knob springs cubic-bezier(0.34,1.56,0.64,1)
motion:
  pulse: 'live dots — opacity 1 → 0.35, 2s ease infinite'
  toggle-knob: 'transform translateX(36px) over 0.3s cubic-bezier(0.34,1.56,0.64,1) (spring overshoot)'
  toggle-track: 'background 0.3s ease'
  savings-reveal: 'grid-template-rows 0fr → 1fr over 0.35s cubic-bezier(0.16,1,0.3,1)'
  glow-shift: 'flag glow blobs swap color over 0.5s ease when flag turns on'
  btn-hover: 'all 0.2s ease, translateY(-1px) lift'
  card-hover: 'border-color + box-shadow 0.2s'
icons:
  library: none — hand-built CSS/SVG visuals + Unicode arrows (→)
  style: bespoke mock-UI primitives (toggles, sliders, chips, sparkline SVG)
  sizes: { dot: 7px, mock-dot: 10px, divider-dot: 10px }
  color: '{colors.blue}'

Booleans

booleans-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Booleans is a feature-flag developer-tool landing page that opens on a full-bleed dark Spline 3D hero (#0d0d0f) and closes on the same light porcelain surface (#fafafa) it uses throughout the marketing body — a light/dark/light/dark/light rhythm that keeps the dark code section feeling like a deliberate spotlight. The signature voice is the pairing of an editorial italic serif (Instrument Serif) for headlines against the crisp, developer-flavored Geist sans for UI and Geist Mono for everything code-adjacent. Color is a five-voltage system led by electric blue #1E7FFF, with amber #F5C842, red #FF4545, teal #2ECAAD, and green #2CC26E carrying semantic and accent roles. The geometry is soft — 16px card radius, 8px control radius, fully rounded toggles and pills — and every feature is illustrated with a hand-built mock UI (a fake app window, a rollout slider, a kill switch, key/value chips, a live SVG sparkline) rather than stock icons. Depth comes from blurred brand-color glow blobs drifting behind the light sections and soft low-opacity shadows on cards and mockups. The standout move is a live, interactive flag toggle whose single data-flag attribute rewires the whole section's color, copy, and inline mock checkout at once.

Colors

Brand / voltages. Blue #1E7FFF (--blue) is the primary accent: eyebrows, hero CTA, links, chart line/dot, active code tab, inline code, and all "on" states. Yellow #F5C842 (--yellow) is the rollout slider's fill and handle. Red #FF4545 (--red) powers the kill-switch label and a danger glow. Teal #2ECAAD (--teal) colors chip values for targeted releases. Green #2CC26E (--green) marks live/positive signals — pulse dots, deltas, and savings.

Surface. Near-black #0d0d0f (--surface) is the hero background, the dark code section, and the fill of primary/CTA buttons. #141417 (--surface-2) is the raised code card. The page surface is #fafafa (--surface-light); light cards and mockups are pure #ffffff.

Text. Body text is #1a1a1a; subheads/card copy are #666; captions and metric labels are #888/#aaa. On dark surfaces text is #fff and white at 72%/50%/38% opacity for descending hierarchy.

Hairlines. Light borders are rgba(0,0,0,0.08) (--border-light); dark panel borders are rgba(255,255,255,0.07) (--border-dark).

Syntax. The hand-rolled code highlighter is a Material-Palenight-ish set: keywords #c792ea, strings/flag-names #c3e88d, functions #82aaff, props/ tags #f07178.

Gradient. The impact-chart area fills with a vertical blue fade, #1E7FFF at 28% opacity down to 0%.

Typography

Three Google-Fonts families loaded in one request: Geist (400–700) for UI and body, Geist Mono (400–600) for code/labels, and Instrument Serif (400, italic) for display headlines. Geist is Vercel's developer-tool typeface; all three are open-source so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
hero	clamp(72→160px)	400 italic	1.0	-0.03em	Hero "Booleans" headline
display	clamp(52→112px)	400 italic	1.02	-0.02em	CTA finish headline, italic logos
h2	clamp(36→60px)	700	1.1	-0.02em	Section headlines
eyebrow	12px	600	1.6	0.18em, uppercase	Section eyebrows
body	18px	400	1.6	—	Subheads, card body
mono	14px	500	1.8	—	Code, badges, chips, captions

Layout

Base unit is 4px; the working rhythm is 8 / 12 / 16 / 24 / 32 / 40px with 120px vertical section padding (80px on mobile). Content centers in a 1200px container with 40px side padding (24px under 960px). The hero is a full-viewport (100vw × 100vh) Spline iframe with a centered, pointer-events- none text overlay. The features section is an asymmetric 3-column bento grid (16px gaps) with a 2-wide intro card, a 2-row-tall card, two small cards, and a full-width bottom card — collapsing to 2-col then 1-col. The live-flag section is a two-column split (controls left, mockup right, 80px gap). Whitespace is generous and the layout breathes.

Elevation & Depth

Depth is soft and atmospheric, not heavy. Cards rest on 1px hairline borders and lift on hover to 0 8px 32px rgba(0,0,0,0.06). Mockups carry slightly stronger shadows — the mock app window uses 0 4px 24px rgba(0,0,0,0.10) plus a 1px ring, and the flag mockup 0 16px 56px rgba(0,0,0,0.08). The big toggle track has an inset shadow; knobs cast small drop shadows. The dominant depth signature is the blurred brand-color glow blobs (filter: blur(90–110px), ~18–22% opacity) drifting behind the flag and CTA sections.

Shapes

Soft and rounded throughout. Cards and dark panels use 16px (--radius); buttons and code-bar tags use 8px (--radius-sm); small chips and mock chrome use 4–10px. Toggles, sliders, pills, and all dots are fully rounded (99px / 50%). Nothing is brutally squared — the rounded vocabulary echoes the soft 3D forms of the Spline hero.

Components

btn-primary — fill #0d0d0f, white text, 8px radius, 12px 24px; hover #2a2a30 + 1px lift. Label e.g. "Start free →".
btn-secondary — transparent, #1a1a1a text, 1px rgba(0,0,0,0.15) border, 8px radius. Label "Read the docs".
hero-cta — blue #1E7FFF fill, white, 8px radius, 14px 28px; hover #0d6de8.
bento-card — white fill, 1px rgba(0,0,0,0.08) border, 16px radius, 32px padding; per-card tinted visual wells keyed by data-accent.
code-card — #141417 fill, dark hairline, 16px radius, max-width 680px; language tabs + editor file bar + line-number gutter + hand-tokenized code.
chip — white key/value pill, mono, teal value, 6px radius, light border.
big-toggle — 80×44 track (#e0e0e0 → blue on), 36px white knob with spring overshoot; ARIA role="switch".
rollout slider / kill switch / mock app — bespoke CSS mock-UI primitives used as feature illustrations.

Motion

Animations are subtle and purposeful. pulse (opacity 1↔0.35, 2s) breathes on all LIVE dots. The hallmark motion is the flag toggle: clicking flips data-flag on the section, and in one ~300–360ms beat the knob springs across (cubic-bezier(0.34,1.56,0.64,1)), the track turns blue, the glow blobs swap to teal/blue (0.5s), a savings row expands via grid-template-rows: 0fr→1fr (0.35s cubic-bezier(0.16,1,0.3,1)), and the mock checkout's version, total, and CTA all update. Buttons lift translateY(-1px) on 0.2s hover; cards transition border + shadow.

Iconography

No icon library. All "icons" are bespoke — CSS-built mock-UI primitives (toggle tracks, slider handles, traffic-light dots, key/value chips) and a hand-drawn inline SVG sparkline with gradient area, dashed marker line, and a blue end dot. Directional cues use the Unicode arrow →. Decorative dots run 7–10px; the brand-color CTA divider uses three 10px dots in blue/yellow/red.

Do's and Don'ts

Do lead with electric blue #1E7FFF and reserve yellow/red/teal/green for their semantic roles (rollout / danger / targeting / live-positive).
Do pair italic Instrument Serif headlines with Geist UI text and keep all code, badges, and metrics in Geist Mono.
Do illustrate features with hand-built mock UI on tinted wells, not stock icons.
Do keep the light/dark/light section rhythm so the dark code section reads as a spotlight.
Don't harden the geometry — keep the 16/8px radii and fully-round toggles and dots.
Don't add heavy drop shadows; depth comes from hairlines, soft shadows, and blurred glow blobs.
Don't key flag-state visuals off anything but the single data-flag attribute — the whole transformation should land as one cohesive moment.

Known Gaps

The hero visual is a hosted Spline 3D scene (iframe src), not authored CSS; its exact colors/motion live in the external scene, not this file.
Section background rhythm is read from class rules; the --surface near-black and #fafafa are exact, but the Spline scene's interior palette is external.
chart-grad is described as the equivalent CSS gradient; in the markup it is an SVG <linearGradient> (#1E7FFF 28%→0%).