Design System v0.2

The visual
language of
UIVibes

Tokens, patterns, and components that power a premium prompt-first component library. Every pixel is intentional.

buttons.tsx

 export function GlowButton(props) { 
  return (

    <button className="glow-btn">

      {props.children} 
    </button>

  )

}

Archivo

Typography

Archivo · Instrument Sans · IBM Plex Mono · Newsreader

Display — Archivo clamp(2.5rem, 6.2vw, 4.75rem) / 0.96 / -0.042em / 600

Components that arrive finished

Heading 2 — Archivo clamp(1.85rem, 3.4vw, 2.85rem) / 1.04 / -0.034em / 600

Everything we've made, running

Heading 3 — Archivo 1.0625rem / 1.3 / -0.012em / 600

Border Beam

Lead — Instrument Sans clamp(1rem, 1.15vw, 1.1875rem) / 1.62 / bone-dim

Copy the prompt. Paste it into v0, Lovable, Cursor or Bolt. What comes back is production React — animation timing, typed props, reduced motion, focus states — on the first try, cold.

Body — Instrument Sans 0.9375rem / 1.6 / bone-dim

Every preview on this page is the component itself — not a screenshot, not a video. The preview is always public; only the prompt is gated.

Label — IBM Plex Mono 0.6875rem / +0.14em / uppercase / 500 — all chrome

catalog · backgrounds · css only · 640 × 360

Mono — IBM Plex Mono 0.7813rem / 1.72 — readouts, code, plate medium lines

Backgrounds · css only · 1.3 kb — two blurred fields under a turbulence grain.

The serif word — Newsreader Italic 1.06em of its host / italic / wght 340 — exactly one word per headline

finished

The signature — rule 3

Components that arrive finished.

Newsreader Italic appears on exactly one word per display headline and nowhere else. The hero's word is signal-hot; every section word is bone. Never two words, never a gradient on top of it, never in body copy, captions or buttons.

<h1>Components that arrive <span class="uv-serif-word">finished</span>.</h1>

Colors & Surfaces

Palette

Surfaces

Obsidian #08080A --uv-bg

Band #0B0B0E --uv-bg-alt

Sunk #050506 --uv-bg-sunk

Raised #121215 --uv-bg-elevated

Raised 2 #17171B --uv-bg-raised-2

Seam #212127 --uv-border

Seam Subtle #1A1A1F --uv-border-subtle

Seam Lit #2E2E36 --uv-seam-lit

Folio #24201C --uv-folio

Text

Bone #F1EDE7 --uv-text

Bone Dim #A6A19A --uv-text-muted

Bone Faint #6E6A64 --uv-text-subtle

Bone Ghost #4A4640 --uv-text-ghost

Accent

Signal #F2A65A --uv-accent

Signal Hot #FFC98A --uv-accent-hover

Signal Deep #B0561F --uv-accent-deep

Wash — chip grounds rgba(242,166,90,0.12) --uv-accent-muted

Line — lit hairlines rgba(242,166,90,0.28) --uv-accent-line

Halo — bloom stops rgba(242,166,90,0.55) --uv-accent-halo

Semantic

Success / Basic #9CB380 --uv-success

Warning / Intermediate #E3B341 --uv-warning

Error / Advanced #C9614A --uv-error

UI Components

Atomic Elements

Buttons

Glow Button

Icon Buttons

Component Card

backgrounds

Aurora Background

Animated gradient background with organic aurora effect.

intermediate

Glass Card

◆

Premium Access

Full library access with all prompts and future components.

R$9/mo

Input Group

Badges

Premium Basic Intermediate Advanced CSS Framer Motion

Tool Tags

v0 Lovable Cursor Bolt

Navigation

◆ UIVibes

Components Pricing Sign in

Layout & Spacing

Grid · Radius · Spacing Scale

12-Column Grid

Common Layouts

6 / 6

4 / 4 / 4

3 / 3 / 3 / 3

Border Radius

4px --uv-radius-xs

8px --uv-radius-sm

12px --uv-radius

16px --uv-radius-lg

Pill --uv-radius-pill

Spacing Scale

4px

8px

12px

16px

24px

34px

48px

68px

Effects & Motion

Choreography

Radial Glow

Hover me

Glass Morphism

backdrop-filter: blur(12px)

Beam Border

Ambient beam animation

Hover Lift