CareerNomad Brand Guidelines

1. Introduction & Purpose

This guide establishes consistent visual, verbal, and experiential standards for CareerNomad across all touchpoints—web, social, print, and presentations. Whether you’re a team member, partner, or external collaborator, these guidelines ensure every piece of communication reinforces who we are and what we stand for.

What we are: CareerNomad is an AI workforce-intelligence advisory platform that empowers professionals to navigate career transitions with confidence, data, and personalized guidance.

Our brand promise: Expert intelligence delivered with warmth and innovation—we’re the trusted guide who understands your ambitions and has the tools to help you achieve them.

Our brand personality: We’re authoritative (deep expertise, thought leadership), approachable (warm, human, accessible), and innovative (cutting-edge AI, forward-thinking). We sound like a mentor who gets the latest trends and genuinely cares.

2. Visual Identity

2.1 Color Palette

Our colors are intentional. Gold represents premium guidance; the dark palette conveys sophistication and focus; teal and blue differentiate tier offerings. Every color has a purpose.

Primary Colors

Secondary Colors

Gold Variants

Color Usage Rules

• Gold on dark: Always use #C8A84B on #0C0B09 or #131210 (high contrast ✓)
• Gold on light: Always use #8A6A1E on #FAFAF7 or #F2F1EC (maintains contrast)
• Never: Gold on white or very light backgrounds without dark text nearby
• Teal + Blue together: Use sparingly; if both appear on same screen, separate with white space or dark dividers
• Accessibility: All text must meet WCAG AA contrast (4.5:1 for body, 3:1 for large text). Test all color combinations with contrast checker

Theme Toggle

CareerNomad supports dark and light modes. The color system remaps automatically:

• On light mode, --color-bg-dark becomes --color-bg-light, etc.
• All interactive elements maintain their accent color (gold, teal, blue) across both themes
• Never hardcode colors—always use CSS variables for theme compatibility

2.2 Typography

Our typeface system balances boldness (Big Shoulders Display) with clarity (Inter) and warmth (Lora). Each serves a specific purpose.

Font Stack

Size Scale & Usage

Typography Rules

• Headlines never wrap awkwardly: Use overflow-wrap: break-word to prevent long words from breaking layouts
• Line length: Keep body text to 50–75 characters per line for readability (typically 600–750px wide containers)
• Font loading: Big Shoulders Display should load before page render to prevent layout shift
• Web-safe fallbacks: Always provide system fallbacks; never assume custom fonts load on first visit
• Emphasis: Use bold (weight 700) for emphasis, not italics; italics are reserved for quotes and bylines in Lora
• All caps: Acceptable only for tag labels and section markers; avoid in body text

2.3 Logo System

The CareerNomad logo is versatile and works across contexts. Use the correct variant for each application.

Logo Variants

Logo Do’s & Don’ts

✅ Do:

• Use the logo with clear space around it (never crop into it)
• Scale proportionally (never stretch or distort)
• Use lockup.svg on white/light backgrounds, lockup-dark.svg on dark backgrounds
• Use the monochrome version when color reproduction isn’t possible
• Allow logo to breathe—don’t surround with other dense elements

❌ Don’t:

• Rotate or skew the logo
• Change the color of the logo (except monochrome variant)
• Place logo on images where it won’t have sufficient contrast
• Use the full lockup when space is tight—use the mark instead
• Rebuild or redraw the logo; always use provided files
• Add shadows, gradients, or effects to the logo

Logo Files

All logos are stored in docs/logos/ as SVG files. SVGs scale losslessly and work across all media:

• Web: Include SVGs directly in HTML or as CSS backgrounds
• Print: Export to PDF with embedded SVGs for CMYK color conversion
• Social: Export PNG versions (1200px width) for upload

2.4 Spacing & Layout

Consistent spacing creates visual rhythm and makes interfaces feel intentional and professional.

Spacing Scale

Grid & Containers

• Page width: Max-width typically 1280px; full-bleed sections can extend to 100vw
• Padding: 60px vertical (--spacing-page), responsive horizontal (20px mobile, 40px desktop)
• Column gap: 24px (md), 32px (lg)
• Row gap: 24px (md), 32px (lg)

