Walnut Heritage
Brand tokens, type specimens, UI components, and WCAG 2.1 AA accessibility proof for Keeler Carpentry — modeled on the Modivana template aesthetic.
Logo Suite
The circular Keeler seal — traditional Roman-capital serif letterforms arcing around a stylized K-axe mark. Use the toggle to preview on light or dark backgrounds. Download buttons link directly to the source files.
Primary Seal
Full circular seal with traditional Roman-capital letterforms. Click a download button to save the source PNG.
Wordmark
"KEELER CARPENTRY" typeset in Cinzel SemiBold — a Roman-capital serif chosen to echo the letterforms inside the original seal. For footers, email signatures, invoices, and any horizontal placement where the full seal is too tall.
Horizontal Lockup
Full seal on the left, wordmark on the right. Use for website headers, letterheads, email signatures, and anywhere a strong horizontal brand presence is needed.
Stacked Lockup
Seal on top, wordmark below. For social media profile images, square crops, business cards, and print layouts where vertical space is available.
Monogram
A single "K" in Cinzel Bold inside a thin circular outline. For profile avatars, watermarks, embossed stationery, and any extreme-small application.
Favicon Set
Browser tab icons and Apple touch icon. The seal is tightly cropped and optimized for readability at each size.
Social Media Assets
Profile avatars and cover images sized for each platform. Seal centered on burnt copper for profile images; seal + wordmark + tagline on walnut for cover art.
Clear Space & Minimum Size
Always leave clear space equal to the height of the inner K-mark around the seal. Never lock text, borders, or other logos inside that zone. The seal toggles with the preview mode above.
The logo suite currently ships as dark and light PNG seals. Full logo suite deliverables — horizontal lockup, wordmark-only, K-mark brandmark, stacked, favicon set, and social profile crops — will be added once Jaime approves the SVG redraw.
Color Palette
Eight colors, two coppers. Warm cream canvas, walnut ink, burnt copper for hero moments, burnt copper for fine print. Every pairing is engineered for WCAG 2.1 AA.
Real UI pairings in context. Every combo below meets or exceeds WCAG 2.1 AA for its usage class.
One copper, deeper and more saturated than the original. Burnt copper works as a background color with cream or white text, and passes WCAG AA at every text size.
Typography
Fraunces for warmth and heritage weight — Inter for modern, quiet reliability. A variable serif that echoes the logo's Roman-capital letterforms, paired with a humanist sans that disappears so the words can lead.
built to last.
Weights used: 300 Light · 400 Regular · 500 Medium (primary) · 600 Semi-Bold · 700 Bold — each with italic.
Use for: Hero headlines, section titles, italic eyebrows, editorial accents, blockquotes, card headings.
Why: Fraunces is a variable serif with warmth, generous terminals, and just enough character. It echoes the classical letterforms in the Keeler seal without feeling stuffy. At 500-weight it reads refined; in italic it carries the craftsman's voice.
Weights used: 300 Light · 400 Regular (body) · 500 Medium · 600 Semi-Bold (labels, buttons) · 700 Bold.
Use for: Body paragraphs, navigation, form fields, button labels, metadata, tags, captions.
Why: Inter is engineered for screens at every size. It carries the body copy without drawing attention, and pairs cleanly with Fraunces at every scale — from 12px uppercase labels to 18px reading text.
Heading Scale
Fraunces 500 across the scale, with tight line-height and negative letter-spacing at the display sizes. Italic is reserved for emphasis inside a heading, not whole headings.
Weight: 500
Line-h: 1.02
Tracking: −0.012em
crafted for the long haul.
Weight: 500
Line-h: 1.1
Tracking: −0.008em
Weight: 500
Line-h: 1.15
Weight: 500
Line-h: 1.2
Weight: 600
Line-h: 1.3
With leading rule
Copper · Fraunces
Weight: 600 · Caps
Letter-sp: 1.8px · Inter
Paragraph Styles
Body text rendered at actual sizes. Inter carries body and meta; Fraunces italic handles pull quotes and editorial accents.
Line-h: 1.65
Weight: 400
Inter
Line-h: 1.6
Weight: 400
Inter
Line-h: 1.35
Italic · Weight: 500
Fraunces
Line-h: 1.6
Weight: 400
Inter
Letter-sp: 1.8px
Weight: 600 · Caps
Inter
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 work together in the Keeler voice.
About Keeler Carpentry
Keeler Carpentry is a Central Ohio custom carpentry studio built on one belief: the work should outlive the room it's in. For two decades we've specialized in high-end residential remodeling — custom kitchens, finished basements, and built-in millwork for homeowners who care about how a space is built, not just how it looks on opening day.
We take the time the work requires. Every joint is tuned, every reveal measured twice, every finish applied with the understanding that a homeowner is going to run their hand across it for the next twenty years.
"A Keeler project is judged a decade from now, not at the punch list. That's why the work takes the time it takes."
— Our working philosophy
What we build
We focus our craft on three categories of residential work so we can go deep on each one instead of spreading thin across the whole trade.
- Custom Kitchens — hand-built cabinet boxes, tuned reveals, integrated hardware, heirloom-grade finishing
- Finished Basements — warm, dry, properly insulated living space that feels like the rest of the house
- Built-ins & Millwork — library walls, window seats, mantels, and trim carpentry
- Licensed & insured in the State of Ohio with a 5-year workmanship warranty
- Every project includes a detailed written scope before a single tool comes out of the van
Our process
Good carpentry is slow carpentry done with intention. That means fewer projects per year, more care per joint, and a build cadence that keeps you informed at every step.
- On-site consultation — we walk the space, ask how you live in it, and listen more than we talk
- Written scope & design — exact materials, finishes, dimensions, and a fixed timeline
- Material selection — samples in the room you're building, not a showroom
- Build & finish — in-house carpenters, never subbed out
- Walk-through & warranty — you don't sign off until every joint is one you'd show another carpenter
Ready to talk about a project? Book a free on-site consultation and we'll walk the room with you.
Forms
Inputs, textareas, pill-selectors, and checkboxes tuned to the walnut + copper palette. Focus rings use burnt copper.
We'll reply within 1–2 business days.
Select all that apply.
No spam, ever. Unsubscribe anytime.
Icons
Material Symbols Outlined — the icon set used across the Keeler site. 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
Stats Band · Scroll-animated counter
Two decades of custom carpentry across Central Ohio.
Service Cards
Contrast Ratios
WCAG 2.1 AA compliance audit for every Keeler Carpentry color pairing. Ratios calculated using the WCAG relative luminance formula.
| Preview | Foreground | Background | Ratio | AA Normal | AA Large / UI | Notes |
|---|---|---|---|---|---|---|
| Aa | Walnut #3B2314 | Cream #FAF6EF | 14.2:1 | Pass | Pass | Workhorse pairing — headings, body, links on cream. |
| Aa | Walnut #3B2314 | White #FFFFFF | 15.0:1 | Pass | Pass | Maximum — body text on white cards. |
| Aa | Charcoal #2C2C2C | Cream #FAF6EF | 13.1:1 | Pass | Pass | Body copy alternate — softer than walnut. |
| Aa | Burnt Copper #9B5A1F | Cream #FAF6EF | 4.94:1 | Pass | Pass | Primary copper — all text sizes, links, buttons, ornament. AA safe. |
| Aa | Burnt Copper #9B5A1F | White #FFFFFF | 5.35:1 | Pass | Pass | Copper on white cards — passes AA for body text. |
| Aa | Cream #FAF6EF | Walnut #3B2314 | 14.2:1 | Pass | Pass | Dark hero sections, footer, testimonial bands. |
| Aa | Cream #FAF6EF | Burnt Copper #9B5A1F | 4.94:1 | Pass | Pass | Cream text on copper button fills. Hero button pattern — AA safe. |
| Aa | Sage #6B7F5E | Cream #FAF6EF | 3.23:1 | Fail | Pass | Large text only (24px+). Never body text on cream. |
| Aa | Sage #6B7F5E | Walnut #3B2314 | 4.40:1 | Fail | Pass | Metadata, tags on dark sections at large sizes. Near AA. |
| Aa | Warm Oak #C4913A | Cream #FAF6EF | 2.48:1 | Fail | Fail | Decorative only — dividers, ornaments, patterns. Never text. |
| – | Border rgba(59,35,20,0.14) | Cream #FAF6EF | 1.10:1 | Decorative | Decorative | Warm cream border — structural only, never used for text. |
CSS Variables
Copy-paste ready — these tokens power the entire Keeler Carpentry design system.
/* ===== Keeler Carpentry — Walnut Heritage Tokens ===== */
:root {
/* Colors */
--bg: #FAF6EF; /* cream — primary canvas */
--bg-alt: #FFFFFF; /* white — card surfaces on cream */
--bg-dark: #3B2314; /* dark walnut — dark sections, footer */
--text: #2C2C2C; /* charcoal — primary body copy */
--text-sec: rgba(59,35,20,0.72); /* walnut-muted — captions, meta */
--text-muted: rgba(59,35,20,0.58); /* lighter walnut-muted */
--accent: #9B5A1F; /* burnt copper — large text, buttons, ornament */
--accent-dark: #9B5A1F; /* burnt copper — small text, inline links (AA safe) */
--border: rgba(59,35,20,0.14); /* warm cream border */
--border-light: rgba(59,35,20,0.08); /* lighter warm border */
--green: #6B7F5E; /* sage — nature accent, large text highlights */
--sage: #C4913A; /* warm oak — decorative only, never text */
--charcoal: #3B2314; /* walnut — logo ink */
--white: #ffffff; /* pure white — cards, overlays */
/* Typography */
--font-display: 'Fraunces', Georgia, serif; /* headings, accents */
--font-accent: 'Fraunces', Georgia, serif; /* italic eyebrows, quotes */
--font-body: 'Inter', system-ui, -apple-system, sans-serif; /* body, nav, UI */
/* Type Scale */
--text-hero: clamp(44px, 6vw, 76px); /* H1 hero display — Fraunces 500 */
--text-section: 2.4rem; /* 38px — 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; /* Modivana-style pill buttons */
/* Shadows — tuned to walnut tones */
--shadow-subtle: 0 1px 4px rgba(59,35,20,0.06), 0 2px 10px rgba(59,35,20,0.04);
--shadow-medium: 0 4px 16px rgba(59,35,20,0.10), 0 1px 4px rgba(59,35,20,0.06);
--shadow-strong: 0 8px 32px rgba(59,35,20,0.14), 0 2px 8px rgba(59,35,20,0.08);
}