Add visual examples to foundation docs

Author: bogdaniculae

docs/foundations/README.md

@@ -6,11 +6,33 @@ title: Overview
 
 # Foundations
 
-> **Work in Progress** - This section is under development.
-
 Design tokens for building consistent BCC applications.
 
-- [Color](./colors.md) - Semantic color tokens
-- [Typography](./typography.md) - Fonts and text styles
-- [Spacing](./spacing.md) - Consistent spacing scale
-- [Dark mode](./dark-mode.md) - Theme switching
+## Pages
+
+| Token | Description |
+|-------|-------------|
+| [Color](./colors.md) | Text, icon, border, background, and accent colors |
+| [Typography](./typography.md) | Font family, heading and body scales |
+| [Spacing](./spacing.md) | Padding, margin, and gap scale |
+| [Elevation](./elevation.md) | Surface hierarchy and shadows |
+| [Dark Mode](./dark-mode.md) | Theme switching |
+
+## Quick Reference
+
+```html
+<!-- Colors -->
+<p class="text-default">Default text</p>
+<div class="bg-elevation-surface-raised-default">Card</div>
+<span class="text-brand">BCC brand color</span>
+
+<!-- Typography -->
+<h1 class="text-heading-2xl">Page Title</h1>
+<p class="text-body-md">Body text</p>
+
+<!-- Spacing -->
+<div class="p-200 gap-100">16px padding, 8px gap</div>
+
+<!-- Elevation -->
+<div class="bg-elevation-surface-raised-default shadow-raised">Card</div>
+```