Component Spacing

Responsive Behavior

Spacing scales intentionally for mobile:

• Mobile (< 640px): Reduce gaps by 50% (12px becomes 6px, 24px becomes 12px)
• Desktop (≥ 640px): Use full spacing scale above
• Never remove spacing entirely—minimal breathing room is 4px

3. Component Library

These components form the building blocks of all CareerNomad interfaces. They’re defined in src/styles/global.css and should be consistent across all implementations.

3.1 Buttons

Buttons come in four styles, each with a specific purpose.

Gold Button (Primary CTA)

• Background: #C8A84B (gold)
• Text color: #0C0B09 (dark, for contrast)
• Light mode: Background #8A6A1E, text white
• Padding: 13px vertical × 24px horizontal
• Border radius: 3px (subtle, not rounded)
• Hover: Opacity 0.88, slight lift (+1px translate-y)
• Use for: Main actions (“See Coverage,” “Learn More,” “Start Audit”)

Teal Button (Secondary CTA, Tier-specific)

• Background: #3DB89A (teal)
• Text color: white
• Light mode: Background #1A8C72
• Hover/active: Same as gold (opacity 0.88, lift)
• Use for: Signal Audit tier actions, secondary CTAs

Blue Button (Alternative CTA)

• Background: #4A7CC9 (blue)
• Text color: white
• Light mode: Background #2A5CA8
• Use for: Momentum Sprint tier actions, less prominent than gold

Ghost Button (Tertiary/Outline)

• Background: transparent
• Border: 1px solid #7A7568 (muted)
• Text color: #7A7568 (muted)
• Hover: Border and text become #C8A84B (gold)
• Use for: De-emphasized actions, secondary navigation links

Button States

• Default: Full opacity, no transform
• Hover: Opacity 0.88, translateY(-1px) (subtle lift)
• Active/Pressed: translateY(0) (no lift, grounded feeling)
• Disabled: Opacity 0.5, cursor not-allowed
• Focus: Outline 2px solid gold (for keyboard nav)

Button Text

All button text is uppercase, bold (weight 700), 13px, with letter-spacing +0.06em. Buttons should be concise: “See Coverage” not “Click here to see our press coverage.”

3.2 Form Inputs

Form inputs maintain consistency with the broader design system—minimal, purposeful, theme-aware.

Text Input / Textarea

• Padding: 10px vertical × 14px horizontal
• Font size: 14px (Inter, 400 weight)
• Border: 1px solid #252318 (divider-dark)
• Light mode border: #E2E0D8 (divider-light)
• Background: Transparent (dark mode), white (light mode)
• Text color: #F4EFE6 (white, dark mode), #0E0D0A (ink, light mode)
• Placeholder: #7A7568 (muted, 13px)
• Focus state: Border color becomes #C8A84B (gold)
• Light mode focus: Border becomes #8A6A1E (gold-dark)

Form Labels

All form labels should be associated with inputs via <label for="input-id">. Use class sr-only (screen-reader-only) for visual hidden labels to reduce visual clutter while maintaining accessibility.

Selects / Dropdowns

Selects use the same border/focus styling as text inputs. The option highlight color uses accent-color: var(--color-gold) to override OS blue:

.filter-select {
  appearance: none;
  accent-color: var(--color-gold);
  /* ... other styles ... */
}

3.3 Tag Labels & Badges

Small, uppercase labels that categorize or tag content.

Tag Label Style

• Font: Inter, 9–11px, weight 700
• Letter-spacing: +0.14em (wide)
• Text-transform: uppercase
• Padding: 4px horizontal × 2px vertical (minimal)
• Color: #C8A84B (gold) by default
• Background: Transparent or #FBF6EA (gold-bg) for highlighted tags

Tag Usage

• Categorize content: “Media & Press,” “Speaking,” “Advisory”
• Differentiate tier offerings: Gold (default), Teal (Signal Audit), Blue (Momentum Sprint)
• Mark status: “New,” “Featured,” “Coming Soon”
• Never use for buttons or primary CTAs—use Button component instead

3.4 Cards & Panels

