Design System
Brand Style Guide
The colors, typography, and building blocks used across vsedigitalmedia.com and the Business Hub. Use this page as the reference whenever new pages or materials are designed.
Identity
Logo
On light backgrounds
On dark surfaces (inverse)
Palette
Colors
Brand colors
The core palette. Deep teal is the primary action color; soft teal highlights and accents.
Primary
--primary
Buttons, links, active states
Primary foreground
--primary-foreground
Text on primary
Accent
--accent
Highlights, soft backgrounds
Accent foreground
--accent-foreground
Text on accent
Ring
--ring
Focus outlines
Surfaces & text
Warm neutral backgrounds with a dark ink color for headers and footers.
Background
--background
Page background
Surface
--surface
Alternate sections
Card
--card
Cards and panels
Muted
--muted
Subtle fills
Foreground
--foreground
Body text
Muted foreground
--muted-foreground
Secondary text
Border
--border
Dividers and outlines
Input
--input
Form borders
Ink (dark sections)
Used for the site header, footer, and the Business Hub sidebar.
Ink
--ink
Dark surface
Ink foreground
--ink-foreground
Text on ink
Ink muted
--ink-muted
Secondary text on ink
Venture & status colors
Reserved accents for the Digital Ventures pages and Hub status badges.
Venture Outline
--v-outline
EdgeOutliner
Venture Binder
--v-binder
LLC Binder / warnings
Venture Market
--v-market
Solidarity Marketplace / danger
Destructive
--destructive
Errors and destructive actions
Type
Typography
Display — Inter (H1)
Websites. Business Apps. Digital Signage.
Heading — Inter (H2)
Practical technology for small businesses
Subheading — Inter (H3)
Built in reviewable stages
Body — Manrope
Manrope carries all body copy, from service descriptions to proposals. Secondary text uses the muted foreground tone at smaller sizes.
Eyebrow label
Section label
Input
Forms
Patterns
Components
Badges
Empty state
No items yet