Every asset. Every format.
One click.
Download logos as SVG, PNG or JPG at any size. Copy colors as HEX, RGB, HSL or CSS. Grab fonts, tokens, templates. Everything the practice ships — instantly usable.
Logo Library
7 files · SVG native · PNG/JPG on demandClick any download button to grab the SVG instantly, or hit "PNG…" to pick a size + background. Every logo scales without loss.
Color Palette
6 swatches · click any code to copyType System
3 families · Google Fonts · Free foreverAll three families are on Google Fonts. Grab the import snippet, copy the CSS stack, or open the Google Fonts page to download the .ttf/.woff2.
Display · Serif
Playfair Display · 5 weights
Aa
Regular · Scripture
Semibold · Subheads
Bold · Headlines
Extrabold · Hero
Italic · Emphasis
Body · Sans-Serif
Inter · 5 weights
Aa
Light · Fine print
Regular · Body copy
Medium · Emphasis
Semibold · UI
Bold · CTAs
Accent · Monospace
IBM Plex Mono · 3 weights
Aa
Regular · Metadata
Medium · Stats
Semibold · Tags & labels
Templates & Documents
13 assets · Live HTML · Print to PDFOpen any template to view/edit. Everything prints beautifully to PDF via Cmd/Ctrl+P.
Design Tokens
CSS · Tailwind · SCSS · JSONPaste-ready code snippets for every stack. The palette, the type, the spacing scale, the radius scale — pick your format.
CSS Custom Properties
/* The Contracting Preacher — Design Tokens */ :root { /* Colors */ --navy: #0A1628; --gold: #C9A961; --gold-dark: #B08D3F; --gold-light: #E4CB92; --ivory: #F7F3EA; --red: #8B1F1F; --slate: #4A5568; /* Type */ --font-serif: 'Playfair Display', Georgia, serif; --font-sans: 'Inter', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* Scale (4pt base) */ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px; --sp-2xl: 48px; --sp-3xl: 64px; --sp-4xl: 96px; }
Tailwind Config Extension
// tailwind.config.js module.exports = { theme: { extend: { colors: { tcp: { navy: '#0A1628', gold: '#C9A961', 'gold-dark': '#B08D3F', 'gold-light': '#E4CB92', ivory: '#F7F3EA', red: '#8B1F1F', slate: '#4A5568', } }, fontFamily: { serif: ['Playfair Display', 'Georgia', 'serif'], sans: ['Inter', 'system-ui', 'sans-serif'], mono: ['IBM Plex Mono', 'monospace'], } } } }
SCSS Variables
// _tokens.scss $navy: #0A1628; $gold: #C9A961; $gold-dark: #B08D3F; $gold-light: #E4CB92; $ivory: #F7F3EA; $red: #8B1F1F; $slate: #4A5568; $font-serif: 'Playfair Display', Georgia, serif; $font-sans: 'Inter', system-ui, sans-serif; $font-mono: 'IBM Plex Mono', monospace;
JSON (Style Dictionary / Figma Tokens)
{
"color": {
"navy": { "value": "#0A1628" },
"gold": { "value": "#C9A961" },
"ivory": { "value": "#F7F3EA" },
"red": { "value": "#8B1F1F" },
"slate": { "value": "#4A5568" }
},
"font": {
"serif": { "value": "Playfair Display" },
"sans": { "value": "Inter" },
"mono": { "value": "IBM Plex Mono" }
}
}