Visual Identity Guidelines
The premium brand manual for MyProBio360™ — covering color, typography, layout, CTAs, cards, and attribution.
Quick Reference — Core Colors
Deep Navy
#1B2A4A
hsl(222 47% 11%)
Primary text, hero backgrounds, authority.
Champagne Gold
#C89B3C
hsl(43 74% 49%)
Accent, CTA highlights, premium signals.
Warm Ivory
#F7F4EF
hsl(40 33% 97%)
Page backgrounds, light section fills.
Soft Slate
#6B7280
hsl(220 10% 46%)
Body text, muted labels, secondary content.
Quick Reference — Typography
Heading Font
Playfair Display
H1 · H2 · H3 · Display
Editorial, premium, authoritative serif.
Body Font
Inter
Body · Labels · UI Text
Clean, readable, professional sans-serif.
10 Sections
Brand Manual
Complete guidelines across all visual identity dimensions.
Color System
The MyProBio360™ color system uses warm ivory backgrounds, deep navy for authority, champagne gold as a premium accent, and soft slate for muted content.
- Use Deep Navy for primary text and hero sections
- Use Champagne Gold sparingly as accent and CTA highlights
- Use Warm Ivory for page backgrounds and light sections
- Use Soft Slate for muted labels and secondary content
- Maintain WCAG AA contrast for all body text
Typography Direction
Playfair Display for all headings (editorial, premium, authoritative). Inter for all body text (clean, readable, professional).
- H1 headings: Playfair Display, 48–72px, bold
- H2 section headings: Playfair Display, 32–48px, semibold
- Body text: Inter, 14–16px, regular/medium
- Labels and badges: Inter, 10–12px, uppercase, bold, tracked
- Never use more than 2 typefaces in a layout
Logo Spacing
Always maintain clear space around logo lockups. The minimum clear space equals the cap height of the logo typeface.
- Minimum clear space: 1× cap height on all sides
- Never place logo within 8px of any edge
- Mobile: reduce logo to wordmark only if horizontal space is under 200px
- Always link header logo to platform home
Section Layout
Sections use consistent padding, max-width containers, and vertical rhythm to create a premium, editorial feel.
- Section padding: py-16 to py-32 depending on content density
- Max content width: 4xl to 7xl depending on grid layout
- Section labels: 10px uppercase bold tracked text with accent color
- Decorative accent bars: 1–2px height, gradient transparent → accent → transparent
Button & CTA Style
CTAs use a strict hierarchy — primary filled, secondary outlined, tertiary text-only.
- Primary CTA: bg-accent text, hover:opacity-90
- Secondary CTA: border-border, hover:border-accent/50
- Tertiary CTA: text-accent, hover:gap increase with arrow
- All CTAs include icon when possible for visual clarity
- Never use more than 2 CTAs side-by-side in a hero
Profile Cards
Profile directory cards use the standard card structure with top accent bar, avatar initial, type badge, and hosted URL.
- Top accent bar: 0.5px, gradient on hover
- Avatar: initial letter, accent/10 background
- Type badge: category color, 10px uppercase bold
- Hosted URL: monospace font, compact display
Project Cards
Project cards use category + status badges, initial letter backdrop, and a clean content area.
- Category badge: small, rounded, accent color
- Status badge: context-colored (active/concept/in-dev)
- Card hover: shadow-xl + border-accent/30
- Impact quote: italic, smaller size, border-separated
Trust Badges
Trust badges communicate platform values: honesty, privacy, professional focus, and phase transparency.
- Use context-appropriate colors (amber for warnings, emerald for active, sky for info)
- Always include disclaimer for prototype status
- Trust sections should always be linked from footer
Photography & Portrait Direction
Professional portraits should be warm, confident, and clean. No heavy filters, casual selfies, or group photos without consent.
- Preferred: clean background, professional attire, direct eye contact
- Acceptable: natural light, minimal props that support professional identity
- Avoid: heavy Instagram-style filters, casual selfies, photos of others without permission
- Phase 1H: portrait placeholder used until upload system is activated
Footer Attribution
The footer must always carry the full platform attribution, founder credit, and phase status.
- Include: Built by Gregory Mahabee, Founder & CEO of InfoTechSTM
- Include: MyProBio360™ is powered by the ProBio 360™ Framework and offered through Legacy Profile Pro™
- Phase prototype label: included in footer copyright line
- Footer background: Deep Navy (#1B2A4A)