v1.0Camcgoy brand system
Style guide.
A living spec for how Camcgoy looks, sounds, and behaves. Every token, component, and rule on this page is the same one used across the site.
01
At a glance
Audience
Young professionals (23–40) and creators who want their message to land. Founders, marketing leads, ops leads, and client-facing leads.
Positioning
Calm, grounded personal brand focused on clear communication. Clear structure, lightly personal, built for clarity across DMs, Zoom, Slack, and posts.
Essence
Clarity · Empathy · Curiosity
Promise
Help curious builders communicate clearly and confidently, without over-explaining.
02
Voice and tone
Voice pillars
Curious. Calm. Direct. Human. The voice stays consistent; the tone shifts to match the situation.
Tone by context
- Website — clear, purposeful
- Email / DM — warm, direct
- Social — reflective, personal
- Product / support — empathetic, actionable
- Education — simple, step-by-step
Do
- Write in plain language with short sentences.
- Tie ideas to why they matter.
- Use "we" in collaborative contexts.
- Use specifics over generalizations.
Don't
- Use ALL CAPS, em dashes, buzzwords, or hype.
- Write long unbroken blocks of text.
- Force certainty where nuance belongs.
- Use "Click here" or "Read more" as link text.
03
Color
Primary
Brand Blue
#385F8E
Tertiary actions on light surfaces
Brand Orange
#C65D21
Brand mark, accents
Action / CTA
Orange Light
#D77A3E
Primary CTA fill (dark theme)
Orange Dark
#A53F18
Primary CTA hover
CTA Blue
#4573A0
Secondary actions
Neutrals
Black-950
#0F0F0F
Page background
Black-900
#1A1A1A
Panel / card surface
White-300
#D9D9D9
Body text on dark
White-100
#F5F4F2
Headings on dark
Gray Border
#C4C7CC
Borders, dividers
Links
Link Blue
#00A0FF
Inline links on dark
Link Hover
#008FE0
Inline link hover
Status
Success Teal
#2A8F8B
Success
Warning Gold
#F2B441
Warning
Error Red
#D64545
Error
04
Typography
Display · Anton
Build clarity
Used for h1–h3. Condensed, high-impact, technical against thin hairlines.
Body · Inter
Body text is set in Inter at 16–20px with a 1.6 line-height. Short paragraphs and scannable structure are the default.
Micro label · monospace
H1 · 7xl
Aa
H2 · 5xl
Aa
H3 · 3xl
Aa
05
Spacing scale
All spacing uses an 8px base unit. Use only values from this scale.
--space-1
4 px
Icon-to-label gap
--space-2
8 px
Small padding
--space-3
12 px
Compact spacing
--space-4
16 px
Default rhythm
--space-5
24 px
Component padding
--space-6
32 px
Section spacing
--space-7
48 px
Large section gap
--space-8
64 px
Page section
06
Core components
Buttons
Input
Link-style CTA
Read the Camcgoy positioning note to learn more.
Link-style CTAs underline on hover and while pressed. Link text always describes the destination.
Card
01
Voice systems
Plain language, scannable structure, channel-specific tone.
Info
Tips, FYIs, neutral context.
Warning
Cautions and deadlines.
Success
Confirmations.
Error
Something failed. Provide a next step.
07
Accessibility
Camcgoy targets WCAG 2.1 AA. Accessibility is part of how every page and component is built, not an afterthought.
- Body text passes AA contrast on Black-950.
- Focus rings are visible on every interactive element.
- No hover-only interactions. Any hover behavior also works on tap.
- Body text never below 16px on mobile to prevent iOS form zoom.
- Link text always describes the destination.
Focus example