Skip to content
New Venue Data
Style Guide

The New Venue Data Design System

A living reference for the tokens, type scale, and components behind the product. Dark-mode only, indigo accent, built for dense data surfaces.

Living documentDark mode only
Color

Color Tokens

Every surface and accent is drawn from this fixed palette. Use the exact hex values — do not invent new colors.

Surfaces & Borders

Base#09090bPage background
Surface#111113Cards, panels
Surface 2#0d0d0fAlternating sections
Hover#18181bRow / control hover
Border#1f1f23Default hairline
Border Strong#2e2e35Emphasis edges

Text

Text#fafafaPrimary copy, headings
Text Secondary#a1a1aaBody, descriptions
Text Muted#71717aLabels, captions
Text Faint#3f3f46Disabled, dividers

Accents & Semantics

Indigo 400#818cf8Accent text, links
Indigo 500#6366f1Primary actions, glow
Emerald#34d399Positive / new
Amber#f59e0bCaution / beta
Violet#a78bfaPro tier
Red#ef4444Negative / errors

Indigo is the primary accent. Emerald = positive, amber = caution, violet = pro, red = negative. Blue, orange, and pink are reserved for category variety only.

Typography

Type Scale

Inter for UI, JetBrains Mono for code and tabular data. Display sizes carry tight tracking for impact.

Signal
text-display-2xl4.5rem / 72pxMarketing hero numbers, rare impact moments
Florida license intel
text-display-xl3.75rem / 60pxLanding hero headlines
The Design System
text-display-lg3rem / 48pxPage h1 — text-display-lg text-[var(--ls-fg)]
Everything side by side
text-display-md2.25rem / 36pxSection h2 via SectionHeading
Built for data teams
text-display-sm1.875rem / 30pxSub-section headings, card titles

Body Sizes

The quick brown fox jumps over 12 lazy license filings.

text-lg1.125rem / 18pxSection subtext, lede paragraphs

The quick brown fox jumps over 12 lazy license filings.

text-base1rem / 16pxDefault running text

The quick brown fox jumps over 12 lazy license filings.

text-sm0.875rem / 14pxCards, tables, list items

The quick brown fox jumps over 12 lazy license filings.

text-xs0.75rem / 12pxLabels, badges, meta
Components

Live Components

Rendered from the real shared components — what you see here is exactly what ships.

TagBadge

variant: new · live · beta · pro · default

NewLiveBetaProDefault

CTAs & Links

Plain Next Link styled with classes — never the Button component.

Primary Secondary Text link

GlowCard

highlighted

A bordered surface on #111113 with a subtle gradient and indigo glow on hover. Pass highlighted for an indigo edge and resting shadow.

  • Soft hover glow
  • Gradient card fill
  • Composable children

SectionHeading

props: eyebrow · heading · subtext · align

Example

A Section Heading

Renders an h2 at text-display-md with an optional eyebrow pill and lede.

Layout

Spacing & Radius

Consistent rhythm and corner softness keep the dense data surface calm.

Spacing

  • Section paddingpy-20 · py-20 lg:py-28 (hero)Vertical rhythm between sections
  • Containermx-auto max-w-7xl px-4 sm:px-6 lg:px-8Standard content width
  • Card paddingp-6GlowCard and panel interiors
  • Stack gapgap-4 / gap-6 / gap-8Flex & grid spacing scale
  • Inline gapgap-1.5 / gap-2Icon + label, badge contents

Radius

  • rounded-md~0.5remButtons, inputs, small chips
  • rounded-lg0.625remBase radius token
  • rounded-xl~0.875remCards, panels, tables
  • rounded-full9999pxBadges, pills, dots