Cards organize related content and create visual hierarchy through background color shifts.

Standard Card

• Background: --color-panel-dark (slightly elevated from page)
• Padding: 24px
• Border: Optional 1px divider or gold accent top (3px border-top for featured items)
• Border radius: 3px (minimal, matches buttons)
• Hover (optional): Subtle shadow or opacity lift on interactive cards

Featured Card

• Border-top: 3px solid gold
• Background: --color-panel-dark
• Use for: Featured press items, primary offerings, important announcements

Light Mode Cards

• Background: --color-panel-light
• Border color adjusts to --color-divider-light
• Maintains same padding and radius

4. Photography & Imagery

Visual imagery shapes how people perceive CareerNomad. Our approach is authentic, human-centered, and intentional.

4.1 Photography Style

Aesthetic:

• Real people in genuine moments (not staged or overly polished)
• Warm, natural lighting (avoid harsh shadows or overly bright white backgrounds)
• Diversity in representation (age, ethnicity, gender, ability, background)
• Professional context (people in work settings, mentoring moments, collaborative environments)
• Emotion: Focused, thoughtful, confident (never anxious, desperate, or excessively happy)

Color treatment:

• Warm color grading (slight amber/gold tint to match brand warmth)
• Consistent saturation across similar image categories
• No extreme filters or HDR effects
• If color-correcting, use consistent presets across a series

Composition:

• Leading lines that draw the eye toward faces and moments
• Negative space around subjects (avoid cramped framing)
• Close-ups and medium shots preferred over wide shots (makes moments feel intimate)
• Rule of thirds for landscape orientation, centered for portraits

4.2 When to Use Photography vs. Illustration

4.3 Image Optimization

• Web: Compress to < 100KB (use WebP format where possible)
• Print: 300 DPI minimum, CMYK color space
• Social: Provide multiple aspect ratios (1:1 for profiles, 16:9 for feeds, 9:16 for stories)
• Alt text: Always include descriptive alt text (see accessibility guidelines below)

4.4 Illustration Style (if used)

Should complement photography, not compete with it:

• Minimalist line style (not overly detailed)
• Same color palette as brand (gold, teal, blue accents on transparent background)
• Simple geometric shapes (circles, lines, subtle shadows)
• Use sparingly; photography is the primary visual medium

5. Voice & Tone

Words matter. Your voice is how you sound; your tone is how you feel about what you’re saying.

5.1 Brand Voice Attributes

Our voice is:

• Expert: We know this space intimately. We speak with confidence and credibility.
• Human: We use conversational language. We say “you” not “the user.” We acknowledge real challenges.
• Warm: We’re a mentor, not a corporate entity. We care about your success.
• Clear: We explain complex concepts simply. No jargon without context.
• Forward-thinking: We reference trends, AI, and what’s next—but grounded in actionable advice.

5.2 Tone by Context

Web Copy (Main Site, Pages)

• Tone: Authoritative yet approachable
• Example: “Navigate your career transition with confidence. Our AI-powered insights and personalized guidance help you make smarter moves.”
• Avoid: Corporate buzzwords (“synergy,” “leverage,” “empower”)
• Use contractions: “We’re,” “It’s,” “You’ll” (feels conversational)

Social Media (LinkedIn, Twitter/X, Instagram)

• Tone: Warm, relatable, slightly informal
• Example: “Career transitions don’t have to feel like guessing. Here’s what our data shows about your next move.”
• Encourage: Questions, real stories, vulnerability
• Avoid: Salesy tone, excessive hashtags, stock phrases (“Follow for tips!”)

Email (Newsletters, Campaigns)

• Tone: Personal, mentor-like, actionable
• Example: “Your Signal Audit is ready. Here’s what we found about your market fit—and your next move.”
• Focus: Value first, ask second
• Avoid: All-caps, excessive exclamation marks

Presentations (Pitches, Decks)

• Tone: Confident, data-backed, visionary
• Example: “The career transition market is evolving. This is what we’re seeing—and why it matters.”
• Use: Short sentences, data visualization, strategic pauses
• Avoid: Dense paragraphs, animations that distract

Support / Help Content

