V
Venuo
Design System
The visual language of Venuo — for partners, integrators and anyone building with our brand. Use only what's on this page; don't invent colors, fonts or radii.
Brand mark
V Venuo
Primary lockup — bordered V mark + wordmark + blue dot
Mark: 30px square, 2.2px ink border, 5px radius, blue dot top-right
Wordmark: DM Sans 500, 22px, −0.045em, ink-900
Clearspace: minimum half the mark's height on all sides
Don't recolor the dot — it is always blue-500
Don't separate the dot from the wordmark
Don't place on saturated or photographic backgrounds
Downloads — SVG, letterforms as paths
Color
Paper — cool neutral surfaces
#FCFCFD --paper Page bg
#F5F6F8 --paper-2 Sidebar, card fill
#EDEFF3 --paper-3 Hover fill, deep bg
#FFFFFF white Card fills on paper
Ink — text & border ramp
--ink-900 #131722
--ink-800 #1B2030
--ink-700 #262C3D
--ink-600 #3A4256
--ink-500 #5A6478
--ink-400 #838C9F
--ink-300 #B0B7C5
--ink-200 #D5D9E1
--ink-150 #E4E7EC
--ink-100 #EEF0F3
--ink-50 #F6F7F9
--ink-25 #FAFBFC
Heading — ink-900titles, nav, primary
Body prose — ink-700paragraphs, reading text
Secondary — ink-500captions, descriptions
Meta — ink-400timestamps, kickers, placeholders
Disabled — ink-300inactive only. 200 and below: never text
Blue — the only accent · keep under 5% of any layout
#1E47D9 --blue-600 Pressed, link hover
#2A5BFF --blue-500 Brand accent, focus ring
#5A82FF --blue-400 Hover state
#E6ECFF --blue-100 Active bg
#F2F5FF --blue-50 Lightest layer
Semantic — states only, never decoration
#0F8A5F --green-600 Success text
#15A572 --green-500 Success icon
#DEF4E9 --green-100 Success bg
#B36A00 --amber-600 Warning text
#D88A1A --amber-500 Warning icon
#FBEBC9 --amber-100 Warning bg
#C8362E --red-600 Error text
#E04A40 --red-500 Error icon
#FBE2E0 --red-100 Error bg
Typography
Exactly two typefaces. No serif, no third font — ever.
Aa
DM Sans
Body, headings, UI — everything by default. Weights 400 / 500 / 600 / 700. Features ss01 + cv11. Italic for emphasis.
Aa
JetBrains Mono
Brand identity font. All time, date, label, kicker and pill contexts. Never substitute. Weights 400 / 500.
Scale — DM Sans
Display heading
Article title
Section heading H2
Sub-heading H3
Body prose — Venuo is a booking layer for small but busy places. Instead of a whiteboard and one very patient person, you publish a single page where everyone books themselves.
UI label, nav item, button — minimum body size is 14px
JetBrains Mono in context
9:00 AM — 10:30 AM · Board Room · 3rd Floor
SECTION KICKER
Free plan
Layout
1240px max-width — site-wide, no exceptions
56px 56px 1240pxcontainer max-width
56 / 24pxpage padding desktop / mobile
≤1280pxtablet — docs TOC hides
≤820pxmobile — drawer nav
Radius
--r-sm 4px Inline code, kbd
--r 6px Buttons, inputs
--r-lg 10px Cards, callouts
--r-xl 14px Large cards, sidebars
--r-pill 999px Badges, chips
Shadows
Navy-tinted rgba(19,23,34,…), never pure black. Subtle and purposeful.
--shadow-1 Buttons, inputs
--shadow-2 Card hover, dropdown
--shadow-3 Modal, popover
--shadow-4 Drawer, heavy overlay
Motion
Hover the cards. ease-out for everything; ease-spring only for playful micro-interactions. Always respect prefers-reduced-motion.
--ease-out cubic-bezier(.2, .8, .2, 1)
--ease-spring cubic-bezier(.34, 1.36, .64, 1)
--dur-1 80ms color, opacity
--dur-2 120ms hover, focus
--dur-3 200ms expand, slide
--dur-4 320ms drawer, page
Components
Buttons & chips
Callouts
Tip
Green callout — helpful shortcuts and best practices.
Note
Blue callout — neutral information worth knowing.
Warning
Amber callout — things that can go wrong.
Code block
tokens.json
# canonical token source — fetch it live
curl https://venuo.co/tokens.json