Dashboard Components
Professional dashboard interfaces for business applications, lead management, and executive reporting.
Dashboard Header
Company Name Digital Strategies
Contact Person • Role • email@company.com
<div class="dashboard-header">
<div class="header-left">
<div class="company-logo">LOGO</div>
<div class="company-info">
<h4>Company Name</h4>
<p>Contact details</p>
</div>
</div>
<div class="header-right">
<div class="lead-score">87</div>
<div class="deal-value">$225,000</div>
</div>
</div>
Metrics Row
Process Steps
Initial Contact & Qualification
Lead identified, contact established, basic qualification completed
Needs Assessment & Discovery
Pain points identified, requirements gathered, budget confirmed
Technical Demonstration
Product demo scheduled, capabilities showcase, proof of concept
Action Buttons
Event Page Components
Elegant components for event pages, webinars, conferences, and spiritual/educational content with gold accents and cosmic themes.
Event Hero Section
Event Title: The Amazing Conference Experience
Discover the Secrets of Success
Date & Time
March 15, 2025 • 2:00 PM PST
Duration
90 Minutes
Registration Box
Investment
$33
Special Early Access Price
🛡️ 30-Day Money-Back Guarantee
Form Components
Clean, professional form elements for user input, registration, and data collection.
Form Fields
Layout Components
Flexible grid systems and layout utilities for responsive design.
Grid Layouts
Flex Layouts
Utility Classes
Helper classes for spacing, alignment, and common styling needs.
Status Indicators
Text Alignment
Left aligned text
Center aligned text
Right aligned text
Typography
Typography scales and text styles used throughout the Spence Style system.
Headings
Heading 1 – Main Page Titles
Heading 2 – Section Titles
Heading 3 – Subsection Titles
Heading 4 – Component Titles
Heading 5 – Small Titles
Heading 6 – Labels
Body Text
Large body text: This is used for introductory paragraphs and important content that needs to stand out.
Regular body text: This is the standard paragraph text used throughout the application for general content and descriptions.
Small text: This is used for captions, footnotes, and secondary information that supports the main content.
Event Page Typography (Gold Theme)
Event Title Style
Event Subtitle Style
This is the body text style used in event pages, designed for readability against dark backgrounds with proper contrast and spacing.
Implementation Notes
Guidelines for using these components effectively in your projects.
CSS Custom Properties
:root {
--catalog-bg: #f8f9fa;
--catalog-dark: #1f2937;
--catalog-accent: #2563eb;
--catalog-gold: #eacf84;
--catalog-border: #e5e7eb;
--catalog-success: #22c55e;
--catalog-warning: #f59e0b;
--catalog-danger: #ef4444;
--gold-gradient: linear-gradient(270deg, #EEDBA7 2.56%, #E1B333 99.94%);
--dark-bg: #1b1d32;
--darker-bg: #111221;
--accent-bg: #2e2f4d;
}
Responsive Design Patterns
/* Mobile-first approach */
.component {
/* Mobile styles */
}
@media (min-width: 768px) {
.component {
/* Tablet styles */
}
}
@media (min-width: 1024px) {
.component {
/* Desktop styles */
}
}
Component Organization
Best Practices:
- Dashboard Components: Use for business applications, CRM interfaces, and professional dashboards
- Event Components: Perfect for webinars, conferences, courses, and spiritual/educational content
- Consistent Spacing: Use the defined spacing utilities (10px, 20px, 30px increments)
- Color System: Stick to the defined color palette for consistency
- Typography: Use appropriate font families – Teko for headers, Lora for body text in event pages