• Tone: Patient, encouraging, solution-focused
• Example: “Having trouble with your Audit? Here’s what typically happens—and how we fix it.”
• Include: Step-by-step clarity, what to expect next
• Avoid: Jargon, blame (“You didn’t…“)

5.3 Words to Embrace

5.4 Words/Phrases to Avoid

5.5 Tone Checklist

Before publishing any major copy, ask:

• Does it sound like a mentor (not a salesperson)?
• Is it clear to someone outside our industry?
• Does it acknowledge real challenges?
• Is it specific, not generic?
• Does it lead with value, not features?
• Would I say this in a one-on-one conversation?

6. Usage Guidelines by Medium

6.1 Web

Component Patterns

• Header/Nav: Logo + left, navigation links + right (dark mode default), theme toggle top-right
• Hero Section: Dark background, big headline (Big Shoulders 48–64px), subheader (Lora serif), 2 CTAs (gold primary, ghost secondary)
• Content Sections: Alternate --color-bg-dark and --color-panel-dark for visual rhythm
• Forms: Minimal labels (use sr-only for visual hiding), gold focus state, clear field grouping
• Footer: Dark background, 3 columns (company info, links, contact), subtle gold rule separator

Responsive Behavior

• Mobile-first design: Start at small screen, scale up
• Touch targets: Buttons and interactive elements minimum 44×44px
• Type scaling: Use fluid typography (e.g., clamp(14px, 2vw, 16px)) to scale smoothly across viewport
• Image aspect ratios: Use aspect-ratio CSS property for consistent spacing

Accessibility Requirements

• Alt text: Every image must have descriptive alt text (e.g., “Patrice Williams-Lindo speaking at tech conference” not “image”)
• Semantic HTML: Use <header>, <nav>, <main>, <footer>, <section> for document structure
• Color contrast: All text must pass WCAG AA (4.5:1 for body, 3:1 for large text)
• Keyboard navigation: All interactive elements reachable via Tab key, visible focus states (gold outline)
• ARIA labels: Forms with hidden labels need aria-label or aria-labelledby
• Skip links: Provide “Skip to main content” link for keyboard users
• Focus visible: Always show focus state; never outline: none without replacement

Animations & Transitions

• Preference: Respect prefers-reduced-motion media query (users with vestibular issues)
• Easing: Use ease-in-out for smooth, professional feel
• Duration: 200–400ms for micro-interactions, up to 800ms for page transitions
• Avoid: Distracting auto-playing video, strobing effects, parallax on mobile
• Principle: Animate purpose (draw attention, provide feedback), not decoration

Code Standards

• Use CSS variables for all colors and spacing (var(--color-gold))
• Component classes follow BEM-lite naming: .btn-gold, .card, .tag-label
• Never hardcode colors; always use design tokens
• Test in both dark and light modes before shipping

6.2 Social Media

Platform Specifications

Visual Guidelines

• Branding: Always include logo or gold accent somewhere on image
• Text on images: Keep text minimal, high contrast with background (white text on dark images)
• Photography: Use brand photography style (real people, warm, authentic)
• Templates: Create reusable templates in Figma (pull quote format, insight graphic, speaker announcement)

Caption Tone

• LinkedIn: Professional, thought-leadership focused, educational (“Here’s what we’re seeing about career transitions in 2026…”)
• Twitter/X: Conversational, reactive, witty (“Just published our quarterly report. The data? Surprising.”)
• Instagram: Slightly more personal, behind-the-scenes, community-building (“Meet the team that’s building your career compass…”)

Hashtag Strategy

