Design Library
Brand tokens, type specimens, UI components, and accessibility guidelines for Aspire Digital.
Logo Suite v2
All approved logo variants for Aspire Digital. Use the right asset for the context — see Logo Guidelines below for full usage rules, clear space, and do / do-not guidance.
Primary Logo
The full Aspire Digital lockup — "aspire" wordmark, green dot on the "i," integrated green e‑pill, and "DIGITAL." Default for every context where the full business name should be clear: website header, proposals, invoices, email signatures, decks, print, social banners, marketing materials.
Punchout
Single-color knockout versions. Use when printing on promotional items, engraving, embroidery, or any single-colour reproduction. Black punchout on white is the preferred print-safe version; white punchout on black is for dark materials.
Brandmark
The "a" monogram inside the green pill — the standalone icon. Use when the full wordmark doesn't fit: app icons, favicons, social profile photos, small-format print, co-branding lockups. Never use at less than 24px.
Wordmark
Just the "aspire DIGITAL" text — no pill, no icon. Limited use: co-branding situations where the brandmark already appears nearby, or tight horizontal spaces where the full lockup won't fit. Never use as a primary identifier on its own.
Social Profiles
Square and circular crops sized for platform profile photos. Upload the square version to platforms that allow custom crops; use the circle crop on platforms that force circular display (Facebook, Twitter/X, LinkedIn).
Social Banners
Platform-specific cover and banner images. Each is sized to the current platform spec. Use the Master Wide for any platform not listed — crop to fit. Never stretch or compress; download the platform-specific version instead.
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 EB Garamond italic 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
EB Garamond
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; }
Footer Credit Badge — Crafted by Aspire Digital
Placed in the footer of every site Aspire builds. Forest-green pill (#4A7B5A) with cream letterforms (#FAF0E2). Links to madebyaspire.com. Swap the pill fill to match the client's brand palette for client sites — this is Aspire's own green default.
<!-- Aspire Digital credit badge — add to every client footer -->
<p class="footer-credit"></span>
<a href="https://madebyaspire.com" target="_blank" rel="nofollow noreferrer" class="credit-badge-pill">
<!-- SVG pill mark + credit-sep span -->
Crafted by Aspire Digital
</a>
</p>
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 V2 Design Tokens ===== */
:root {
/* Colors — V2 palette (locked 2026-04-16) */
--terra: #C4622D; /* terracotta — highlights, EB Garamond em, trust band */
--terra-dark: #A34E1A; /* darker terracotta — button hover fills */
--forest: #4A7B5A; /* forest green — icons, tags, secondary accent */
--hunter: #2D5940; /* hunter green — CTAs, primary buttons (V2) */
--charcoal: #2C3340; /* charcoal — body text, headings, dark sections */
--cream: #FAF0E2; /* cream — section backgrounds, hero bg (light mode) */
--white: #ffffff; /* white — logo strip, card sections */
/* NOTE: Sage #8FAF8A is RETIRED as of V2 — do not use */
/* Typography */
--f-serif: 'DM Serif Display', Georgia, serif; /* headings (400 weight) */
--f-accent: 'EB Garamond', Georgia, serif; /* accent/quotes — always italic */
--f-sans: 'DM Sans', system-ui, -apple-system, sans-serif; /* body, nav, UI */
--f-num: 'Unbounded', sans-serif; /* metric/stat numbers */
/* Layout */
--section-pad: clamp(80px, 10vw, 140px); /* vertical section padding */
--gutter: clamp(24px, 5vw, 64px); /* horizontal page gutter */
/* Type Scale */
--text-hero: clamp(40px, 7vw, 88px); /* H1 hero display */
--text-section: clamp(32px, 4vw, 52px); /* section H2 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 — eyebrow labels, caps */
/* Gradient — metric/stat numbers */
--gradient-num: linear-gradient(120deg, #2C3340 0%, #C4622D 46%, #4A7B5A 100%);
/* Border Radius */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-xl: 20px; /* engagement cards, large panels */
--radius-full: 9999px; /* pill buttons, tags */
/* 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);
}