Brand & Style Guide
Color Palette
#2563eb
var(--color-primary)
#1d4ed8
var(--color-primary-hover)
#f59e0b
var(--color-accent)
#0c1220
var(--color-bg-dark)
#1a1a2e
var(--color-text)
#5a5f7a
var(--color-text-light)
#f6f7f9
var(--color-bg-alt)
#e2e5ed
var(--color-border)
Typography
Heading 1 — clamp(2rem, 4vw, 3rem)
Heading 2 — clamp(1.5rem, 3vw, 2.25rem)
Heading 3 — clamp(1.15rem, 2vw, 1.5rem)
Heading 4 — 1.125rem
Body text (1rem / 16px). Inter font family. Line height 1.6. This is how regular paragraph text looks across the site. It should be readable, clean, and professional without being too large or too small.
Small text (0.875rem / 14px). Used for labels, metadata, captions.
Bold text — font-weight: 700
Italic text — for emphasis
Font stack: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
Buttons
<a href="/contact/" class="btn btn-primary">Primary Button</a>
<a href="/contact/" class="btn btn-primary btn-lg">Primary Large</a>
<a href="#" class="btn btn-secondary">Secondary Button</a>
Section Types
There are three section background types:
Default (white background):
<section class="section">
<div class="container">
<!-- content -->
</div>
</section>
Alt (light grey background — this section):
<section class="section section-alt">
<div class="container">
<!-- content -->
</div>
</section>
Dark Section
Used for CTAs and highlight blocks. White text on dark background with gradient overlay.
<section class="section section-dark">
<div class="container" style="text-align:center;">
<!-- content -->
</div>
</section>
Callout Text
This is the callout style. Used for important statements that need to stand out. Centered, larger font, medium weight.
<p class="section-callout">Your callout text here.</p>
Two-Column Layout
Text column
This is the text side of a two-column layout. Content goes here with headings, paragraphs, lists, or any other elements.
Good for pairing text with images, forms, or media embeds.
<div class="two-col">
<div class="two-col-text">
<!-- text content -->
</div>
<div class="two-col-media">
<div class="image-placeholder"></div>
</div>
</div>
Reversed version (image left, text right):
<div class="two-col two-col-reverse">...</div>
Cards Grid
Feature Card
Cards used for services, features, and differentiators. They have padding, border, and a hover effect with slight lift.
Another Card
Same structure. Use features-grid as the container and feature for each card.
Third Card
Three columns on desktop, single column on mobile.
<div class="features-grid">
<div class="feature">
<h3>Title</h3>
<p>Description</p>
</div>
</div>
Labels
Section Label
Used above section headings as a small category tag.
<span class="section-label">Label text</span>
Spacing Variables
| Variable | Value | Usage |
|---|---|---|
--spacing-xs | 0.5rem (8px) | Tight spacing |
--spacing-sm | 1rem (16px) | Small gaps |
--spacing-md | 1.5rem (24px) | Medium gaps |
--spacing-lg | 2.5rem (40px) | Section internal |
--spacing-xl | 4rem (64px) | Between blocks |
--spacing-2xl | 6rem (96px) | Section padding |
Container Widths
| Class | Max Width | Usage |
|---|---|---|
.container | 1200px | Standard pages |
.container-narrow | 780px | Blog posts, legal pages |
Border Radius
| Variable | Value |
|---|---|
--radius-sm | 4px |
--radius-md | 8px |
--radius-lg | 12px |
Templates
Secciones listas para copiar y pegar. Usa texto lorem ipsum como placeholder.
Lorem ipsum dolor sit amet consectetur
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Section label
Lorem ipsum dolor sit amet consectetur adipiscing
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper aenean ultricies mi vitae est.
Section label
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
Section label
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
Section label
Lorem ipsum dolor sit amet consectetur adipiscing elit
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
Lorem ipsum dolor sit amet
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae.
Consectetur adipiscing elit sed
Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo quisque sit amet.
Vestibulum tortor quam feugiat
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.
Section label
Lorem ipsum dolor sit amet consectetur adipiscing elit
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
Lorem ipsum dolor sit amet
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet.
Consectetur adipiscing elit sed
Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo quisque sit amet est et sapien ullamcorper pharetra.
Vestibulum tortor quam feugiat
Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet.
Aenean ultricies mi vitae est
Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi condimentum sed commodo.
Lorem ipsum dolor sit amet consectetur
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
Lorem ipsum dolor sit amet consectetur
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.