Color
Tap any swatch to copy its hex. Usage counts are literal occurrences in the production CSS — the palette is ranked by how the brand actually behaves, not by how a deck describes it.
Core — measured
Accent & tint — measured
The AI extension — one hue, derived
Why this color: Signal Cyan sits on SETT's own blue hue (~200°) pushed to maximum luminance and chroma — so it reads as native to the brand, not bolted on. It carries the AI register (energy, live-system, signal) without touching the purple-gradient cliché. It is the only new hue. One addition, used sparingly, is a system; three additions is a rebrand.
Typography
Kumbh Sans
True variable font, 100–900. Every heading, every paragraph, every UI label. Because the axis is real, weights are honest — the browser never fakes one.
OSWALD
Condensed. Reserved for uppercase eyebrows and large numerals only. Never body copy, never a full headline — it exists to make numbers and labels feel engineered.
Scale — fluid, clamp-based (no breakpoints needed)
Page title
Section heading
Subsection
Body copy runs at a fluid base with a 68-character measure and text-wrap: pretty — no orphans, no rivers, no manual line breaks.
The Typography Law. font-synthesis: none is set globally — the browser is forbidden from faking a weight. Hierarchy comes from size first. Headings cap at 600, never 700+. Body emphasis is 600 + accent color. Kumbh Sans and Oswald both ship real cuts, so every weight you see is a drawn weight.
The mark
Rules. Official SVG, pulled from production — never redrawn, never retyped. Clear space on all sides equals the height of the "k". Minimum width 160px. The mark is monochrome by design: white on dark, charcoal on light, Signal Cyan only on near-black for AI surfaces. Never place it on a busy photo, never recolor it into the green, never stretch it.
Components
Green is the commercial CTA. Signal Cyan marks anything AI-driven. One primary per view.
Coral is the rarest color in the system — reserved for a genuine flag.
Motion
Transform and opacity only — GPU-composited, never a layout-triggering property. Scroll reveals use the native animation-timeline: view() where supported (zero JavaScript), with an IntersectionObserver fallback. Everything collapses instantly under prefers-reduced-motion.
Timing. One house ease: cubic-bezier(.22,1,.36,1) — decisive, no bounce. Fast 160ms for state, 320ms base, 620ms for entrances. If motion doesn't communicate something, it doesn't ship.
Inversion
Add .on-dark to any section. Charcoal ground, Signal Cyan for links and eyebrows, elevated cards lift to #47433F. This is the default treatment for AI-forward surfaces.
Inside
What we run on ourselves.
Our customers
What we deliver.
The market
What buyers ask for.
Refuses
- Purple→blue "AI" gradients — the single most exhausted visual cliché in the category.
- Faux-bold.
font-synthesis:noneis global; a fake weight is a bug. - A second new hue. Signal Cyan is the extension — the whole extension.
- Retyped or redrawn logos. Official SVG only.
- Stock photos of robots, glowing brains, or circuit-board humans.
- Animation that decorates instead of communicating.
- Every value through
var(--token)— no inline hex, ever. - Size before weight for hierarchy.
- Warm neutrals for large fields; pure white reserved for cards.
- 4.5:1 contrast minimum on body text, verified not assumed.
- Reduced-motion honored on every animation.
- Mobile checked first — the fluid scale means it just works.