# Optimine Design System

> High-contrast analytical precision anchored by deep slate foundations and sharp crimson highlights.

**Source:** https://optimine.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Optimine utilizes a high-contrast "monochrome-plus-one" system where a dominant white canvas (#ffffff) and deep slate-black text (#101f2c) are punctuated by a singular, aggressive red accent (#d72630). The typography is exclusively Manrope, leaning heavily on bold (700) and extra-bold (800) weights to establish a hierarchy of data-driven authority. Layouts use a generous 8px base unit with significant vertical breathing room (48px gaps) and large-radius containers (16px) that soften the otherwise technical, analytical aesthetic.

## Signature DNA
1. **The Crimson Punctuation** (The use of #d72630 as the exclusive action and emphasis color against a sterile #ffffff and #101f2c background, seen in buttons and "Science of Success" markers).
2. **Heavy-Weight Manrope** (The reliance on 700 and 800 weights for almost all information headers, creating a "bold-first" reading experience).
3. **The Notched Surface** (White containers with 16px radii that "notch" into photographic or dark backgrounds, creating a layered physical depth).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--secondary-color-white` | `#ffffff` | Page background, button text, surface fill | 15 | 1 | `css_variable` |
| `--brand-color-black` | `#101f2c` | Primary text, headings, dark accents | 55 | 1 | `css_variable` |
| `--content-color-border` | `#eaeef2` | Subtle dividers, container outlines | 3 | 1 | `computed_style` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--brand-color-red` | `#d72630` | Primary CTAs, emphasis text, UI markers | 29 | 1 | `css_variable` |
| `--secondary-color-black` | `#203f59` | Secondary surface backgrounds (cards) | 3 | 1 | `computed_style` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Manrope | 400, 700, 800 | All (Display, Heading, Body) | Manrope (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display}` | 40px | 40px | normal | 700 | Main section titles | `h3.font-size-40` |
| `{type.h1}` | 32px | 40px | normal | 800 | Hero/Primary headers | `h6.font-weight-bold` |
| `{type.h2}` | 24px | 24px | normal | 700 | Sub-section headers | `b:nth-of-type(1)` |
| `{type.h3}` | 20px | 20px | normal | 700 | Feature titles | `p.font-size-20` |
| `{type.h3-alt}` | 20px | 24px | normal | 800 | Red emphasis headers | `p.font-color-red` |
| `{type.body-bold}` | 16px | 24px | normal | 700 | UI Labels, subheaders | `h6.font-weight-bold` |
| `{type.body}` | 16px | 24px | normal | 400 | Standard running text | `div.hero-notch-white` |
| `{type.small-bold}` | 13px | 24px | normal | 700 | Captions, small CTAs | `p.font-size-13` |

### Principles
1. **Bold by Default**: Headings rarely drop below 700 weight; even small 13px text uses 700 for clarity.
2. **Tight Leading on Display**: Large titles (40px) use a 1:1 line-height (40px) for a compact, architectural feel.
3. **Color-Coded Hierarchy**: Red (#d72630) is used for the most critical sub-headers to break the monochrome flow.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 8px | 26 |
| `{space.sm}` | 12px | 4 |
| `{space.md}` | 16px | 24 |
| `{space.lg}` | 20px | 34 |
| `{space.xl}` | 24px | 7 |
| `{space.section}` | 48px | 21 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Page sections, sharp dividers | 72 occurrences |
| `{radius.md}` | 8px | Buttons, small UI controls | `Rounded Button` component |
| `{radius.lg}` | 16px | Content cards, "notched" surfaces | `Card` component |

## Elevation
Not captured in source (system is flat/border-based).

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action
**Pages observed:** https://optimine.com
**Spec:** Background `#d72630` / Text `#ffffff` / Radius `8px` / Padding `12px 24px 0px` / Type `16px Manrope 700`
**States observed:** Default: Captured | Hover/Active: Not captured

#### Secondary Button
**Role:** Ghost/Outline action
**Pages observed:** https://optimine.com
**Spec:** Background `#ffffff` / Text `#d72630` / Border `1px #d72630` / Radius `8px` / Padding `8px 16px 0px` / Type `13px Manrope 700`
**States observed:** Default: Captured | Hover/Active: Not captured

### Tier 2: Patterns
#### Content Surface
**Role:** Standard content grouping
**Pages observed:** https://optimine.com
**Spec:** Background `transparent` / Text `#101f2c` / Border `1px #eaeef2` / Radius `16px` / Padding `0px 8px`
**States observed:** Default: Captured

#### Dark Feature Card
**Role:** High-emphasis data display
**Pages observed:** https://optimine.com
**Spec:** Background `#203f59` / Text `#ffffff` / Radius `16px` / Padding `24px` / Type `16px Manrope`
**States observed:** Default: Captured

### Tier 3: Surface-specific
#### Hero Notch
**Role:** Transition element between hero and body
**Pages observed:** https://optimine.com
**Spec:** Background `#ffffff` / Radius `16px` (top only) / Max-width `container`
**States observed:** Default: Captured

## Layout
| Property | Value |
| :--- | :--- |
| Max content width | 1200px (estimated from 1440px viewport) |
| Vertical section gap | 48px |
| Horizontal gutter | 20px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Stacked card layouts, text alignment shifts to center |
| Desktop | 1440px | Multi-column grids, left-aligned typography |

## Imagery & decoration
Optimine uses high-altitude, desaturated nature photography (e.g., snowy forests) to provide texture without competing with the UI. Decorative elements include thin 1px lines and small circular nodes (#d72630) used to connect data points in "Real-Time Scenario" diagrams.

## Do's
- Use Manrope 800 for primary page headlines.
- Apply a 16px border radius to all primary content containers.
- Reserve #d72630 for interactive elements or critical data emphasis.
- Maintain 48px of vertical space between major content blocks.
- Use #101f2c for all primary body text to ensure contrast against white.

## Don'ts
- **Wrong:** Using #cf2e2e (Vivid Red) for buttons. **Right:** Use #d72630. **Reason:** #d72630 is the brand-specific red; #cf2e2e is a generic preset.
- **Wrong:** Using #000000 for text. **Right:** Use #101f2c. **Reason:** The brand uses a specific slate-black for softer readability.
- **Wrong:** Mixing Manrope with other sans-serifs. **Right:** Manrope only. **Reason:** The system relies on a single-family typographic identity.
- Do not use shadows; rely on #eaeef2 borders for separation.
- Do not use #d72630 for large background areas; it is an accent color only.

## Similar brands
- Palantir (analytical, high-contrast)
- Databricks (technical, structured)
- Scale AI (clean, typography-focused)

## Quick start

```css
/* CSS Variables */
:root {
  --brand-red: #d72630;
  --brand-black: #101f2c;
  --surface-white: #ffffff;
  --border-light: #eaeef2;
  --radius-card: 16px;
  --radius-button: 8px;
  --font-main: 'Manrope', sans-serif;
}
```

```javascript
// Style Dictionary
{
  "color": {
    "brand": {
      "red": { "value": "#d72630" },
      "black": { "value": "#101f2c" }
    },
    "surface": {
      "white": { "value": "#ffffff" },
      "slate": { "value": "#203f59" }
    }
  }
}
```

## Agent prompt examples
- "Create a feature section with a white background, #101f2c Manrope 700 headings, and a primary button using #d72630 with 8px border radius."
- "Design a data card with a #203f59 background, white Manrope text, and 16px rounded corners."
- "Generate a hero section using a desaturated forest image background and a white notched container at the bottom with 16px top-only radius."

## Known gaps
- Hover and active states for buttons were not captured in the initial crawl.
- Success and Error semantic colors were not present on the analyzed pages.
- Complex navigation menus (dropdowns) were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://optimine.com | 1440x900 | 2026-06-06 |
| Mobile Home | https://optimine.com | 390x844 | 2026-06-06 |