Keen Waves - Brand Design Code 2026

Machine Context 00 · LLM Brand Reference

keenwaves-brand.v2026

Achromatic Ramp (CSS vars)

--void	#060607 · deepest black, wells
--ink	#0A0A0B · page base (flat)
--carbon	#0F0F11 · raised panel
--graphite	#1C1C20 · card fill
--ash	#28282E · hover fill
--steel	#3A3A42 · muted mark
--smoke	#56565F · disabled text
--mist	#84848D · tertiary text
--fog	#A8A8B0 · secondary text
--haze	#CACAD0 · body text
--frost	#E6E6EA · strong text
--snow	#F4F4F6 · headings
--pure	#FFFFFF · light accent / CTA

Page Surface (FLAT INK)

body background	Flat #0A0A0B. No gradient, no hue. The wave moves on it.
texture	3.5% film grain (SVG noise) + 1.5% hairline grid, masked at top.
nav	TRANSPARENT. No bar. Wave mark + wordmark only.
sections	Transparent. Translucent-white cards float on ink.
cards	rgba(255,255,255,0.02–0.07) only. Never solid grey blocks.
borders	Hairline rgba(255,255,255,0.08). One pixel. Always.

Typography

Brand / Hero	Space Grotesk 600, -2% tracking, --pure, flat (no glow)
Display	Space Grotesk 600, line-height 1.05, --pure
H1 / H2	Space Grotesk 600/500, tight tracking
Body	Inter 400, line-height 1.6–1.7, --haze
Eyebrow / Label	JetBrains Mono 500, +18% tracking, UPPERCASE, --mist
Code / Data	JetBrains Mono 400, --fog

The Wave (Signature System)

essence	Layered sine waves, white strokes on ink, animated phase.
layers	4–6 stacked. Back layers low opacity, front layer brightest. Opacity carries depth, no glow.
color	White only. Opacity carries depth, not hue.
motion	Continuous horizontal drift. Slow, calm, ~0.02 phase/frame.
placement	Hero background, section dividers, mark, loaders, empty states.
reduced-motion	Renders one static frame. Never strobes.

Component Patterns

Brand name: "KEEN WAVES", Space Grotesk 600, uppercase, +12% tracking, paired with the 2-stroke wave mark.
Primary CTA: solid --pure white button, ink text. The only fully-lit surface on the page.
Secondary CTA: hairline outline, transparent fill.
Cards: rgba(255,255,255,0.02) fill, 1px hairline border, top light edge.
Inputs: dark translucent, focus = 3px soft white ring.
Live dot: pure white, soft livePulse ring.
Loaders: a single wave drawing itself, or a thin orbit ring.

Identity Rules · Always

Achromatic. Greys from ink to white only. Light is the accent.
Flat ink canvas. The wave is the one living element.
Hairline borders, generous whitespace, dramatic type scale.
Headings in Space Grotesk, body in Inter, data in JetBrains Mono.
Primary button is pure white. One lit object per view.
Motion is calm and continuous. It drifts, never bounces.

Identity Rules · Never

No hue. Ever. No blue, no cyan, no gradient color. Achromatic is the brand.
No gradient page background. The canvas is flat ink.
No drop shadows, no glows. Depth is a 1px hairline, never a blur.
No emoji, no stock gloss, no AI-default purple/teal sheen.
No bouncy / springy motion. No confetti. No skeuomorphism.
No em-dashes. No Title Case headers. No jargon.

Voice & Copy

Tone: keen, quiet, exact. Confident without volume.
Headlines: short, declarative. "Signal in motion." Not questions.
Metaphor: the wave = signal, frequency, rhythm, clarity through noise.
CTAs: precise verbs. "Start", "See it move", "Tune in".
Numbers carry weight; never decorate with adjectives.

keenwaves-tokens.json · full token reference

{ "brand": "Keen Waves", "domain": "keenwaves.com", "version": "2026.1", "theme": "Achromatic · flat ink canvas, white living wave, light as the only accent", "narrative": "Signal in motion: clarity drawn out of noise, one keen wave at a time", "pageBackground": "MANDATORY: flat #0A0A0B. No gradient. No hue. Wave animates on top.", "colors": { "void": "#060607", "ink": "#0A0A0B", "carbon": "#0F0F11", "graphite": "#1C1C20", "ash": "#28282E", "steel": "#3A3A42", "smoke": "#56565F", "mist": "#84848D", "fog": "#A8A8B0", "haze": "#CACAD0", "frost": "#E6E6EA", "snow": "#F4F4F6", "pure": "#FFFFFF" }, "accent": "light · #FFFFFF only. No chromatic accent, no glow bloom.", "surfaces": { "s1": "rgba(255,255,255,0.022)", "s2": "rgba(255,255,255,0.045)", "s3": "rgba(255,255,255,0.07)", "line": "rgba(255,255,255,0.08)" }, "signature": { "name": "The Living Wave", "render": "canvas, 4-6 stacked sine layers, white strokes, drifting phase", "front": "brightest layer, opacity only · no shadowBlur", "reducedMotion": "single static frame" }, "fonts": { "display": "Space Grotesk 600 · brand, headings", "body": "Inter 400/500/600 · body, UI", "mono": "JetBrains Mono 400/500 · labels, data, code" }, "radius": { "sm": "6px", "md": "10px", "lg": "14px", "xl": "20px" }, "motion": { "durations": "120/200/320/600ms", "ease": "cubic-bezier(0.2,0.8,0.2,1)" }, "rules": { "never": ["any-hue", "gradient-page-bg", "drop-shadows", "text-glows", "gradient-accents", "emoji", "bouncy-motion", "skeuomorphism", "em-dashes", "jargon"], "always": ["achromatic", "flat-ink-canvas", "living-wave-signature", "hairline-borders", "white-primary-cta", "calm-continuous-motion", "space-grotesk-headings"] } }

