--- title: "Brand & Design Guidelines | Voomer®" description: "The single source of truth for the Voomer® brand: logo, color system, typography, motion, and voice. Copy the marks, take the tokens, download the kit." canonical: "https://www.tryvoomer.com/brand" --- # Brand & Design Guidelines | Voomer® > The single source of truth for the Voomer® brand: logo, color system, typography, motion, and voice. Copy the marks, take the tokens, download the kit. Brand & design system / v1 # The training ground, rendered in brand. V Voomer® Try it right-click the wordmark for Copy Wordmark, Copy Logo, and downloads. Voomer® is a candidate's coach, corner, and arena for AI video interviews. This page is the single source of truth for how the brand looks, moves, and speaks. Everything here is copyable and downloadable. Nothing here is decoration for its own sake. Logo / 01 ## The mark and the wordmark Two assets. The **logomark** is the V in a rounded arena tile. The **wordmark** is the logomark plus Voomer®. Click any tile to copy its SVG. V Logomark Copy SVG V Voomer® Wordmark Copy SVG V On light Copy SVG ### Clearspace & minimum size Keep clearspace of one tile-height on every side. Never render the logomark below 20px or the wordmark below 96px wide. V V Voomer® min 96px ### Misuse The mark carries the brand's confidence. Do not undercut it. V ✕ Don't stretch or distort V ✕ Don't recolor the tile V ✕ Don't add shadows or effects V Voomer ✕ Don't drop the ® mark Right-click menu / 02 ## Every logo is a brand kit On the marketing site and blog, right-clicking the Voomer® logo opens a brand menu instead of the browser default: Copy Wordmark, Copy Logo, Download Brand Assets, and a link back to this page. It is live on the wordmark above. The menu closes on Esc, outside click, or scroll. The product app keeps its native right-click. **Copy Wordmark / Copy Logo** Writes the raw SVG to the clipboard. Paste straight into Figma, a deck, or an email signature. **Download Brand Assets** Pulls the full kit: logomark and wordmark. **Brand Guidelines** Routes here, to tryvoomer.com/brand, the single source of truth. Color / 03 ## OKLCH, anchored on one red The system is authored in OKLCH for uniform saturation across values. Ship the sRGB hex anywhere variables are not available. One accent carries the brand and everything else is a chosen neutral. Click any swatch to copy its value. Brand red · Primary Voomer Red sRGB **#E4021A** OKLCH **oklch(0.48 0.22 17)** P3 chroma **0.27** avoid the gamut-clip #B9002D ### Surfaces & text background Copy oklch(0.99 0.002 90) #fbfaf7 · Light surface foreground Copy oklch(0.2 0.01 250) #23262b · Light ink background dark Copy oklch(0.15 0.01 250) #181b20 · Arena ground foreground dark Copy oklch(0.93 0.005 90) #ecebe7 · Dark ink muted-foreground Copy oklch(0.55 0.02 250) #7b828c · Secondary text border Copy oklch(0.9 0.005 250) #e2e4e8 · Hairline secondary Copy oklch(0.4 0.12 245) #25508c · Deep blue accent Copy oklch(0.93 0.015 250) #e6e9f0 · Warm highlight ### Semantic status Status color is separate from the accent. It reads as a coach's assessment, never a traffic light: warm to cool, poor to good. status-poor Copy oklch(0.6 0.2 25) #d23b2e · Needs work status-ok Copy oklch(0.8 0.15 85) #e0a52a · Getting there status-good Copy oklch(0.7 0.16 163) #12a06a · Strong success Copy oklch(0.6 0.18 163) #0f9560 · Confirmed warning Copy oklch(0.75 0.15 70) #d9902a · Caution destructive Copy oklch(0.55 0.22 17) #c11a2b · Danger Typography / 04 ## Type is infrastructure Two faces. Geist Sans for everything read: headlines, body, UI. Geist Mono for data and code. Different pages should feel different through weight, scale, and spacing alone. Aa ### Geist Sans Headlines, body, UI, labels. The voice of the brand: heavy and tight at display size, neutral and legible at body size. Aa ### Geist Mono Scores, metrics, tokens, code. Always with tabular-nums so changing numbers hold their width. ### Scale Display 72 / 800 / tight Walk in ready. H1 44 / 800 / tight Face your interview H2 30 / 700 / tight The coach's verdict Body 16 / 400 / 1.55 You speak faster than 78% of applicants. Bring your pace down and let the silences land. Mono 13 / 600 / tabular WPM 145 · FILLERS 3 · GAZE 82% Rules: **text-balance** on headings, **tabular-nums** on any number that changes, and kern, liga, calt on globally. No em dashes, ever. Motion / 05 ## Motion is information Every animation communicates a state change that would be lost if static. Motion feels like breathing, not fireworks. These are the totems and rituals, live below. The Breathing Ring breathe · 4s · totem REC Recording pulse pulse-ring · 1.5s 0 The Verdict count-up · 900ms The Commitment celebrate-ring · 1s Do: stagger card entrances for hierarchy, count scores up for anticipation, pulse the REC dot for live capture. **Don't:** hover wobbles, spinners where a staged narrative is possible, decorative page transitions. Voice & tone / 06 ## Coach, not cheerleader Validate the struggle. Celebrate progress specifically. Speak to the candidate's reality: the camera, the timer, the silence. Never to a persona. ▲ Say this Your pacing improved **15%**. Hold that and the silences start working for you. "You speak faster than 78% of applicants." "AI interviews are unnatural. Let's make yours feel practiced." ✕ Not this Amazing job! You're crushing it! 🎉 "WPM: 145." "AI interviews are the future of hiring." ### Principles - 1 **Comparative, not absolute.** “Faster than 78%,” not “145 WPM.” - 2 **Arena vocabulary.** Training ground, the arena, walk in ready, face your interview. - 3 **Emotional honesty.** Name the fear. The unnatural interview is the enemy, not the candidate. - 4 **Active voice, second person.** “You’ll see exactly how you come across.” - 5 **Data tells the user’s story.** Every number answers: so what for my interview? ### Banned words Corporate filler that says nothing. Cut on sight. passionate empower leverage innovative cutting-edge state-of-the-art revolutionize And the brand mark: always **Voomer®** with the ® on first and prominent use. Downloads / 07 ## Take the kit Vector assets, ready to drop into Figma, a deck, or a signature. Generated from the current marketing mark. [Logomark voomer-logomark.svg](https://www.tryvoomer.com/brand/voomer-logomark.svg)[Wordmark voomer-wordmark.svg](https://www.tryvoomer.com/brand/voomer-wordmark.svg) ## Machine-readable surfaces - [Site guide for AI agents](https://www.tryvoomer.com/llms.txt) · [full reference](https://www.tryvoomer.com/llms-full.txt) · [blog guide listing](https://www.tryvoomer.com/blog/llms.txt) - [Semantic guide search API](https://api.tryvoomer.com/blog/search?q={query}) (JSON) - [Agent Skills index](https://www.tryvoomer.com/.well-known/agent-skills/index.json) - [Sitemap](https://www.tryvoomer.com/sitemap.xml) - Any content page serves markdown via `Accept: text/markdown`, a `.md` suffix, or `?mode=agent`