Brand Guidelines
fitforpdf
Design system, colors, typography, and component reference. All values are sourced from our CSS custom properties and design tokens.
Logo
Clear space: Minimum padding of 1x logo height around the mark.
Minimum size: 24px height for digital use.
File formats: SVG (preferred), WebP for raster.
Colors
Light mode
Text
#0F172A
Primary text
Muted
#64748B
Secondary text, labels
Background
#FFFFFF
Page background
Warm
#FAF8F5
Section backgrounds, cream
Accent
#0F172A
Links, emphasis
CTA
#2563EB
Primary buttons, highlights
CTA Hover
#1D4ED8
Button hover state
Border
rgba(0,0,0,0.10)
Dividers, card borders
Dark mode
Text
#E2E8F0
Muted
#94A3B8
Background
#0F1117
Warm
#161822
Accent
#E2E8F0
CTA
#3B82F6
CTA Hover
#2563EB
Border
rgba(255,255,255,0.10)
var(--color-*)) and adapt automatically between light and dark mode.Typography
Fallbacks: -apple-system, SF Pro Display, Segoe UI, sans-serif
Display / H1
44px / 64px · 700 · 1.05
Readable PDFs
Heading / H2
24px / 32px · 600 · 1.2
From wide Excel tables.
Body
16px · 400 · 1.5
Your wide spreadsheets, fitted into clean, readable PDFs.
Small
13px · 400 · 1.4
Processed in 2.3 seconds
Eyebrow
11px · 600 · 1.4
ENGINE FOR WIDE TABLES
Font weights in use
Aa
400 · Regular
font-normal
Aa
500 · Medium
font-medium
Aa
600 · Semibold
font-semibold
Aa
700 · Bold
font-bold
Spacing
Based on a 4px grid. All spacing values are multiples of 4.
Border Radius
Input
10px
Base / Card
12px
XL
14px
Pill
999px
Buttons
All buttons use rounded-full (pill shape), height 44px, font-semibold.
primary
accent
secondary
outline
Badges
default
accent
success
popular
Motion
| Tier | Duration | Usage |
|---|---|---|
| Micro | 150ms | Hover, focus, opacity, border |
| Move | 300 - 500ms | Section entrances, tab transitions |
| Flow | 700 - 1000ms | Hero entrance, page transitions |
All animations respect prefers-reduced-motion. When enabled, animations are disabled.
CSS Variables
All design tokens are available as CSS custom properties on :root and adapt in dark mode via [data-theme="dark"].
| Variable | Light | Dark |
|---|---|---|
| --color-text | #0F172A | #E2E8F0 |
| --color-muted | #64748B | #94A3B8 |
| --color-bg | #FFFFFF | #0F1117 |
| --color-bg-hero | #FAF8F5 | #161822 |
| --color-accent | #0F172A | #E2E8F0 |
| --color-cta-bg | #2563EB | #3B82F6 |
| --color-cta-hover | #1D4ED8 | #2563EB |
| --color-border | rgba(0,0,0,0.10) | rgba(255,255,255,0.10) |