Design System
Colors, typography, components, and design principles that define the Freimi brand.
Colors
Our color palette is built around a dark theme with strategic use of accent colors for emphasis and interaction.
Main Brand Colors
Primary Colors
Accent Colors
Typography
Bricolage Grotesque for headings and nav. Figtree for blog body text (post-content, post-excerpt) for better readability. Line-height is standardized globally.
Line-height standard
- Default line-height is 1.2 across all headings and text.
- Use utilities for exceptions when text feels cramped:
.lh-120 → 1.2 (default)
.lh-125 → 1.25
.lh-130 → 1.3
Avoid inline line-height. If a section needs more breathing room, add lh-125 or lh-130 to the container.
Font Families
Three carefully selected typefaces that work together to create clear visual hierarchy.
Unbounded
Headings on Positioning & Behavior Design pages
Figtree
Blog body text (paragraphs, lists, blockquotes). Headings stay Bricolage Grotesque.
Type Scale
Consistent sizing that creates clear information hierarchy across all content. All heading sizes follow this scale - no exceptions.
SEO & Accessibility Rule
One H1 per page - Always use only one <h1> element per page, typically in the hero section.
Use heading hierarchy properly: h1 → h2 → h3 → h4. Never skip levels (e.g., h2 → h4).
Unbounded Font Scale (Positioning & Behavior Design Pages)
Based on minor third scale (1.2x ratio) for harmonious typographic progression.
H1 Hero
3.0rem • Line-height 1.2
H2 Section
2.5rem • Line-height 1.2
H3 Subsection
2.08rem • Line-height 1.2
H4 Minor
1.73rem • Line-height 1.2
H1 Hero
2rem • Line-height 1.2
H2 Section
1.67rem • Line-height 1.2
H3 Subsection
1.39rem • Line-height 1.2
H4 Minor
1.16rem • Line-height 1.2
H1 Hero
3.0rem • Line-height 1.2
H2 Section
2.5rem • Line-height 1.2
H3 Subsection
2.08rem • Line-height 1.2
H4 Minor
1.73rem • Line-height 1.2
H1 Hero
2rem • Line-height 1.2
H2 Section
1.67rem • Line-height 1.2
H3 Subsection
1.39rem • Line-height 1.2
H4 Minor
1.16rem • Line-height 1.2
Implementation:
All headings automatically use these sizes from CSS. Never override with inline styles or specific font-size declarations.
Body text for paragraphs and general content. Default line-height 1.2. Use .lh-125 or .lh-130 if cramped.
1.1rem • Main content and descriptions
Smaller text for captions, metadata, and secondary information. Default line-height 1.2.
1rem • Blog content and secondary text
Components
Reusable UI components that maintain consistency across the platform.
Button Style Library
20 different visual styles for "Let's meet" buttons. All buttons include icons and maintain consistent text while showcasing various design approaches.
Cards
Service Card
This is an example of a service card with consistent styling and spacing.
- Feature one
- Feature two
- Feature three
Highlights
This text has orange highlights for emphasis.
This text has green highlights for success states.
This text has red accents for important information.
This text has green accents for positive actions.
Pills & Badges
Spacing & Layout
Consistent spacing system based on CSS variables. All spacing uses these values - never magic numbers.
Design System Spacing Variables
All spacing values are defined as CSS variables in :root and used consistently across the site.
--space-xs
--space-sm
--space-md
--space-lg
--space-xl
--space-2xl
--space-3xl
--space-4xl
--space-5xl
Section & Hero Padding
Dedicated variables for consistent section and hero padding across all pages.
Hero Section
--hero-padding-top
--hero-padding-bottom
--hero-padding-top-mobile
--hero-padding-bottom-mobile
Regular Sections
--section-padding
--section-padding-mobile
Usage Example:
.hero { padding: var(--hero-padding-top) 0 var(--hero-padding-bottom); }
.section { padding: var(--section-padding) 0; }
Border Radius
Implementation Guidelines
How to use the design system correctly. Follow these rules for consistent, maintainable code.
🎯 Golden Rules
1. Always Use CSS Variables
Never hardcode spacing or colors. Use variables from :root.
padding: 120px 0;
padding: var(--section-padding) 0;
2. Let Headings Use Design System Sizes
Don't override heading sizes with inline styles or specific declarations.
<h2 style="font-size: 2.4rem">
<h2>
3. One H1 Per Page
Every page must have exactly one <h1> element, typically in the hero section. Use proper heading hierarchy: h1 → h2 → h3 → h4.
4. No Magic Numbers
If you need a spacing value, use an existing variable. If none fits, add it to the design system - don't use random pixels.
margin: 73px 0;
margin: var(--space-2xl) 0;
5. Never Use !important
Fix specificity issues properly. !important is technical debt and makes code unmaintainable.
📐 Quick Reference
Hero Sections
.hero {
padding: var(--hero-padding-top)
0
var(--hero-padding-bottom);
min-height: 100vh;
display: flex;
align-items: center;
}
Regular Sections
.section {
padding: var(--section-padding) 0;
}
@media (max-width: 768px) {
.section {
padding:
var(--section-padding-mobile) 0;
}
}
Common Spacing
gap: var(--space-md);
margin-bottom: var(--space-xl);
padding: var(--space-lg);
Design Principles
Core principles that guide our design decisions and ensure consistency.
Behavior-First Design
Every design decision is made with user behavior in mind. We prioritize understanding what users want to accomplish and design interfaces that make those actions feel natural and effortless.
Single Source of Truth
All design decisions are documented in this design system. CSS variables in :root are the single source of truth for spacing, colors, and typography. No magic numbers, no hardcoded values.
Consistent Patterns
Similar actions should look and behave similarly. We establish patterns and stick to them, reducing cognitive load and building user confidence.
Mobile-First Responsive
Design system includes mobile-specific variables. Every component works perfectly on all screen sizes by using the design system's responsive values.
Mockup & Diagram Style
When creating diagrams, mockups, or visual explanations, follow this wireframe-focused approach that prioritizes clarity and education.
Visual Communication Standards
Wireframe Aesthetic
Use clean, minimal wireframe style with subtle grays and strategic orange accents. Avoid photorealistic designs or excessive decoration.
- White backgrounds for the main mockup
- Gray borders (#ddd) and subtle backgrounds (#f5f5f5)
- Orange (#FF7650) for key positioning elements only
- Minimal shadows for depth (0 2px 8px rgba(0,0,0,0.08))
Text as Explanation
Every section should include explanatory text that teaches the concept, not just visual placeholders.
- Add descriptive labels (e.g., "Who it's for", "What they get")
- Use small tags to identify section purpose (e.g., "ICP + OFFER")
- Include context around the mockup with cards and arrows
- Explain what each element accomplishes
Color Strategy
Use color sparingly and intentionally to highlight key positioning concepts.
- Orange: ICP, Offer, Messaging, Flow (positioning elements)
- Gray: Market, Proof, supporting elements
- Light Gray: Wireframe placeholders and structure
- Avoid using more than 2-3 colors in any diagram
Example Reference
See the homepage diagram in the "The best place to show your magic is your homepage" section for the gold standard.
Key Features: Clean wireframe mockup of a full homepage, labeled sections (ICP+OFFER, MARKET, MESSAGING, PROOF, FLOW), surrounding context cards with arrows explaining visitor behavior, minimal color with strategic orange accents, white backgrounds throughout, explanatory text on every element.
Don't
- ❌ Don't use gradients or glows excessively
- ❌ Don't create button-like elements that aren't clickable
- ❌ Don't mix too many colors (stick to 2-3)
- ❌ Don't use photorealistic images in diagrams
- ❌ Don't create diagrams without explanatory text
- ❌ Don't use dark backgrounds for the main mockup area