Style Guide
Visual reference for all site components
This page is hidden from navigation and search engines
Color Palette
Primary
#1565C0
Accent/Teal
#0288D1
Success
#388E3C
Warning
#F57C00
Error
#C62828
Logo / Favicon
Full Size (PNG)
64x64
32x32
16x16
Typography
Heading 1 - The quick brown fox
text-5xl font-bold font-heading
Heading 2 - The quick brown fox
text-4xl font-bold font-heading
Heading 3 - The quick brown fox
text-3xl font-bold
Heading 4 - The quick brown fox
text-2xl font-semibold
Body Large - The quick brown fox jumps over the lazy dog.
text-lg
Body - The quick brown fox jumps over the lazy dog.
text-base
Muted Text - The quick brown fox jumps over the lazy dog.
text-sm text-muted
inline code example code element
Icons (Tabler)
code
building
user
rocket
chart-line
briefcase
school
Hero Component
Used on: index, about, project pages
Tagline Text
Hero Title Goes Here
This is the subtitle text that provides more context about the page content.
Content Component (Image Left)
Used on: project pages, about
Content Section Title
This is the main content area where you describe the section in detail.
Feature One
Description of the first feature with details.
Feature Two
Description of the second feature with details.
Feature Three
Description of the third feature with details.
Content Component (Image Right - isReversed)
Reversed Content
Image appears on the right side with isReversed prop.
Feature One
Description of the first feature with details.
Feature Two
Description of the second feature with details.
Features Component
Used on: index, services
Features Grid
A grid of features with icons
Feature 1
Description text here.
Feature 2
Description text here.
Feature 3
Description text here.
Feature 4
Description text here.
Features2 Component (Large Cards)
Used on: services
Features2 Grid
Larger feature cards with prominent icons
Description for this feature card.
Description for this feature card.
Description for this feature card.
Stats Component
Used on: project pages
Steps Component
Used on: services, how-it-works
Process Steps
Step 1
First step in the process.
Step 2
Second step in the process.
Step 3
Third step in the process.
FAQs Component
Used on: pricing, about
Frequently Asked Questions
What is this?
This is the answer to the first question with detailed information.
How does it work?
This is the answer explaining how things work.
What are the benefits?
This explains all the benefits in detail.
Note Component
Used for: callouts, tips
CallToAction Component
Used on: all pages (footer CTA)
Ready to get started?
Contact me to discuss your project
Code Block Example
// TypeScript example
interface User {
id: string;
name: string;
email: string;
}
async function getUser(id: string): Promise<User> {
const response = await fetch(`/api/users/${id}`);
return response.json();
}