01/Color
One brand color, used with discipline.
Ufo Green #35FF67 is the only brand color. Reserved for status nodes — shipped dot, live indicator, focus ring, atmospheric brand asset. Never a CTA fill, never a decorative border, never body text. Tinted neutrals carry every other surface.
— Brand
Ufo Green#35FF67--brand
In context
Live indicator
LiveStatus nodes only. No CTA fill. No decorative border. No body text.— Neutral scale (50 → 950)
Neutral 50#f7f7f7--neutral-50
Neutral 100#ececec--neutral-100
Neutral 200#d4d4d4--neutral-200
Neutral 300#b8b8b8--neutral-300
Neutral 400#8f8f8f--neutral-400
Neutral 500#606060--neutral-500
Neutral 600#444444--neutral-600
Neutral 700#393939--neutral-700
Neutral 800#292929--neutral-800
Neutral 900#0d0d0d--neutral-900
Neutral 950#050505--neutral-950
— Note
Neutrals are subtly tinted toward green (visible at
--neutral-700: #313f3e) so they feel cohesive with the brand color, not lifeless next to it.— Semantic (dark theme)
--bg
#050505page background
--surface
#0d0d0dcard / panel
--surface-2
#141414alt panel
--border
#1f1f1fhairline
--border-strong
#2a2a2adefined edge
--fg-1
#f7f7f7primary text
--fg-2
#b2b5c0secondary text
--fg-3
#8a8d95muted
--fg-4
#5c5f66placeholder
--ui-accent
#f7f7f7CTA fill (white on dark)
--ui-accent-fg
#050505CTA text
--ui-focus
#35FF67focus ring (status green allowed)
Do
- +Use brand green for live indicators, focus rings, status dots
- +Use brand green in atmospheric hero BG drift (treated as brand-asset image)
- +Use white #F7F7F7 fill for primary CTAs on dark surfaces
- +Tint all neutrals toward the brand hue for cohesion
Don’t
- −Use green as a CTA fill
- −Use green as a decorative border on cards or alerts
- −Use green for body text or link colors
- −Use any brand color in light-mode UI chrome (light = monochromatic)
- −Use pure #000 or pure #fff anywhere
02/Typography
Two families, used at scale.
Space Grotesk does display + mono. Manrope does body. No third family. Italic on display copy is forbidden — italic emphasis lives in body only.
— Display scale (Space Grotesk)
Display Hero — uppercase 400 (ventr.studio H1)
Software You Never Knew You Needed.
Display 0
Software you never knew you needed.
Display 1
Display 1 — hero
Display 2
Display 2 — section head
H1 / 56px
H1 heading sample
H2 / 36px
H2 heading sample
H3 / 22px
H3 heading sample
— Body (Manrope)
Body large / 17px
Lead paragraph weight. Use beneath display headlines, in hero subheads, and at the top of long-form prose. Cap line length at 65–75ch to keep reading rhythm comfortable.
Body / 15px
Default body. Used for paragraph copy in cards, descriptions, feature bullets. Italic emphasis lives here, never on display copy.
Small / 13px
Captions, table cells, secondary metadata. Pricing card feature bullets use this size.
— Mono / Eyebrow (Space Grotesk uppercase + tracking)
01/Section eyebrow01·Section with dot separatorNo-number eyebrowSmall status label · 12px / 0.18em— Tertiary annotation · 10px / 0.22em
Do
- +Sentence case for every heading, button, label
- +ALL CAPS — Category 1: eyebrow labels (mono, ≤4 words, 0.14em–0.22em tracking)
- +ALL CAPS — Category 2: display caps (Space Grotesk fontWeight ≤400, tight tracking, 48px+) — signature hero treatment
- +text-wrap: balance on h1/h2/h3 for clean line breaks
- +Cap body line length at 65–75ch
Don’t
- −Italic display copy (use Manrope italic in body if needed)
- −Title Case headings
- −ALL CAPS at Space Grotesk fontWeight ≥500 (caps display is light-weight only)
- −Inter, Roboto, Söhne, GT Walsheim, PP Editorial, Blauer Nue
- −Body text below 16px on mobile
- −Mixing 5+ font sizes (use the fixed scale)
03/Spacing & Radii
4px base scale. Sharp corners, no exceptions.
Granular enough for card padding (24–32) and big enough for section rhythm (96–120). Radii tokens preserved but every value resolves to 0px. Sharp corners are non-negotiable across the system.
— Spacing scale
--s-14px
--s-28px
--s-312px
--s-416px
--s-524px
--s-632px
--s-748px
--s-864px
--s-996px
--s-10120px
— Hard rule
Section vertical rhythm:
120px desktop / 64px mobile via .r-section-y. Container max width 1440px, gutter 32px desktop / 20px mobile via .r-container. Card interior padding 24–32px. Gap over margins for sibling spacing.— Radii (all 0px)
--r-sm0pxinputs, badges, chips
--r-md0pxsecondary buttons, menus
--r-lg0pxcards, modals
--r-xl0pxhero plates, big tiles
--r-pill0pxprimary CTA buttons
04/Components
The atom kit.
5 atoms ship the system. Compose them into chrome (NavBar, Footer) and sections (Hero, Pricing). Every component obeys the tokens above.
— Button
— Pill
DefaultWith dotLive (status)
— SectionEyebrow
01/With slash separator02·With dot separator03No separatorNo number
— StatusRail
Builds in flight04
Median ship time19d
Last deploy2h ago
Active clients11
— Icon
arrow
arrowUR
check
bolt
plug
plus
minus
code
chart
shield
menu
close
grid
box
layers
cpu
rocket
— Note
17 SVG paths inline in
Icon.tsx. Inherit currentColor. Standard sizes 16/20/24, stroke 1.5–1.7. Never colored, never mixed weights.05/Layout Patterns
Asymmetric splits beat 50/50.
Four-fr eyebrow rail + eight-fr content carries most sections. Section rhythm at 120/64. Container max 1440 with responsive gutter.
— Asymmetric 4-8 grid (.r-grid-4-8)
4fr — eyebrow rail
8fr — content
— Note
Collapses to single column at
900px. Legacy pattern used by archived sections. Live homepage now uses the asymmetric section-head (.vservices-top, 3fr/2fr) and sticky-rail spec grid (.vprocess-grid) variants documented below.— Hero 5-7 grid (.r-grid-5-7)
5fr — subhead
7fr — CTA stack
— Responsive breakpoints
1024px
4-col → 2-colService card grid (.vservices-grid)
960px
Sticky-rail collapses.vprocess-grid → single column
900px
4-8 + 5-7 grids → stackedHero CTA stack
800px
Asymmetric section-head collapses.vservices-top → single column
768px
Section pad 120 → 64Section vertical rhythm
720px
Process card → vertical stack.vprocess-card row → column
700px
3-col grids → 1-colTrustStrip stats, Services bullets
640px
Service grid 2-col → 1-col.vservices-grid
600px
Container gutter 32 → 20r-container, FAQ tightens, hide-mobile triggers
500px
SidebarDrawer 460px → 100vwDrawer only
— Sticky-rail spec grid (.vprocess-grid)
4fr — sticky context
eyebrow + h2 + body
eyebrow + h2 + body
card 01 — left/right split
card 02 — left/right split
card 03 — left/right split
— Note
LHS persists via
position: sticky; top: 160px while RHS card stack scrolls past. First instance: Process.tsx. Use when the section has 3+ ordered cards and a stable explanatory header.— Asymmetric section-head (.vservices-top, 3fr/2fr)
__head — eyebrow + display h2
Two-line.
Display headline.
Display headline.
__body — lede paragraph carries the supporting copy.
__proof — small mono proof line under hairline rule.
— Note
Bottom-aligned baselines (
align-items: end) anchor the h2 baseline to the proof line. Collapses to single column at 800px. First instance: Services section. Use for section headers with a meaty opening + supporting credibility beat.— Outcome ticker marquee (.vservices-ticker-wrap)
— Note
Reuses base
.vticker animation (40s) with scoped uppercase override + slower 140s duration for outcome content. Honesty rule: every chip must be a verified hard metric OR a true capability statement of method. Never fabricate. First instance: Services section bottom band.— Bracket-box callout (.vbracket-box)
Ready to ship?
Frosted glass + 1px border. Optional spotlight glow variant.
— Hard rule
One bracket box per page max. Reserve for terminal moments (final CTA). Frosted glass everywhere = nowhere is special. First instance:
Contact.tsx closing CTA.06/Motion
Calm exponential ease-out. Settle, don't overshoot.
One easing curve covers the system. Hero atmospheric drift is the only persistent motion. Hover lifts 2px, never scale. No bounce, no springs, no parallax.
— Easing + timing
--motion-ease-calm
cubic-bezier(0.22, 0.61, 0.36, 1)universal default
120ms
micro feedbackbutton press, toggle flip
200ms
state changehover, focus, color swap
400-600ms
layout transitiondrawer, accordion
22s / 26s
hero atmospheric drift2 spotlights, alternate
40s linear
marquee scrolltrust strip
— Hover lift demo (translateY -2px, dim fill)
— Atmospheric drift (live)
Do
- +translateY(-2px) on card and button hover
- +200ms transition on state changes
- +Respect prefers-reduced-motion universally
- +Use transform + opacity (compositor-friendly)
Don’t
- −Bouncy / elastic / spring-overshoot easing
- −Scroll-jacking
- −Parallax (especially mobile)
- −Custom cursors
- −Scale animations on hover
- −Animating width / height / top / left / margin
07/Voice & Copy
Bold, direct, slightly punk.
Confrontational without being mean. Names the problem plainly. Refuses hedging. Plain language at 6th–7th grade reading level. Hormozi-meets-builder-tool clarity.
— Required phrases (must appear near CTAs)
- "30-day satisfaction window."
- "You own your code."
— Note
“No upfront cost” was removed from the required-phrase set in v1.1 (PMC revision-9). Pricing is hidden on all public web surfaces; upfront cost is part of every lane’s Discovery quote.
— Forbidden phrases (HARD BAN)
"free" (as service descriptor)"no upfront cost" (REMOVED revision-9)"cancel anytime""no contract""no risk"
— Forbidden words (corporate filler + AI tells)
streamlineleverageutilizeseamlessrobustinnovativecutting-edgeworld-classunlockempowerelevatesuperchargelevel uptransformunleashsynergybest-of-breeddisruptdelveshowcasedemystifyembark on a journeysimplyjustreallybasicallyactuallygenuinelyhonestly
— Voice rules
Reading level
6th-7th grade
Person
we / youcontractions on
Sentence max
~22 wordstrim ruthlessly
Casing
Sentence caseALL CAPS only for short eyebrow labels
Numbers
0–9 spelled, 10+ numerals
Currency
$99/mono cents
Dates
MM-DD-YYYY in proseYAML + SQL stay YYYY-MM-DD
Em dashes
NEVERuse commas, colons, periods, parens
Emoji
NEVER
Wordmark
"VENTR" all-capsbody copy uses "Ventr" or "we"
08/Hard Ban List
If you're about to write any of these, stop.
Match-and-refuse. Single page of system bans. Each item also lives in DESIGN.md but here on one screen for fast lookup.
— Color
- ×Pure #000 or #fff
- ×Green CTA fill
- ×Green decorative border (cards, callouts, side stripes)
- ×Green body text or link color
- ×Any brand color in light-mode UI chrome
- ×Gradient text (background-clip: text + gradient)
— Type
- ×Italic display copy
- ×Title Case headings
- ×ALL CAPS at Space Grotesk fontWeight ≥500 (caps display is light-weight only)
- ×Inter, Roboto, Söhne, GT Walsheim, PP Editorial New, Blauer Nue
- ×Body copy below 16px on mobile
— Layout
- ×Rounded corners (any border-radius > 0)
- ×Side-stripe borders (>1px border-left/right as accent)
- ×Identical card grids (same-sized icon + heading + text repeated)
- ×Nested cards
- ×Hero-metric SaaS template (big number + small label + gradient)
- ×Stock photography
- ×Carousels for testimonials
— Motion
- ×Bouncy / elastic / spring-overshoot easing
- ×Scroll-jacking
- ×Parallax (especially mobile)
- ×Custom cursors
- ×Magnetic effects
- ×Animations of width / height / top / left / margin
- ×Hover-only functionality
— Voice
- ×Em dashes (use commas, colons, periods, parens)
- ×"free" as service descriptor
- ×"cancel anytime" / "no contract" / "no risk"
- ×Corporate filler word list (Section 7)
- ×AI-signature verbs (delve, showcase, demystify)
- ×Emoji
- ×Exclamation marks in success states
— Components / UX
- ×Modal as first thought (exhaust inline + progressive alternatives first)
- ×"Built by Otis Burgos" or any entity language in footers
- ×Core Industries reference on VENTR surfaces
- ×Microsoft Clarity (REMOVED — replaced with PostHog at Frontrunner+)
- ×Pricing on any public web surface (PMC lock #21 — pricing is hidden universally; vetting form qualifies, Discovery anchors verbally)
- ×"No upfront cost" copy (REMOVED revision-9)
- ×Standalone web design as a service line (Lane 3 always bundles web with automation; standalone web = decline)
- ×Emoji as UI element
- ×Unicode-as-icon (✓, ★, ●) — use SVG instead
- ×Mixed icon weights
- ×Colored icons (always inherit currentColor)
- ×PNG icons in production (SVG only)