Design Library
Brand tokens, type specimens, UI components, and accessibility guidelines for Aspire Digital.
Logo Suite
All approved logo variants for Aspire Digital. Each variant has a specific use case — use the right one for the context.
Primary Logo
The full horizontal lockup — wordmark + brandmark. Default for most uses: website header, email signatures, print.
Brandmark
The "A" mark alone — for watermarks, favicons, app icons, and placements too small for the full logo.
Monogram
The "A" letterform monogram — for profile pictures, favicons, embossing, social media profile images.
Stacked Logo
Vertical stacked layout — brandmark above wordmark. For square crops, social posts, and print materials.
Ad Mark
Optimised variants for digital advertising — display ads, Google Ads, Meta Ads, and sponsored placements.
Social & Favicon
Pre-sized assets for social media profiles, OG cards, cover photos, and browser favicons.
Color Palette
Warm cream canvas with terracotta accents and forest green — earthy, trustworthy, and distinctly Aspire.
How colors pair in real UI contexts — all combinations below pass WCAG AA. Ratios verified.
Audit findings — follow these to stay WCAG AA compliant.
Typography
DM Serif Display for editorial headings — Unbounded for bold impact numerals — EB Garamond italic for poetic accents — DM Sans for clean, readable body copy.
Weights: 400 Regular + Italic
Use for: Hero headings, section titles, hero accent phrases
Why: Editorial warmth with structural authority. DM Serif Display reads like a magazine masthead — sophisticated without being stiff. Pairs perfectly with DM Sans for a crisp contrast.
Weights: 700 Bold · 900 Black
Use for: Stat numerals (gradient-fill), oversized ordinal numbers (ghost/watermark), performance metrics
Why: Technical precision meets visual impact. The extra-wide letterforms make numbers feel like they carry weight. Used sparingly — one Unbounded number per section at most.
Weights: 400 Italic · 600 Italic
Use for: Pull quotes, hero italic phrases, blockquotes, testimonials
Why: The classic Garamond italic carries centuries of craft. In italic only — it becomes a whisper against DM Serif Display's statements. Use it for the line that makes someone stop scrolling.
Weights: 300 Light · 400 Regular · 500 Medium · 600 Semi-Bold · 700 Bold
Use for: Body text, navigation links, form labels, button copy, captions, tags
Why: Geometric sans with excellent screen legibility. Pairs beautifully with DM Serif Display at all scales — the shared DM family creates a natural rhythm from 12px labels to 18px body copy.
Headings
Heading scale using DM Serif Display — consistent sizing from hero display down to sub-section labels.
Weight: 700
Line-h: 1.06
Tracking: -.02em
Weight: 700
Line-h: 1.2
Weight: 600
Line-h: 1.3
Weight: 600
Line-h: 1.35
Weight: 600
Line-h: 1.4
Weight: 700
Caps · Letter-sp: 1px
Paragraphs
Body text styles at actual sizes — DM Sans across all paragraph roles with Playfair Display for accent text.
Line-h: 1.78
Weight: 400
DM Sans
Line-h: 1.65
Weight: 400
DM Sans
Line-h: 1.55
Italic · Weight: 400
Playfair Display
Line-h: 1.6
Weight: 400
DM Sans
Letter-sp: 2px
Weight: 600 · Caps
DM Sans
Links
Four link patterns — hover each to see the interaction state.
Rich Text
A sample rich text block showing how body copy, headings, lists, and blockquotes look together in the Aspire Digital voice.
About Aspire Digital
Aspire Digital is an Ohio-based web agency built on a simple belief: every business deserves a website they're proud of. We work with small businesses, local service providers, and faith-driven entrepreneurs to craft digital experiences that are beautiful, fast, and built to convert.
From our base in central Ohio, we've helped dozens of clients launch — and relaunch — with websites that work as hard as they do. No bloated retainers. No confusing jargon. Just clean, strategic design delivered on time.
"Defined by craft. Rooted in faith."
— Aspire Digital tagline
What We Do
We offer a focused suite of digital services so you can get everything you need in one place — and nothing you don't. Every project starts with a discovery call where we learn your goals, your audience, and what success actually looks like for you.
- Custom Website Design — hand-crafted, not templated, built around your brand
- SEO & AI Optimization — built-in performance, structured data, and content strategy
- Branding & Identity — logos, color systems, typography, and brand guidelines
- Projects start from $2,500 and are delivered in 2–6 weeks
- No long-term contracts — you own everything, always
Our Approach
We believe the best digital work is done with intention. That means fewer clients, more care, and a process that keeps you informed at every step. We don't cut corners because you deserve better — and frankly, so does our portfolio.
- Discovery call — we learn your business, goals, and audience
- Strategy & wireframe — we map out the structure and messaging
- Design — visual direction, brand-aligned, feedback loop with you
- Build & QA — production-ready, mobile-first, fast
- Launch & handoff — you get full ownership and 30 days of support
Ready to start? Book a free discovery call and let's talk about what we can build together.
Forms
Styled inputs, textareas, selects, pill-selectors, and checkboxes — production-ready and brand-consistent. Focus states use Terracotta ring.
We'll reply within 1–2 business days.
Select all that apply.
No spam, ever. Unsubscribe anytime.
Icons
Material Symbols Outlined — the complete set used across Aspire Digital. Hover for the spring lift. Icon names shown in mono for dev reference.
Spacing Tokens
Consistent rhythm throughout the site — four semantic spacing values cover every layout need.
Component Previews
How the design system comes together in real components — navigation, trust bar, hero, and service cards.
Navigation
Trust Bar
Hero Section
All your digital needs.
In one place that drives growth.
Custom websites, SEO, and branding — built with care and delivered on time. No long-term contracts. Projects from $2,500.
Service Cards
Document Footer
Standard branded footer for all client-facing documents — website reviews, scorecards, design libraries, proposals. Dark background with white logo.
Section Badge
Pill-shaped badge with circular icon. Used as section eyebrows, page headers, version labels, and document identifiers.
What We Offer
Custom websites, SEO, branding, and digital tools — built by hand for businesses that want to grow.
.section-badge { display: inline-flex; align-items: center; gap: 12px; padding: 6px 20px 6px 6px; background: var(--bg); border-radius: 9999px; border: 1px solid var(--border); }.section-badge .ic { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: white; }
Contrast Ratios
WCAG 2.1 AA compliance audit for all Aspire Digital color combinations. Ratios calculated using the WCAG relative luminance formula.
| Preview | Foreground | Background | Ratio | AA Normal | AA Large | Notes |
|---|---|---|---|---|---|---|
| Aa | Text #1A1A1A | Background #FAF0E2 | 15.44:1 | Pass | Pass | Excellent — main body text on cream |
| Aa | Text #1A1A1A | BG Alt #F2EDE6 | 14.94:1 | Pass | Pass | Excellent — card text on alt background |
| Aa | Text #1A1A1A | White #FFFFFF | 17.40:1 | Pass | Pass | Maximum — body text on white cards |
| Aa | Text Sec #666666 | Background #FAF0E2 | 5.09:1 | Pass | Pass | Good — captions, meta on cream |
| Aa | Text Sec #666666 | White #FFFFFF | 5.74:1 | Pass | Pass | Good — secondary text on white cards |
| Aa | Text Muted #595959 | Background #FAF0E2 | 6.21:1 | Pass | Pass | Strong — ADA-safe muted text |
| Aa | Accent #C4622D | Background #FAF0E2 | 3.63:1 | Fail | Pass | ⚠️ Large text only (≥18pt). Use #A34E1A for body text. |
| Aa | Accent #C4622D | White #FFFFFF | 4.09:1 | Fail | Pass | ⚠️ Large text only on white. Use #A34E1A for links. |
| Aa | Accent Dark #A34E1A | Background #FAF0E2 | 5.09:1 | Pass | Pass | Good — CTA links, button labels on cream |
| Aa | Accent Dark #A34E1A | White #FFFFFF | 5.73:1 | Pass | Pass | Strong — links, labels on white cards |
| Aa | White #FFFFFF | Accent Dark #A34E1A | 5.73:1 | Pass | Pass | Strong — white text on terracotta buttons |
| Aa | Green #4A7B5A | Background #FAF0E2 | 4.36:1 | Fail | Pass | ⚠️ Large text/icons only on cream. Passes on white (4.92:1). |
| Aa | White #FFFFFF | Green #4A7B5A | 4.92:1 | Pass | Pass | Good — white text on green buttons/badges |
| Aa | BG Dark #2B2D2B | Background #FAF0E2 | 12.31:1 | Pass | Pass | Excellent — dark elements on cream |
| Aa | Cream #FAF0E2 | BG Dark #2B2D2B | 12.31:1 | Pass | Pass | Excellent — cream text in footer/dark sections |
| Aa | Sage #8FAF8A | Background #FAF0E2 | 2.15:1 | Fail | Fail | Decorative only — never use for text. Use Green #4A7B5A instead. |
| – | Border #E5E5E5 | Background #FAF0E2 | 1.14:1 | Decorative | Decorative | Border color — structural only, never used for text |
CSS Variables
Copy-paste ready — these power the entire Aspire Digital design system
/* ===== Aspire Digital Design Tokens ===== */
:root {
/* Colors */
--bg: #FAF0E2; /* warm cream — main canvas */
--bg-alt: #F2EDE6; /* slightly darker cream — surfaces */
--bg-dark: #2B2D2B; /* near-black — dark sections, footer */
--text: #1A1A1A; /* near-black — primary body copy */
--text-sec: #666666; /* secondary — captions, labels */
--text-muted: #595959; /* ADA-safe muted text */
--accent: #C4622D; /* terracotta — CTAs, links, active */
--accent-dark: #A34E1A; /* darker terracotta — button fills */
--border: #E5E5E5; /* default borders, dividers */
--border-light: #F0F0F0; /* light borders, subtle outlines */
--green: #4A7B5A; /* forest green — icons, badges */
--sage: #8FAF8A; /* sage — decorative only, not text */
--charcoal: #1e1e1e; /* deep black-grey — logo charcoal */
--white: #ffffff; /* pure white — cards, overlays */
/* Typography */
--font-display: 'Montserrat', system-ui, sans-serif; /* headings */
--font-accent: 'Playfair Display', Georgia, serif; /* quotes, taglines */
--font-body: 'DM Sans', system-ui, -apple-system, sans-serif; /* body, nav, UI */
/* Type Scale */
--text-hero: clamp(40px, 7vw, 88px); /* H1 hero display */
--text-section: 2.5rem; /* 40px — section titles */
--text-card: 1.5rem; /* 24px — card headings */
--text-body: 1.125rem; /* 18px — body copy */
--text-small: 0.875rem; /* 14px — meta, captions */
--text-label: 0.75rem; /* 12px — labels, caps */
/* Spacing */
--space-section: 80px; /* between major sections */
--space-card: 32px; /* inside cards and panels */
--space-grid: 24px; /* between grid items */
--space-component: 16px; /* inline component spacing */
/* Border Radius */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-full: 9999px; /* pill buttons — GoFundMe style */
/* Shadows */
--shadow-subtle: 0 1px 4px rgba(0,0,0,0.06), 0 2px 10px rgba(0,0,0,0.04);
--shadow-medium: 0 4px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
--shadow-strong: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
}