Color Spectrum & Palette
Click any swatch below to copy its HEX value to your clipboard. The palette is designed for high visual energy, trust, and AA/AAA contrast compliance.
Typography System
Birth Labs header pairing combines the bold impact of Francois One for headlines with the clean modern legibility of Archivo for body copy.
You have the idea. We help you build the business.
We take you from idea to a business that runs.
Builds with you from day one.
Birth Labs gives young founders the structure, guidance, mentorship and community to move an idea from the mind into a real, viable business.
Interactive Component Gallery
Pre-styled UI elements ready for use across all Birth Labs applications.
Button Variants
Badges & Status Indicators
Gradient Highlighted Container
Combines a subtle soft blue gradient background with a left accent border in Vibrant Orange.
Form Inputs & Selection Cards
Timers & Progress Displays
Brand Usage Guidelines
Key principles for maintaining visual harmony across web pages and collateral.
- Use Vibrant Orange (#FF6B00) as the high-impact accent color for CTAs, active buttons, and eyebrows.
- Anchor dark sections and headers in Midnight Navy (#0A2540) for depth and authority.
- Keep backgrounds clean with Pure White (#FFFFFF) cards over Light Slate (#F8FAFC).
- Maintain clear contrast ratio (min 4.5:1) for all typography.
- Don't use low-contrast orange text over white backgrounds without sufficient font weight or dark background cards.
- Don't mix legacy green/teal colors with the new Blue & Orange design system.
- Don't overload a single screen with competing orange buttons; reserve primary orange for main actions.
- Don't alter the official SVG logo aspect ratio or vector path shapes.
CSS Design Tokens
Copy and paste these CSS custom properties into your stylesheets to maintain global design tokens.
:root {
/* Birth Labs Blue, Orange & White Spectrum */
--blue-navy: #0A2540;
--blue-deep: #06182B;
--blue-primary: #1D4ED8;
--blue-vibrant: #2563EB;
--blue-hover: #1E40AF;
--blue-light: #EFF6FF;
--blue-subtle: #DBEAFE;
--orange-primary: #FF6B00;
--orange-deep: #E05D00;
--orange-hover: #C85000;
--orange-light: #FFF4EC;
--orange-subtle: #FFE8D6;
--white: #FFFFFF;
--slate-bg: #F8FAFC;
--slate-card: #FFFFFF;
--slate-border: #E2E8F0;
--ink: #0F172A;
--ink-soft: #475569;
--ink-muted: #64748B;
--border: rgba(15, 23, 42, 0.12);
--border-focus: var(--blue-primary);
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--shadow-sm: 0 2px 8px rgba(10, 37, 64, 0.06);
--shadow-md: 0 8px 24px rgba(10, 37, 64, 0.10);
--shadow-lg: 0 16px 40px rgba(10, 37, 64, 0.15);
}