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.

v1.0 · June 2026 tokens.json ↓

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

Lockup · light SVG ↓

Lockup · dark SVG ↓

Wordmark · light SVG ↓

Wordmark · dark SVG ↓

Color

Paper — warm neutral surfaces

#FFFFFF --paper Page bg

#F8F7F5 --paper-2 Sidebar, card fill

#F1EFEB --paper-3 Hover fill, deep bg

#FFFFFF white Card fills on paper

#E6E3DE --rule Hairline divider

Ink — text & border ramp

--ink-900 #1C1B19

--ink-800 #2C2A27

--ink-700 #3E3B37

--ink-600 #55514C

--ink-500 #726D66

--ink-450 #8A857D

--ink-400 #9E9992

--ink-300 #BDB8B1

--ink-200 #D9D6D0

--ink-150 #E6E3DE

--ink-100 #EFEDE9

--ink-50 #F6F5F2

--ink-25 #FBFAF9

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

Slate — primary accent · keep combined accents under 5–8% of any layout

#2F4E6B --blue-600 Pressed, link hover

#3D6488 --blue-500 Brand accent, focus ring

#7593AE --blue-400 Hover state

#D3DEE7 --blue-100 Active bg

#EBF1F6 --blue-50 Lightest layer

Sage — setup, confirmation, "ready" states

#47654E --sage-600 Pressed

#5C7A63 --sage-500 Accent base

#8CA391 --sage-400 Hover state

#D9E2DA --sage-100 Active bg

#EDF2EE --sage-50 Lightest layer

Clay — the "problem" color · pains, "by hand" lanes, general warmth

#9A5A3E --clay-600 Pressed

#B26E4E --clay-500 Accent base

#C9A08A --clay-400 Hover state

#EEDCD1 --clay-100 Active bg

#F8F0EA --clay-50 Lightest layer

Semantic — states only, never decoration

#3F6A50 --green-600 Success text

#4C7A5E --green-500 Success icon

#DEEDE3 --green-100 Success bg

#A06B24 --amber-600 Warning text

#BC8434 --amber-500 Warning icon

#F5E8D3 --amber-100 Warning bg

#9E3E33 --red-600 Error text

#B4483C --red-500 Error icon

#F4DEDB --red-100 Error bg

Typography

Exactly two typefaces. No serif, no third font — ever.

DM Sans

Body, headings, UI — everything by default. Weights 400 / 500 / 600 / 700. Features ss01 + cv11. Italic for emphasis.

Newsreader

Italic-only display emphasis. One <em> word or phrase per heading, testimonial quotes. Weight 400, opsz 6–72. Never roman, never body or UI.

Scale — DM Sans

600 · 48px · −0.04em Display heading

500 · 36px · −0.03em Article title

600 · 24px · −0.02em Section heading H2

600 · 18px · −0.01em Sub-heading H3

400 · 15.5px · lh 1.68 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.

500 · 14px UI label, nav item, button — minimum body size is 14px

Former-mono label contexts — DM Sans 500, uppercase, tracked

500 · 13px · +0.1em CAPS · tabular-nums 9:00 AM — 10:30 AM · Board Room · 3rd Floor

500 · 11px · +0.12em CAPS SECTION KICKER

500 · 10.5px · CAPS · pill Free plan

Heading emphasis — one Newsreader <em> per heading, site-wide

Section heading, 40px

Publish once,
book forever.

Body-scale, 17px

Every room, always in sync.

Newsreader italic 400, 1.02em, 2px --blue-400 underline, text-underline-offset .1em. Headings break one sentence per line (<br>) with text-wrap: balance — see global.css h1 em, h2 em, ….

Layout

1400px max-width — site-wide, no exceptions

56px 56px

1400pxcontainer 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-2xl 18px Feature cards (v8)

--r-pill 999px Badges, chips

Shadows

Warm-ink tinted rgba(28,27,25,…), 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

Join early access Sign in Free plan — Kicker label

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

Brand mark

Downloads — SVG, letterforms as paths

Color

Paper — warm neutral surfaces

Ink — text & border ramp

Slate — primary accent · keep combined accents under 5–8% of any layout

Sage — setup, confirmation, "ready" states

Clay — the "problem" color · pains, "by hand" lanes, general warmth

Semantic — states only, never decoration

Typography

Scale — DM Sans

Former-mono label contexts — DM Sans 500, uppercase, tracked

Heading emphasis — one Newsreader <em> per heading, site-wide

Publish once,book forever.

Every room, always in sync.

Layout

Radius

Shadows

Motion

Components

Buttons & chips

Callouts

Code block

Publish once,
book forever.