• LinkedIn: 3–5 relevant hashtags (#AIRecruitment, #CareerDevelopment, #FutureOfWork)
• Twitter/X: 1–2 max (avoid hashtag spam)
• Instagram: 15–30 (use mix of broad and niche hashtags)
• Avoid: Unrelated hashtags, trademarked hashtags, anything political/divisive

Link & CTA Strategy

• LinkedIn: Direct to relevant landing page; use UTM parameters for tracking
• Twitter/X: Short links (use bit.ly or similar); thread format for longer insights
• Instagram: Link in bio + mention in caption (“Link in bio for the full report”)

6.3 Print

Business Card Specifications

• Dimensions: 3.5” × 2.0” (standard US), 90×50mm (international)
• Bleed: 0.125” (1/8”) on all sides
• Color mode: CMYK (convert from RGB)
• Safe zone: 0.25” margin from edges (content inside safe zone)
• Paper: Uncoated white or cream (shows gold warmth)
• Finish: Matte (professional) or spot gloss on logo only (elegant accent)

Letterhead Specifications

• Size: 8.5” × 11” (US Letter)
• Logo placement: Top-left, 1.5” from top, 0.5” from left edge
• Margins: 0.75” on all sides
• Gold rule: Subtle 1px rule below header (0.5” below logo)
• Footer: Company details (email, phone, address) bottom-right, 9pt font
• Paper: Bright white 24lb bond (crisp, professional)

Brochure / Marketing Collateral

• Folds: Tri-fold (8.5” × 11”) with 0.125” gutter between folds
• Color: Use dark backgrounds sparingly (ink-heavy); prefer white/light with gold accents
• Typography: Big Shoulders Display for section headers, Inter for body
• Photography: Full-bleed images on covers, contained within panels inside
• Bleed: Always include 0.125” bleed for full-coverage images

Print File Preparation

• Format: PDF (not InDesign/Illustrator files)
• Fonts: Embed all fonts; never send with “missing fonts”
• Resolution: Images 300 DPI minimum; check with print vendor for color profile
• Color: Convert to CMYK before final PDF
• Marks: Include crop marks and bleed marks for printer guidance

6.4 Presentations

Slide Deck Structure

Standard Slide Layouts:

Typography on Slides

• Headline: Big Shoulders Display, 48–56px, bold (weight 800), white text
• Subheading: Lora, 24–32px, weight 500, gold accent color
• Body text: Inter, 18–24px, weight 400, white text, bullet points (no paragraphs)
• Data labels: Inter, 14–16px, weight 600, white or gold for emphasis
• Minimal text: Maximum 5 bullet points per slide; rely on speaker notes for detail

Color & Design

• Background: Dark (#0C0B09) with gold accent bars or full-bleed images
• Accent elements: Gold rules, teal/blue highlights for emphasis
• Imagery: Use brand photography; scale to full-bleed when impactful
• Whitespace: Generous margins (at least 1” on all sides); avoid clutter

File Formats

• Presentation software: Google Slides, Keynote, or PowerPoint (in that order for cross-compatibility)
• Export: PDF for sharing externally; native format for editing
• Font embedding: Embed Big Shoulders Display and Lora in exported PDFs

Design Principles

• One idea per slide: Avoid multi-topic slides
• Visible from distance: Test readability from 20 feet away
• Progressive reveal: Use animations sparingly (fade-in for bullet points, that’s it)
• Speaker notes: Always include detailed notes below each slide
• Accessibility: Provide alt text for images, descriptive slide titles, high contrast

7. Do’s & Don’ts

7.1 Visual Do’s & Don’ts

Logo

✅ Do:

• Use provided SVG logo files from docs/logos/
• Maintain clear space around logo (1× logo height minimum)
• Scale proportionally to any size
• Use full lockup (lockup.svg) on light backgrounds, dark variant on dark backgrounds

❌ Don’t:

• Change logo colors or add effects
• Rotate, skew, or distort the logo
• Recreate the logo in any design tool
• Place logo too close to other branding elements
• Use logo smaller than 48px width (mark), 120px (lockup)

Colors

✅ Do:

• Use CSS variables for all colors (var(--color-gold))
• Test color combinations for accessibility contrast
• Maintain consistent gold/teal/blue across all media
• Use light and dark mode appropriately (toggle provided)

❌ Don’t:

• Mix teal and blue in the same visual hierarchy without clear separation
• Use gold on white without dark supporting text
• Hardcode hex colors instead of CSS variables
• Change colors for personal preference—use consistent palette
• Forget accessibility: Never rely on color alone to convey meaning

Typography

✅ Do:

• Use Big Shoulders Display for headlines (h1–h2)
• Use Inter for body and UI elements
• Use Lora for subheadings, quotes, accents
• Maintain consistent sizing across platforms
• Ensure adequate contrast (white on dark, dark on light)

❌ Don’t:

• Mix three+ typefaces on a single page
• Use Big Shoulders Display for body text (too bold)
• Change font weights unnecessarily
• Set type smaller than 14px for body text
• Forget to include fallback fonts

Imagery

✅ Do:

• Use real photography of real people
• Include diverse representation (age, ethnicity, ability, background)
• Compose with warm, natural lighting
• Provide descriptive alt text for all images
• Optimize for web (< 100KB, WebP where possible)

❌ Don’t:

• Use stock photos that look staged or overly perfect
• Crop people’s faces too tightly
• Apply extreme filters or heavy color grading
• Forget alt text on images
• Use low-resolution images (< 72 DPI for web, < 300 DPI for print)

7.2 Verbal Do’s & Don’ts

Tone

✅ Do:

• Sound like a mentor: expert but warm
• Use “you” and conversational language
• Show expertise through specific insights, not buzzwords
• Acknowledge real challenges and emotions
• Lead with value and outcomes

❌ Don’t:

• Use corporate jargon (“synergy,” “leverage,” “empower,” “innovation”)
• Sound salesy or overly promotional
• Use “we” exclusively—make it about the reader
• Make promises you can’t keep
• Over-explain or be condescending

Word Choice

✅ Do:

• Use contractions (“You’re,” “It’s,” “We’ve”)
• Use action verbs (“Discover,” “Explore,” “Navigate”)
• Be specific (“Increase your salary by 15% or more” not “increase income”)
• Use numbers and data
• Write shorter sentences in digital copy

❌ Don’t:

• Use passive voice excessively (“It is recommended…” → “We recommend…”)
• Use ALL CAPS except for button labels or tag labels
• Over-use exclamation marks (one per section max)
• Use words you wouldn’t say in conversation
• Assume industry knowledge without context

Platform-Specific

8. Resources & Links

Brand Assets

• Logo files: docs/logos/ (SVG: lockup, mark, monochrome variants)
• Brand fonts: Big Shoulders Display, Inter, Lora (add to your Figma/Adobe library)
• Design tokens: src/styles/global.css (CSS variables for colors, typography, spacing)
• Component styles: Buttons, forms, cards, tags defined in src/styles/global.css

Design Tools & Files

• Figma design system (if applicable): [Link to shared Figma file]
• Presentation templates: [Link to Keynote/Google Slides templates]
• Social media templates: [Link to Figma social template file]

Development Resources

• HTML/CSS: See src/styles/global.css for all design tokens and component definitions
• Sanity schema: studio/schemas/ for content modeling (blog, speaking, press)
• Component library: React/Astro components in src/components/ (Nav, Footer, Button, Card, etc.)

External References

• Color contrast checker: https://webaim.org/resources/contrastchecker/
• Responsive design tester: https://responsivedesignchecker.com/
• Accessibility guide: https://www.w3.org/WAI/WCAG21/quickref/
• Typography resources: https://fonts.google.com (for font pairings and usage)

Questions or Updates?

If you have questions about brand application or want to propose updates to these guidelines, contact the brand team:

• In-house: [Internal brand lead / design lead]
• External partners: press@careernomad.com

Version History

Appendix: Accessibility Checklist

Before shipping any design or copy, verify:

• Color contrast: All text passes WCAG AA (4.5:1 body, 3:1 large text)
• Alt text: Every image has descriptive alt text
• Keyboard nav: All interactive elements reachable via Tab, visible focus state
• Semantic HTML: Uses proper heading hierarchy, landmark elements
• ARIA labels: Forms and complex components have ARIA attributes where needed
• Responsive: Design tested at 320px, 768px, 1024px+ viewports
• Motion: Respects prefers-reduced-motion setting
• Readability: Text at minimum 14px, line-height ≥ 1.5, line length 50–75 characters
• Links: Descriptive link text (“Learn more” describes destination, not just “click here”)
• Form labels: Every form field has associated label (visible or sr-only)

Last updated: June 17, 2026 Questions? Contact [Brand Lead Name] or the design team.