02 The Wave · Signature System

The Living Wave · canvas signature

White light, drifting on ink.

The core rule

Where other brands lean on a logo, Keen Waves leans on motion. The wave is the brand expressed as a system, not a static mark: layered white sine curves drifting across the flat ink canvas. It appears in the hero, behind heroes in product, as the loader, as the empty state, as section dividers. It is always white on ink, always calm, never colored, never frantic.

Anatomy

Layers: 4 to 6 stacked sine paths. More layers = more depth, never more color.
Opacity ramp: back layers 6–12%, front layer 60–90%. No glow.
Amplitude: each layer slightly different; they interfere, never sync perfectly.
Wavelength: long and lazy. Roughly 1.2–2.0 periods across the viewport.
Stroke: 1–2px, round caps. The peak layer is the brightest by opacity, never by glow.

Motion

Drift: phase advances ~0.012–0.02 per frame. Slow enough to feel ambient.
Each layer: its own speed and direction, so the field breathes.
No bounce, no easing pops. The wave never reacts abruptly.
Reduced motion: draw one frozen frame. The composition still reads.
Performance: single canvas, requestAnimationFrame, DPR-aware, pauses off-screen.

wave-layer.js · reference

function drawWave(ctx, w, h, t) {
  const layers = [
    { amp: 26, len: 0.7, speed: 0.012, y: 0.62, op: 0.85, glow: 0 },
    { amp: 34, len: 0.5, speed: 0.008, y: 0.66, op: 0.30, glow: 0  },
    { amp: 46, len: 0.4, speed: 0.006, y: 0.70, op: 0.14, glow: 0  },
    { amp: 60, len: 0.3, speed: 0.004, y: 0.74, op: 0.07, glow: 0  },
  ];
  for (const L of layers) {
    ctx.beginPath();
    for (let x = 0; x <= w; x += 6) {
      const y = h * L.y + Math.sin(x * 0.006 * L.len + t * L.speed) * L.amp;
      x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
    }
    ctx.strokeStyle = `rgba(255,255,255,${L.op})`;  // light only
    ctx.shadowColor = 'rgba(255,255,255,0.5)';
    ctx.shadowBlur = L.glow;
    ctx.lineWidth = 1.4;
    ctx.stroke();
  }
}

11 Looking human, not AI-made

The test

Every Keen Waves page must pass one test: no one can tell it was generated. AI-slop has a tell, soft glows, blurred drop shadows, gradient sheens, fade-everything motion, and em-dashes in the copy. This brand is flat, crisp and edited. If a detail exists only to look "polished", cut it.

Kill on sight

Drop shadows and any box-shadow blur. Depth is a 1px hairline, not a soft halo.
Glows on text and numbers (text-shadow: 0 0 Npx). Big type stands on its own.
Gradient accent bars and gradient-to-transparent hairlines. One solid flat line instead.
A glowing wave (shadowBlur). The wave is a clean stroke; opacity carries depth.
Em-dashes in body copy. Rewrite as "Label. Detail." or use a colon.
Purple/teal sheen, glassmorphism, inner highlights, fake 3D, springy motion.

Keep instead

Flat ink canvas, hairline borders, generous whitespace.
Crisp edges. State changes via border or fill, never a blur.
Film grain plus a faint grid. Grain reads as designed, not generated.
One lit object per view: the pure-white primary CTA.
Solid flat dividers and accent strokes in --steel or --line.
Editorial, Swiss restraint. If it looks like a template, it is wrong.

Ship checklist

Before publishing, grep the source: every box-shadow and text-shadow is none or a 1px hairline; no linear-gradient(... transparent) used as a visible accent; no — in visible text. Open it at 375px and on desktop, then read it as a stranger: would a human designer ship this, or does it smell generated?

Signal in motion.
Noise, gone quiet.

Voice · do

Voice · don't

Kill on sight

Keep instead

Signal in motion.Noise, gone quiet.

Voice · do

Voice · don't

Kill on sight

Keep instead

Signal in motion.
Noise, gone quiet.