Style Guide

The complete lg.media visual language — typography, color, components, and motion.

Typography

Display — Bebas Neue

The Quick Brown Fox

Jumps Over The Lazy Dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

Body — DM Sans

The quick brown fox jumps over the lazy dog.

Typography is the craft of endowing human language with a durable visual form.

Used for body copy, descriptions, and UI text throughout the system.

Available in weights from 100 to 1000, with italic variants.

Accent — Permanent Marker

Hand-drawn emphasis

Used sparingly for personality

Tracking

tracking-wider (0.05em) — default for display

tracking-widest (0.1em) — labels & overlines

tracking-normal (0) — body text

Color System

Alias tokens map to the existing surface/text/accent system. Raw hex values enable Tailwind opacity modifiers like border-foreground/40.

Core Aliases

foreground

Primary text color

background

Page background

primary

Gold accent / CTAs

muted

Subtle backgrounds

card

Card surface

border

Default border color

Semantic Colors

revenue

Positive / revenue

loss

Negative / loss

warning

Warning states

accent

Gold accent (original token)

The Industrial Aesthetic

Border-2 Pattern

Heavy 2px borders define the lg.media look. Used on cards, sections, and interactive elements.

border-2 border-foreground

border-2 border-foreground/40

border-2 border-foreground/20

Minimal Radius

Near-zero border radius (2px) keeps things sharp. No shadows — structure comes from borders alone.

rounded-card (0.125rem / 2px)

rounded-none (0px)

rounded-full (pills only)

Button Variants

Card Composition

Standard Card

With header, content, and footer

$24,680

Updated 2 hours ago

2.4M

Monthly Pageviews

Badges

Default Primary Outline Muted

Marketing Composition

$84K

Monthly Revenue

Network Sites

Active Writers

“

The analytics dashboard transformed how we track our content performance across all nine sites. Revenue attribution is finally clear.

Alex Rivera

Content Director, lg.media

Animation

Pure CSS keyframes triggered by IntersectionObserver. No runtime animation library required.

Available Animations

fade-in-up — default entrance

fade-in-down — top entrance

fade-in-left — side entrance

fade-in-right — side entrance

scale-in — emphasis entrance

Components

<FadeIn> — directional fade wrapper

<ScaleIn> — scale entrance wrapper

<StaggerContainer> — cascading children

Live Demo — Scroll to trigger

This element uses animate-fade-in-up

This element uses animate-fade-in-left with 200ms delay

This element uses animate-scale-in with 400ms delay