Identity playbook · v1.1 · August 2026
The light prints the type
Kinema is kinetic + cinema. Everything in the identity comes from one image: heavy condensed type in the dark, and a beam of warm light that reveals it. The wordmark is what the light leaves behind.
The idea
Most brands explain themselves. Kinema demonstrates. The site is the proof; the brand is the residue of that demonstration — black, one warm light, one orange fringe where the glass is thick.
Three words govern every decision: dark, directed, sparse. If a layout needs a fourth thing to work, remove the third.
- Dark — off-black ground, never pure black, never a gradient.
- Directed — one focal point per frame, lit like a shot, everything else falls off.
- Sparse — few words, set large. Copy is quiet; type is loud.
The offer
What the brand says it is, and the rules that keep it from narrowing. The line under the wordmark is the positioning — it changed in August 2026 from WEBSITES, DIRECTED. because naming a deliverable caps the pitch at that deliverable.
Interactive by default
Real-time 3D, directed like film — the web built to be used, not read. For anyone with a good idea.
- Claim the medium, not the artifact. “Sites, apps and brands” is three nouns and a ceiling. What is sold is what the web can be made to do.
- Qualify on the idea, never the industry. No vertical lists. The filter is whether the idea is worth directing.
- Capabilities take the noun the buyer would search. Websites, web apps, 3D, brand identity — never process words like Direction, Production, Release. Those answer a different question.
- Every capability carries an artifact. A capability with nothing to show discounts the ones beside it. Demote it to a line; never pad the grid.
Scroll is the edit. Written from an empty file, never a template.
Dashboards, marketplaces, internal tools that run real operations.
Three.js and raw GLSL. Real data, not decoration.
Logo system, type, motion, and the kit that ships it — this page.
Generated footage when a shoot isn’t in the budget.
Touch-native, built thumb-first and tested on real phones.
Motion signature
Pointer position is smoothed (lerp 0.06). Raw cursor tracking reads cheap; a beam that trails reads like a real lamp on a real arm.
Outside the light the wordmark is barely there. Inside it prints warm white #fff2e0. The identity lives in that contrast, not in the colour.
The accent never fills a shape in the hero. It appears as a refraction fringe where the glass is thick and the light isn’t — a side-effect, never a decoration.
Progress through the page dissolves the beam and warps the type until it’s gone. Motion has a direction: from lit to dark, from clear to distorted.
The one easter egg. Press and hold anywhere and the site drops to a grey Arial version of itself. The pitch, demonstrated. Never add a second gesture.
With prefers-reduced-motion the hero renders one lit frame. Not slower motion — no motion.
The resin
The second lit surface, behind the brief form. A domain-warped height field lit like oil on metal — the same physics as the hero, seen from above instead of through.
One warp level makes broad soft blobs and reads as blur. The second fold is what produces the veined relief the specular breaks across, and octaves five and six give the flecks something to sit on. This is the whole difference between alive and murky.
#ff4a1c is the specular and the glints, never the body of the material. Same rule as the hero glass: the orange is what the light does, not what the thing is.
It is a ground under a form, so ink is held across the whole copy column and the field only comes up in the empty right. Worst-case contrast is measured over the animation, not eyeballed at one frame.
The field drifts slowly and the glints pulse at ~1.6Hz. Two warps at six octaves costs 14.6ms/frame at 2Mpx, so it redraws at 30fps for an identical image at half the GPU.
The mark
Big Shoulders Display 900, uppercase, tracked +4%, outlined to paths so it never depends on the font loading. Three forms: wordmark, lockup, monogram.
Monogram
The K on a square. Favicon, app icon, avatar, anywhere under 96px wide.
Sizes
Clear space
- Do set it on ink, bone, or the accent. Nothing else.
- Do let the light hero render the wordmark live where WebGL is available.
- Don’t stretch, skew, outline, shadow, or add a gradient. The refraction in the hero is the only distortion the brand owns, and it is generated, never drawn.
- Don’t put the wordmark over photography. Put it in the dark next to photography.
- Don’t use the mint or Syne from the earlier explorations. They’re retired.
Colour
Five tones and one accent. Ratio on any surface: about 80% ink, 15% bone, 5% accent. The accent is used at most three times per page.
Contrast pairs
| Ink | Ground | Ratio | Use |
|---|---|---|---|
| Bone | Ink | 16.9 : 1 | Everything |
| Bone 2 | Ink | 8.4 : 1 | Secondary copy |
| Bone 3 | Ink | 3.1 : 1 | Meta at 12px+ only, never body |
| Accent | Ink | 5.7 : 1 | Labels, links |
| White | Accent | 3.2 : 1 | Buttons at 14px semibold+, never small text |
| Ink | Bone | 16.9 : 1 | Print, light surfaces |
| Bone 2 | Resin + scrim | 6.9 : 1 | Worst case across the animation, key light at maximum |
Type
Ours are watched
Real-time 3D, directed like film — the web built to be used, not read. Tell me what you’re building and who it’s for.
SC 01 · SLATE · CU 00:00:12:07 24 FPS · 2.39:1
Voice
First person, singular. A director talking to a founder — direct, unhurried, certain. Short declaratives. Film vocabulary when it’s true (cut, frame, take, slate), never as garnish.
Say what happens and when. Never say “premium”, “elevate”, “bespoke”, “seamless”, or “we’re passionate about”.
- Do — “Tell me what you’re building. I’ll come back within a day with a direction.”
- Do — “Most websites are read. Ours are watched.”
- Don’t — “We craft bespoke digital experiences that elevate your brand.”
- Don’t — spaced-uppercase eyebrow kickers above headlines. The mono label is for the HUD, not for introducing a sentence.
- Don’t — invent proof. No client counts, no testimonials that didn’t happen, no logos that aren’t real work.
- Do — say the uncomfortable thing first. “If a plain fast page would sell more than a cinematic one, I’ll say so.” It buys more trust than three testimonials.
- Do — put a number on it where one exists. “Within a day”, “Day 0 to Day 14”. A claim that can be checked is the only kind a saturated buyer still believes.
- Don’t — list deliverables where positioning belongs, or name industries where the qualifier belongs. See 02.
- Don’t — “Submit”, “Get in touch”, “Learn more”. A control names what the reader gets: “Start a project”.
Files
Everything below is in kinema-brand-kit.zip. SVGs are outlined paths; PNGs are transparent unless the name says otherwise.
- bone-on-ink.svg
- ink-on-bone.svg
- bone-transparent.svg
- PNG · 2048 / 1024
- bone-on-ink.svg
- ink-on-bone.svg
- accent-on-ink.svg
- bone-on-accent.svg
- bone-transparent.svg
- ink-transparent.svg
- app-icon.svg
- PNG · 1024 / 512 / 256 / 128 / 64 · app icon 1024 / 512 / 180
- profile-ink.svg
- profile-accent.svg
- profile-lit.svg
- PNG per platform · YouTube 800 · Instagram / TikTok / Facebook 1080
- Circle-crop preview
- hero-light.mp4 · 1280×800 · 6s
- hero-light.gif · 720px · 4.5s
- Live: kinema-e0d.pages.dev
Social profile
Every platform crops the profile picture to a circle and shows it as small as 40px next to comments. So the profile mark is the monogram at 64% of the canvas, centred, with nothing important outside the inner circle. Three variants; one job each.
The beam behind the K with the orange refraction fringe. The only still that carries the hero’s motion identity. Start here everywhere.
Bone K on off-black. Use where the platform chrome is already busy, or for accounts that should read as a studio, not a launch.
Bone K on signal orange. It pops in a feed, which is exactly why it isn’t permanent — the accent is a 5% colour, and a profile picture is 100% of the tile.
Ink and accent exports exist for every platform at the same sizes — swap
litforinkoraccentin the filename. The lit glow is drawn (radial light, two offset K copies, grain), not a frame grab, so it survives each platform’s recompression.