Colors

Backgrounds

bg-primary

bg-secondary

bg-tertiary

Text

Primary text

Secondary text

Tertiary text

Accents

Orange (CTA)

accent-primary

Blue (UI)

accent-secondary

Purple (Gradients)

accent-purple

Cyan (Accent)

accent-tertiary

Gradient Colors

gradient-1

gradient-2

gradient-3

gradient-4

Borders

border-primary

border-secondary

Semantic

Success

Warning

Error

Typography

Druk — Display Headlines

Hero (3.5rem / 56px) — font-display

AI-Powered Websites

Section (2.5rem / 40px)

Build. Ship. Convert.

Stat (2.5rem / 40px)

+340%

General Sans — Body Text

Subsection (1.75rem / 28px) — font-body medium

Websites that generate business results

Card Title (1.375rem / 22px)

Custom Web Development

Body Large (1.125rem / 18px)

We build websites that don't just look good — they generate leads, donations, and booked jobs. AI is changing the world, and we help you harness it.

Body (1rem / 16px)

SmartSite Studio delivers websites that generate business results for small businesses, nonprofits, and trades professionals in Southfield, Michigan.

Body Small (0.875rem / 14px)

Caption (0.75rem / 12px)

Case Study

Gradient Text

Seize the AI Advantage

+340% More Leads

Buttons

.btn-primary — Orange CTA, lift on hover

.btn-glow — Orange CTA with animated glow ring (primary hero action)

.btn-secondary — Blue outline, purple tint on hover

.btn-ghost — Text-only, subtle background on hover

Cards

Standard Card

Default card with subtle border. Hover for border color change and shadow effect.

.card

Glass Card

Frosted glass effect with backdrop blur. Use selectively for featured content.

.glass-card

Gradient Border

Purple-to-cyan gradient border for premium highlights. Hover intensifies.

.gradient-border-card

Specular Card

Top edge highlight simulating light reflection. Used on stat and feature cards.

.card-specular

Hover Rotate Border

Static border becomes an animated rotating gradient on hover. Add to any card.

.hover-rotate-border

AI Glass Card

Frosted glass with light-mode adaptation. Used for the AI input zone.

.ai-glass-card

Gradient Effects

Aurora Glow

AI is changing everything.

.hero-energy + .hero-energy-cyan

Section Glow

Section with glow

Purple radial gradient behind content

.section-glow — Also available: .section-glow--cyan, .section-glow--orange

Blobs

Blurred gradient blobs for background depth

.blob .blob--purple, .blob--cyan, .blob--orange, .blob--pink

Grid Overlay

Subtle grid pattern with center mask fade

.grid-overlay

Dot Overlay

Repeating dot pattern with center mask fade

.dot-overlay

Animations

aurora-drift

12s ease-in-out infinite alternate

Used on hero aurora glows

glow-pulse

6s ease-in-out infinite alternate

Used on section glow backgrounds

Blur Word Reveal

AI Is Changing Everything

.blur-word — Each word fades in from blur with staggered --word-delay

Hero Entrance

Label — delay 0

Headline — delay 1

Subheadline — delay 2

.hero-fade-in + .hero-delay-1 through .hero-delay-3

Gradient Text Reveal

Seize the AI Advantage

.gradient-text-reveal — Opacity transition (no filter) to avoid breaking background-clip:text

Scroll Reveal

Step 1

Fades up on scroll

Step 2

80ms stagger delay

Step 3

160ms stagger delay

.reveal + .visible via IntersectionObserver

Form Inputs

Name

Email

Message

Combined Example

A realistic hero section using aurora, grid overlay, gradient text, and CTA buttons.

AI-Powered Web Studio

Websites That Generate Real Business

We build websites that don't just look good — they generate leads, donations, and booked jobs. AI is the advantage. Seize it.