OMC Style Guide
Colors
Primary
#2563EB
Secondary
#0F766E
Accent
#F59E0B
Background Light
#FFFFFF
Surface Light
#F9FAFB
Background Dark
#111827
Border
#E5E7EB
Muted Text
#6B7280
Typography
Eyebrow
Font: Inter
Weight: 600
Size: 14px (0.875rem)
Letter Spacing: 2px
Text Transform: Uppercase
Line Height: 1.2
The Quick Brown Fox
H1
Font: Plus Jakarta Sans
Weight: 700
Size: 72px (4.5rem) Desktop
Size: 52px (3.25rem) Tablet
Size: 42px (2.625rem) Mobile
Line Height: 1.05
Letter Spacing: -2px
The Quick Brown Fox
H2
Font: Plus Jakarta Sans
Weight: 700
Size: 56px (3.5rem) Desktop
Size: 42px (2.625rem) Tablet
Size: 34px (2.125rem) Mobile
Line Height: 1.1
Letter Spacing: -1px
The Quick Brown Fox
H3
Font: Plus Jakarta Sans
Weight: 600
Size: 36px (2.25rem) Desktop
Size: 30px (1.875rem) Tablet
Size: 26px (1.625rem) Mobile
Line Height: 1.2
The Quick Brown Fox
H4
Font: Plus Jakarta Sans
Weight: 600
Size: 24px (1.5rem) Desktop
Size: 22px (1.375rem) Tablet
Size: 20px (1.25rem) Mobile
Line Height: 1.3
The Quick Brown Fox
Body Large
Font: Inter
Weight: 400
Size: 20px (1.25rem) Desktop
Size: 18px (1.125rem) Tablet
Size: 18px (1.125rem) Mobile
Line Height: 1.7
The Quick Brown Fox
Body
Font: Inter
Weight: 400
Size: 18px (1.125rem) Desktop
Size: 17px (1.0625rem) Tablet
Size: 16px (1rem) Mobile
Line Height: 1.7
The Quick Brown Fox
Small Text
Font: Inter
Weight: 400
Size: 14px (0.875rem)
Line Height: 1.6
The Quick Brown Fox
Buttons
Background: #2563EB
Text: #FFFFFF
Border: none
Radius: 999px
Padding: 16px 32px
Font Weight: 600
Font Size: 16px
Hover
Background: #1D4ED8
Transform: translateY(-2px)
Background: #0F766E
Text: #FFFFFF
Border: none
Radius: 999px
Padding: 16px 32px
Font Weight: 600
Font Size: 16px
Hover
Background: #115E59
Transform: translateY(-2px)
Background: transparent
Text: #111827
Border: none
Radius: 999px
Padding: 16px 32px
Font Weight: 600
Font Size: 16px
Hover
Background: rgba(0,0,0,.05)
Background: transparent
Text: #2563EB
Border: 2px solid #2563EB
Radius: 999px
Padding: 14px 30px
Font Weight: 600
Font Size: 16px
Hover
Background: #2563EB
Text: #FFFFFF
Background: #FFFFFF
Text: #111827
Border: none
Radius: 999px
Padding: 16px 32px
Font Weight: 600
Font Size: 16px
Hover
Background: #F3F4F6
Background: #111827
Text: #FFFFFF
Border: none
Radius: 999px
Padding: 16px 32px
Font Weight: 600
Font Size: 16px
Hover
Background: #374151
Layout & Containers
Fullwidth Container (MaxWidth: 1280px, Width: 100%, Left & Right Padding: 24px)
Standard Container (MaxWidth: 1080px, Width: 80%)
Narrow Container (MaxWidth: 800px, Width: 100%)
Hero Container for wide hero layouts (MaxWidth: 1440px, Width: 100%, Left & Right Padding: 24px)
Surface Styles
Surface Light
Background: #FFFFFF
Surface Subtle
Background: #F8FAFC
Surface Dark
Background: #111827
Surface Glass
Background: rgba(255,255,255,.15);
Backdrop-filter: blur(20px);
Cards
Professional Design
Clean, conversion-focused layouts built using the OMC Framework system.
OMC Card Standard
Background: #FFFFFF
Padding: 32px (2 rem)
Border: 1px solid #E5E7EB
Border Radius: 24px (1.5rem)
Box Shadow: none
Professional Design
Clean, conversion-focused layouts built using the OMC Framework system.
OMC Card Elevated
Background: #FFFFFF
Padding: 32px (2 rem)
Border: 1px solid #E5E7EB
Border Radius: 24px (1.5rem)
Box Shadow: 0 20px 40px rgba(0,0,0,.08)
Clean, conversion-focused layouts built using the OMC Framework system.
OMC Card Glass
Background: rgba(255,255,255,.15)
Padding: 32px (2rem)
Border: 1px solid rgba(255,255,255,.2)
Border Radius: 24px (1.5rem)
Backdrop Filter: blur(20px)
Forms
Use this section to validate form styling, spacing, labels, inputs, and buttons.
OMC Spacing Scale
Component Spacing
Heading
↓ 16px (1rem)
Body Text
↓ 24px (1.5rem)
Button
Hero Content Spacing
Eyebrow
↓ 16px
Headline
↓ 24px
Supporting Copy
↓ 32px
Buttons
Standard Section Spacing
96px separating the two
Section 2
| Use Case | Spacing |
|---|---|
| Icon → Heading | 16px |
| Heading → Body | 16px |
| Body → Button | 24px |
| Form Fields | 16px |
| Card Padding | 32px |
| Section Padding Top/Bottom | 96px |
| Hero Padding Top/Bottom | 128px |
| Token | Value | Usage |
|---|---|---|
| XS | 8px | Small gaps |
| SM | 12px | Tight spacing |
| MD | 16px | Standard content spacing |
| LG | 24px | Body to CTA |
| XL | 32px | Card padding |
| 2XL | 48px | Large component spacing |
| 3XL | 72px | Section content spacing |
| 4XL | 96px | Standard section padding |
| 5XL | 128px | Hero padding |
Shadows
Shadow 0
No Shadow
Shadow 1
Soft Shadow
Shadow 2
Medium Shadow
Shadow 3
Strong Shadow
Usage Reference
| Shadow | Use Case |
|---|---|
| Shadow 0 | Editorial layouts |
| Shadow 1 | Standard cards |
| Shadow 2 | Featured cards |
| Shadow 3 | Hover states, modals |
Radius
Radius XS
4px
Radius SM
8px
Radius MD
12px
Radius LG
24px
Radius Pill
999px
Usage Examples
| Radius | Use Case |
|---|---|
| 4px | Badges |
| 8px | Small UI Elements |
| 12px | Form Fields |
| 24px | Cards |
| 999px | Buttons & Pills |
OMC Utility Classes
| Class | Purpose |
|---|---|
.omc-container |
Standard content width (1280px) |
.omc-container-narrow |
Narrow content width (800px) |
.omc-container-hero |
Hero width (1440px) |
.omc-surface-light |
White surface |
.omc-surface-subtle |
Light gray surface |
.omc-surface-dark |
Dark surface |
.omc-shadow-1 |
Soft shadow |
.omc-shadow-2 |
Medium shadow |
.omc-shadow-3 |
Strong shadow |
.omc-card |
Standard card styling |
.omc-glass |
Glassmorphism treatment |
.omc-section-standard |
Standard section padding |
.omc-section-hero |
Hero section padding |
.omc-text-center |
Center-aligned text |
.omc-max-width |
Restrict text width for readability |