# Osinit Design System

> Deep space monochrome canvas punctuated by white wireframe geometry and Segoe-based technical typography.

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

## TL;DR
Osinit utilizes a high-contrast "Dark Mode" foundation as its primary identity, even while declaring a white background (`#ffffff`) as its base token. The visual language is defined by a deep navy-to-black gradient canvas populated by white line-art icons and wireframe UI elements. Typography relies exclusively on **SegoeUILight**, utilizing a consistent 30px scale for both headings and descriptive blocks to maintain a technical, engineering-focused density. Interactive elements are strictly outlined with 0px sharp corners, eschewing modern rounded trends for a rigid, structural aesthetic.

## Signature DNA
1. **Wireframe Outlines** (All primary CTAs and decorative 404 elements use 1px white strokes with zero fill, reinforcing a "blueprint" or "in-progress" software development feel.)
2. **Space-Themed Technical Illustration** (The use of white line-art astronauts, UFOs, and satellites against a dark, star-speckled background creates a consistent metaphorical environment for "Open Solutions".)
3. **Monospace-Adjacent Sans** (SegoeUILight at weight 400/700 is used with generous line heights (45px) to create a clean, legible, yet distinctly "system-font" atmosphere.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--bs-body-bg` | `#ffffff` | Page background (declared) | 4 | 1.0 | CSS Variable |
| `--bs-body-color` | `#212529` | Default text color | 1 | 1.0 | CSS Variable |
| `--bs-white` | `#ffffff` | Primary text and UI strokes | 4 | 1.0 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--bs-primary` | `#0d6efd` | Functional links (standard Bootstrap) | 1 | 0.9 | CSS Variable |
| `--bs-success` | `#198754` | Cookie consent button background | 1 | 0.8 | CSS Variable |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `--bs-success-bg-subtle` | `#d1e7dd` | Success states |
| `--bs-danger-bg-subtle` | `#f8d7da` | Error states |
| `--bs-warning-bg-subtle` | `#fff3cd` | Warning states |
| `--bs-info-bg-subtle` | `#cff4fc` | Informational states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| SegoeUILight | 400, 700 | All headings, body, and UI | Inter Light | System Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `h1.hero` | 30px | 45px | normal | 700 | Hero headlines | `div.descr a` |
| `body.lg` | 30px | 45px | normal | 400 | Feature descriptions | `div.descr` |
| `nav.link` | 16px | 24px | normal | 400 | Navigation items | `header a` |
| `button.label`| 14px | 20px | normal | 400 | CTA text | `a.btn` |
| `caption` | 12px | 18px | normal | 400 | Footer links | `footer a` |

### Principles
1. **Uniformity of Scale:** Large-format text (30px) is used for both titles and descriptions in feature blocks, creating a flat hierarchy.
2. **Light Weight Preference:** Segoe is predominantly used in its Light (400) variant to maintain a "thin-stroke" aesthetic matching the icons.
3. **Vertical Breathing:** Line heights are consistently 1.5x the font size (e.g., 45px for 30px text) to prevent dense blocks on dark backgrounds.

## Spacing
**Base unit:** 4px (Bootstrap default)
Table: Not captured in source (Custom values used in layout).

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `radius.none` | 0px | Buttons, input fields, cards | `radii` evidence |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `flat` | none | All components are flat wireframes | Screenshots |

## Components
### Tier 1: Foundational
#### Ghost Button
**Role:** Primary Action (e.g., "Charge us with your project")
**Pages observed:** https://osinit.com
**Spec:** Background: transparent | Text: `#ffffff` | Border: 1px solid `#ffffff` | Radius: 0px | Typography: SegoeUILight 14px
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns
#### Feature Block
**Role:** Value proposition display
**Pages observed:** https://osinit.com
**Spec:** Icon: White line-art | Heading: SegoeUILight 700 (30px) | Text: SegoeUILight 400 (30px)

### Tier 3: Surface-specific
#### Tech Stack Grid
**Role:** Displaying supported technologies
**Pages observed:** https://osinit.com
**Spec:** Grid of colored tiles (e.g., Docker, Apple, Android) against the dark canvas background.

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1140px (Bootstrap container) |
| Section Padding | 80px - 100px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Feature blocks stack vertically. |

## Imagery & decoration
- **Line Art:** 1px white stroke icons (Astronaut, Satellite, Rocket).
- **Background:** Dark navy gradient with scattered "star" dots.
- **Avoids:** Drop shadows, rounded corners, and heavy photographic backgrounds.

## Do's
- Use `#ffffff` for all primary UI strokes and text on dark backgrounds.
- Maintain `0px` border radius for all interactive containers.
- Use **SegoeUILight** for all typographic levels.
- Ensure line-height is at least 1.5x font-size for legibility.
- Keep icons as 1px white wireframes.

## Don'ts
- **Wrong:** Using `#0d6efd` (Bootstrap Blue) as a primary background color. **Right:** Use it only for text links. **Reason:** Brand identity is monochrome-first.
- **Wrong:** Applying `border-radius: 4px` to buttons. **Right:** Keep corners at `0px`. **Reason:** Osinit uses a rigid, structural wireframe aesthetic.
- **Wrong:** Using heavy font weights (900) for headlines. **Right:** Use SegoeUILight 700. **Reason:** To match the thin-stroke visual language of the iconography.

## Similar brands
- GitHub (Dark Mode)
- Vercel (Monochrome/Geometric)
- Linear (Technical/Dark)

## Quick start
```css
/* CSS Custom Properties */
:root {
  --osinit-bg: #000510; /* Observed dark canvas */
  --osinit-fg: #ffffff;
  --osinit-font: "Segoe UI Light", sans-serif;
  --osinit-radius: 0px;
  --osinit-border: 1px solid #ffffff;
}
```

## Agent prompt examples
- "Generate a hero section with a dark navy gradient background, a 1px white outlined button with 0px radius, and 30px SegoeUILight text."
- "Create a feature grid using white line-art icons and 30px bold/light typographic pairs."

## Known gaps
- Hover and Active states for the primary ghost buttons were not captured in the automated run.
- Specific spacing tokens (margins/paddings) were not declared as variables in the source.

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