Internal — Developer Handoff
iRecord365 Brand & Style Guide
Use this page to match colors, typography, and components when building the submission form or any integration that should look like part of irecord365.com.
Color Palette
| Swatch | Name | HEX | OKLCH | Usage |
|---|---|---|---|---|
| Navy (Primary) | #13294B | oklch(0.27 0.07 263) | Primary backgrounds, headings, header/footer | |
| Deep Navy | #0A1E3F | oklch(0.21 0.07 263) | Final CTA bands, deep emphasis sections | |
| Gold (Accent) | #C9A84C | oklch(0.76 0.12 88) | Buttons (CTAs), accent text, icons, links on dark | |
| Cream (Accent Soft) | #F5F0E0 | oklch(0.96 0.03 90) | Soft accent panels, callouts on light backgrounds | |
| Background | #FFFFFF | oklch(1 0 0) | Page background | |
| Foreground (Text) | #0F1A2D | oklch(0.18 0.04 260) | Body text on light surfaces | |
| Secondary Surface | #F2F4F7 | oklch(0.965 0.01 250) | Card secondary surfaces, alt sections | |
| Muted Text | #5C6678 | oklch(0.45 0.03 255) | Subdued copy, captions | |
| Border | #E2E5EA | oklch(0.91 0.012 255) | Card and input borders | |
| Destructive | #C8331C | oklch(0.55 0.22 27) | Errors, destructive actions |
Typography
Headings
Sora
Weights: 500, 600, 700, 800
font-family: 'Sora', sans-serif;
letter-spacing: -0.02em;
Google Fonts: fonts.google.com/specimen/Sora
Body
Manrope
Weights: 400, 500, 600, 700
font-family: 'Manrope', sans-serif;
Google Fonts: fonts.google.com/specimen/Manrope
Font import (HTML)
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap">Buttons
Primary CTA (Gold)
background: #C9A84C;
color: #13294B;
font-family: Sora, sans-serif;
font-weight: 600;
border-radius: 6px;
height: 44px;
padding: 0 24px;Outline (on Navy)
background: transparent;
border: 1px solid rgba(255,255,255,0.3);
color: #FFFFFF;Form Inputs
height: 40px;
border: 1px solid #E2E5EA;
border-radius: 6px;
padding: 0 12px;
font-size: 14px;
background: #FFFFFF;
color: #0F1A2D;
/* focus */
border-color: #C9A84C;
box-shadow: 0 0 0 3px rgba(201,168,76,0.3);Layout Tokens
Container max-width
max-width: 1280px (7xl)
Border radius
base: 8px • cards: 16px • pills: 9999px
Section padding (vertical)
py-20 (80px) • lg:py-24 (96px)
Card shadow
0 1px 2px rgba(19,41,75,.10), 0 4px 12px rgba(19,41,75,.08)
Copy Voice
- • Authoritative, efficient, reassuring, action-oriented.
- • No salesy or casual phrasing. Skip fluff.
- • Primary CTA across the site: "Start a Submission" → /submit.
- • Secondary CTA for searches: "Request a Property Search" → /property-search.
- • Brand name is iRecord365 (no space).