Style Guide

Design system and component showcase

Typography

Heading 1

text-4xl font-bold tracking-tight

Heading 2

text-3xl font-bold

Heading 3

text-2xl font-bold

Heading 4

text-xl font-semibold

Body text - The quick brown fox jumps over the lazy dog

text-base

Secondary text - Additional information

text-sm text-muted-foreground

Colors

Background

bg-background

Foreground

#4d5057

Accent

#ffae03

Muted

bg-muted

Border

border

Buttons

Cards

Card Title

Card description with some text content goes here.

Hoverable Card

This card has a hover effect.

Muted Card

Card with muted background.

Spacing

gap-2 (0.5rem)

gap-4 (1rem)

gap-8 (2rem)

Border Radius

rounded-sm

rounded-md

rounded-lg

rounded-full

Video Gallery

12:34

How to Build a Modern Web Application with Next.js and TypeScript

Web Dev Master

1.2M views • 2 weeks ago

8:15

CSS Grid vs Flexbox: Which One Should You Use?

Design Simplified

856K views • 1 month ago

25:42

Complete Tailwind CSS Tutorial for Beginners

Code Academy Pro

2.4M views • 3 days ago

15:20

React Hooks Explained: useState, useEffect, and Custom Hooks

React Masters

523K views • 5 days ago

6:48

Top 10 VS Code Extensions Every Developer Needs

Dev Tools Daily

3.1M views • 1 week ago

18:55

JavaScript Performance Optimization Techniques You Must Know

Performance Hub

687K views • 2 months ago

32:10

Building a Full-Stack App: From Database to Deployment

Full Stack Journey

1.8M views • 4 days ago

10:03

Git and GitHub Tutorial: Master Version Control in 10 Minutes

Git Guru

945K views • 3 weeks ago