# Omnifi.in Design System

> High-contrast cinematic minimalism defined by sharp monochrome surfaces and classical serif display type.

**Source:** https://omnifi.in | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Omnifi.in utilizes a "Dark Mode by default" aesthetic, leaning heavily on pure black `#000000` and deep charcoal `#161616` surfaces. The system creates authority through a stark typographic pairing: **Playfair Display** for elegant, large-scale headings and **Source Sans Pro** for utilitarian body and UI elements. Visual interest is generated through high-contrast white `#ffffff` components and a singular muted accent color `#8995a9` used exclusively for borders and interactive outlines. Geometry is strictly sharp or minimally rounded at 4px, maintaining a professional, architectural feel.

## Signature DNA
1. **Cinematic Serif Headers** (Playfair Display at 44px, weight 400, used for primary section anchors like "Launching Soon" and "Contact Us" across all pages).
2. **Stark Monochrome Inversion** (Pure white `#ffffff` buttons and cards floating on pure black `#000000` canvases to create maximum focal depth).
3. **Wide-Tracked Branding** (The "OMNIFI.IN" wordmark uses Montserrat at weight 700 with a 4px letter-spacing, establishing a rigid, modern header anchor).

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary page background, text, surface | 67 | 0.8 | Computed Style |
| `{color.white}` | `#ffffff` | Primary CTA background, text, card surface | 18 | 0.8 | Computed Style |
| `{color.charcoal}` | `#161616` | Secondary section backgrounds | 6 | 0.6 | Computed Style |
| `{color.gray}` | `#969696` | Muted body text, footer copyright | 24 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.steel}` | `#8995a9` | Component borders, button outlines | 3 | 0.6 | Computed Style |

### Semantic
*Not captured in source.*

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Playfair Display | 400 | Display / Hero | Playfair Display | Google Fonts |
| Montserrat | 700 | Branding / Logo | Montserrat | Google Fonts |
| Source Sans Pro | 400, 700 | Body / UI | Source Sans Pro | Google Fonts |
| GD Sherpa | 400 | System / Ad-hoc | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-lg}` | 44px | 55px | normal | 400 | Hero H1 | `h1.x-el.x-el-h1` |
| `{type.display-md}` | 44px | 61.6px | normal | 400 | Section H2 | `h2.x-el.x-el-h2` |
| `{type.logo}` | 26px | 31.2px | 4px | 700 | Wordmark | `h3#logo-text-29790` |
| `{type.heading-sm}` | 22px | 33px | normal | 400 | Intro text | `p` |
| `{type.body-md}` | 16px | normal | normal | 400 | Default body | `div#page-29779` |
| `{type.body-sm}` | 14px | 21px | normal | 400 | Secondary text | `p` |
| `{type.ui-label}` | 14px | normal | 0.994px | 700 | Nav / CTA | `a.x-el.x-el-a` |
| `{type.caption}` | 14px | normal | normal | 400 | Meta / Legal | `a.banner.native-v1` |

### Principles
1. **Serif for Sentiment:** Use Playfair Display only for high-level messaging (Launching, Contact).
2. **Sans for Action:** All interactive elements and long-form descriptions use Source Sans Pro.
3. **Extreme Tracking for Branding:** Logo text must maintain 4px letter-spacing to distinguish from UI.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xxs}` | 2px | 3 |
| `{space.xs}` | 4px | 3 |
| `{space.sm}` | 8px | 5 |
| `{space.md}` | 10px | 3 |
| `{space.lg}` | 24px | 3 |
| `{space.xl}` | 56px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Page sections, containers | 72 occurrences |
| `{radius.sm}` | 4px | Buttons, cards, inputs | 5 occurrences |

## Elevation
*Not captured in source. The system is visually flat, relying on color contrast for depth.*

## Components

### Tier 1: Foundational

#### Surface
**Role:** Primary content container
**Pages observed:** All
**Spec:** Background `{color.black}` (#000000) or `{color.white}` (#ffffff) | Text `{color.black}` (#000000) | Radius `{radius.none}` (0px) | Padding `{space.xl}` (56px)
**States observed:** Default: captured

#### Rounded Button
**Role:** Primary Call to Action
**Pages observed:** All
**Spec:** Background `{color.white}` (#ffffff) | Text `{color.black}` (#000000) | Border 1px `{color.steel}` (#8995a9) | Radius `{radius.sm}` (4px) | Padding 8px 24px
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Navigation
**Role:** Global header
**Pages observed:** pricing, about
**Spec:** Background `rgba(0, 0, 0, 0.25)` | Text `{color.black}` (#000000) | Radius `{radius.none}` (0px) | Font 16px
**States observed:** Default: captured

#### Card
**Role:** Content grouping
**Pages observed:** pricing, about
**Spec:** Background `{color.white}` (#ffffff) | Text `{color.black}` (#000000) | Radius `{radius.sm}` (4px) | Padding 8px 32px
**States observed:** Default: captured

### Tier 3: Surface-specific
*Not captured in source.*

## Layout
| Property | Value |
|----------|-------|
| Section Padding | 56px vertical |
| Content Alignment | Center-justified |
| Max Width | Not explicitly constrained in evidence |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses; Hero text maintains 44px size but wraps. |
| Desktop | 1440px | Full width background imagery enabled. |

## Imagery & decoration
- **Cinematic Photography:** Uses high-resolution, low-exposure imagery (e.g., starry night skies) as hero backgrounds.
- **Horizontal Dividers:** Uses subtle 1px lines for section separation.
- **Avoids:** Vibrant gradients, rounded icons, or drop shadows.

## Do's
- Use Playfair Display 400 for all primary page headings.
- Maintain a `#000000` background for hero and contact sections.
- Apply 4px letter-spacing to the Montserrat 700 wordmark.
- Use `#ffffff` for primary action buttons to ensure maximum contrast.
- Keep border radii strictly at 4px for interactive components.

## Don'ts
- **Wrong:** Using Playfair Display for body text. **Right:** Use Source Sans Pro. **Reason:** Legibility and brand hierarchy.
- **Wrong:** Applying heavy drop shadows to cards. **Right:** Use flat surfaces with 1px borders. **Reason:** Maintain the architectural minimalist aesthetic.
- **Wrong:** Using `#8995a9` as a text color. **Right:** Use as a border color only. **Reason:** Contrast ratios are insufficient for text legibility.

## Similar brands
- MasterClass (Dark mode, high-contrast serif)
- Squarespace (Template-driven minimalism)
- Leica (High-end monochrome utility)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --omnifi-black: #000000;
  --omnifi-white: #ffffff;
  --omnifi-charcoal: #161616;
  --omnifi-steel: #8995a9;
  --omnifi-gray: #969696;
  --font-display: 'Playfair Display', serif;
  --font-body: 'Source Sans Pro', sans-serif;
  --radius-sm: 4px;
}
```

## Agent prompt examples
- "Create a hero section with a `#000000` background, a 44px Playfair Display heading in `#ffffff`, and a centered white button with a 1px `#8995a9` border."
- "Design a contact form using Source Sans Pro 16px text on a `#161616` surface with 4px rounded input fields."
- "Generate a footer using `#969696` text at 14px on a pure black background."

## Known gaps
- Hover and Active states for buttons were not captured in the static crawl.
- Mobile-specific navigation menu (hamburger) interaction was not sampled.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://omnifi.in | 1440px | 2026-06-06 |
| Pricing | https://omnifi.in/pricing | 1440px | 2026-06-06 |
| About | https://omnifi.in/about | 1440px | 2026-06-06 |