Typography
BRAND TYPECedar’s brand uses a clean, modern headline font for emphasis and a highly readable sans-serif for long-form content. Keep line-length comfortable and spacing generous, similar to the homepage sections.
Cedar Cash Home Buyers
Headings / Display: Expose (700)
Use Expose for headings and hero-style display text. Prefer the official logo files whenever possible instead of recreating the logo in text.
Practical usage rules
- Headings: keep short and confident. Avoid excessive punctuation.
- Body text: prioritize clarity. Break long sections into 2 to 4 sentence paragraphs.
- Buttons and nav: use bold weight so CTAs read quickly.
- Do not stretch or distort text to “fit” a layout. Adjust spacing instead.
Content
Body / UI Copy: Switzer (300 / 700)
Use Switzer 300 for paragraphs and Switzer 700 for buttons, navigation, and emphasis.
Practical usage rules
- Headings: keep short and confident. Avoid excessive punctuation.
- Body text: prioritize clarity. Break long sections into 2 to 4 sentence paragraphs.
- Buttons and nav: use bold weight so CTAs read quickly.
- Do not stretch or distort text to “fit” a layout. Adjust spacing instead.
Colors
PALETTECedar’s palette is intentionally minimal. Use green tones for trust and emphasis, and keep backgrounds clean. When in doubt: white background, green CTAs, and subtle gray borders.
Primary
Cedar Green
#05622E
rgb(5, 98, 46)
hsl(146, 90%, 20%)
Secondary
Logo Green
#019342
rgb(1, 147, 66)
hsl(147, 99%, 29%)
Dark
Deep Cedar
#044922
rgb(4, 73, 34)
hsl(146, 90%, 15%)
Text
Carbon Black
#212529
rgb(33, 37, 41)
hsl(210, 11%, 15%)
Links
Muted Gray
#6C757D
rgb(108, 117, 125)
hsl(208, 7%, 46%)
Background
Pure White
#FFFFFF
rgb(255, 255, 255)
hsl(0, 0%, 100%)
Context
Soft Light
#F7F7F7
rgb(247, 247, 247)
hsl(0, 0%, 97%)
Border
Soft Border Gray
#EAEAEA
rgb(234, 234, 234)
hsl(0, 0%, 92%)
Color usage guidance
- Primary (#05622E): headers, section bars, darker backgrounds behind short text.
- Secondary (#019342): icons, accents, badges, CTA highlights.
- Light (#F7F7F7): separate sections while keeping a clean look.
- Border (#EAEAEA): subtle borders for a premium feel.
Logo Files
DOWNLOADSAlways use the official logo files. Avoid recreating the mark in Canva or using screenshots. Choose the version that best matches the background and contrast.
Simple logo do’s
- Do not stretch, skew, rotate, or add drop shadows to the logo.
- Do not change logo colors. Use approved versions only.
- Keep clear space around the logo equal to at least the height of the tree icon.
- When exporting for web: use WebP where possible; for email signatures: PNG is often safest.
Email Signature
GMAILUse this generator for consistent signatures across the team. It copies rich HTML so it pastes correctly in Google Workspace (Gmail). Fill out the fields, click copy, and paste into the Gmail signature editor.
Common fixes if Gmail strips formatting
- Paste directly into the Gmail signature editor (not into a doc first).
- Use Chrome for best results. Allow clipboard permissions if prompted.
- If the logo does not load, confirm the logo URL is absolute and publicly accessible.
- If spacing looks off, keep the logo width between 180 and 240 for most inbox layouts.
Buttons
UICedar’s homepage uses clear green CTAs. Keep button text short, action-oriented, and consistent across pages. For forms and primary actions, use the green button style that matches the site.
Approved examples
Button usage notes
- Primary: use for actions and form submits.
- Secondary: use for secondary CTAs where you still want strong emphasis.
- Outline: use for less-critical links or supporting navigation within a page.
- Keep one primary CTA per section when possible to reduce visual clutter.
