# Quick Reference - Styling System

## Font Family

Inter font is applied globally and automatically to all text elements.

**No configuration needed** - just write your components normally:

```tsx
<h1>This uses Inter automatically</h1>
<p>So does this</p>
```

**CSS Variable (if needed):**

```css
font-family: var(--font-inter);
```

---

## Responsive Breakpoints

### Breakpoint Table

| Screen Size      | Tailwind Class | Min Width |
| ---------------- | -------------- | --------- |
| Mobile (default) | _(none)_       | 0px       |
| Mobile landscape | `sm:`          | 640px     |
| Tablet           | `md:`          | 768px     |
| Desktop small    | `lg:`          | 1024px    |
| Desktop          | `xl:`          | 1280px    |
| Desktop large    | `2xl:`         | 1536px    |

### Common Patterns

```tsx
// Responsive text size
<h1 className="text-2xl md:text-3xl lg:text-4xl">

// Responsive grid (1 col mobile, 2 tablet, 4 desktop)
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">

// Responsive padding
<section className="p-4 md:p-6 lg:p-8">

// Stack on mobile, side-by-side on desktop
<div className="flex flex-col lg:flex-row">

// Hide on mobile
<div className="hidden md:block">Desktop only</div>

// Show on mobile only
<div className="block md:hidden">Mobile only</div>
```

---

## Tips

1. **Mobile First:** Write styles for mobile, then override for larger screens
2. **Consistent Spacing:** Use Tailwind's spacing scale (p-4, p-6, p-8, etc.)
3. **Test Responsiveness:** Use browser DevTools device mode to test all breakpoints

---

For more details, see [STYLING_GUIDE.md](./STYLING_GUIDE.md)