# Nebraskaglobal Design System

> High-contrast monochrome utility anchored by Roboto headers and sharp, zero-radius geometry.

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

## TL;DR
Nebraskaglobal utilizes a strict monochrome foundation where pure black (#000000) and white (#ffffff) define the structural hierarchy. The system is characterized by sharp 0px corners and a heavy reliance on the Roboto typeface for structural headings, often set at a light 300 weight for a technical, precise feel. Accent colors like Sky Blue (#2ea3f2) are reserved strictly for text links and logo elements, never appearing as primary button fills or large surface areas. The layout is spaced using a 10px/15px base unit, creating a dense but organized information environment typical of investment and venture capital platforms.

## Signature DNA
1. **Achromatic Dominance** (The interface is strictly #ffffff and #000000, using #666666 only for secondary body text to maintain high contrast without visual clutter.)
2. **Sharp-Edge Geometry** (A universal border-radius of 0px is applied to all containers, buttons, and input fields, reinforcing a rigid, institutional aesthetic.)
3. **Roboto Light Display** (Headings consistently use Roboto at weight 300, providing a clean, modern contrast to the more traditional Arial and Open Sans body fonts.)

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

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background and text | 17 | 1.0 | Computed Style |
| `{color.ink}` | `#000000` | Primary text and footer background | 5 | 0.6 | Computed Style |
| `{color.ink.muted}` | `#666666` | Secondary body text | 14 | 0.8 | Computed Style |
| `{color.border}` | `#dddddd` | Canvas background / dividers | 0 | 1.0 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.accent}` | `#2ea3f2` | Text links and logo accents | 12 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Roboto | 300, 500, 600 | Heading | Roboto (Google Fonts) | Apache 2.0 |
| Open Sans | 500, 600 | Body | Open Sans (Google Fonts) | Apache 2.0 |
| Arial | 500, 600 | Heading (Alt) | Arimo | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h1}` | 20px | 23.8px | normal | 300 | Section Heading | `p:nth-of-type(1)` |
| `{type.body.lg}` | 16px | 24px | normal | 500 | Feature Text | `div.et_pb_text` |
| `{type.body.md}` | 15px | 19.5px | normal | 500 | Standard Body | `p:nth-of-type(1)` |
| `{type.body.sm}` | 14px | 23.8px | normal | 500 | Article Body | `article#post-8` |
| `{type.nav}` | 14px | 14px | normal | 600 | Navigation Links | `li#menu-item-298` |
| `{type.link}` | 14px | 0px | normal | 500 | Inline Links | `a` |
| `{type.header.label}` | 14px | 23px | normal | 500 | Header Meta | `header#main-header` |
| `{type.caption}` | 12px | 18px | normal | 400 | Footer/Small | *Inferred from screenshots* |

### Principles
1. **Lightweight Headings:** Headers should prioritize weight 300 (Roboto) over bold weights to maintain a sophisticated technical feel.
2. **High Contrast Ratios:** Text must maintain a minimum of 4.5:1 contrast, with primary text hitting 21:1 (#000000 on #ffffff).
3. **Sans-Serif Utility:** No serif fonts are used; the system relies on font-weight and size to establish hierarchy within the sans-serif families.

## Spacing
**Base unit:** 5px (inferred from 10/15/20/30 scale)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 4 |
| `{space.sm}` | 15px | 3 |
| `{space.md}` | 20px | 3 |
| `{space.lg}` | 30px | 4 |
| `{space.xl}` | 54px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | All buttons, cards, and inputs | 46 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{elevation.flat}` | none | Standard containers | Universal |

## Components

### Tier 1: Foundational

#### Global Header
**Role:** Primary site navigation and branding.
**Pages observed:** All
**Spec:** Background: `#ffffff` | Text: `#666666` | Height: 80px | Typography: `{type.nav}`
**States observed:** Default | Hover: `{color.accent}` | Focus: not captured

#### Primary Button (Utility)
**Role:** Action triggers (e.g., cookie consent).
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` | Text: `#000000` | Border: 1px solid `#000000` | Radius: `0px`
**States observed:** Default | Hover: not captured

### Tier 2: Patterns

#### Company Logo Grid
**Role:** Displaying portfolio companies.
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` | Padding: `{space.lg}` | Alignment: Center
**States observed:** Default

#### Content Card
**Role:** Sectioning information on the homepage.
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` | Border: none | Radius: `0px` | Typography: `{type.body.md}`
**States observed:** Default

### Tier 3: Surface-specific

#### Dark Footer
**Role:** Site-wide contact and social information.
**Pages observed:** All
**Spec:** Background: `#000000` | Text: `#ffffff` | Padding: `{space.xl}`
**States observed:** Default

#### Hero Overlay
**Role:** Primary value proposition over imagery.
**Pages observed:** Homepage
**Spec:** Background: `rgba(0,0,0,0.5)` | Text: `#ffffff` | Border-left: 5px solid `{color.accent}` (inferred from screenshots)
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1080px |
| Section Gap | 54px |
| Column Gutter | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | < 767px | Navigation collapses to hamburger menu; padding reduces to `{space.md}` |
| Desktop | 1080px+ | Content centers with max-width container |

## Imagery & decoration
The brand uses high-contrast, desaturated (black and white) photography for hero sections and background textures. Decorative elements are limited to 1px dividers and solid color blocks. It avoids gradients, shadows, and rounded corners.

## Do's
- Use **Roboto 300** for all primary section headlines.
- Maintain **0px border-radius** on every interactive element.
- Use **#2ea3f2** strictly for text links and small UI accents.
- Ensure all body text is either **#000000** or **#666666** for legibility.
- Apply **54px vertical spacing** between major content sections.

## Don'ts
- **Wrong:** Using rounded corners on buttons. **Right:** 0px radius. **Reason:** Brand identity is built on rigid, sharp geometry.
- **Wrong:** Using #2ea3f2 as a button background. **Right:** White background with black border. **Reason:** Accent color is reserved for text-based interaction.
- **Wrong:** Using bold weights for large display headers. **Right:** Roboto 300. **Reason:** The brand signature is "Light" weight for authority.
- **Wrong:** Introducing drop shadows for depth. **Right:** Flat design with 1px borders. **Reason:** The system is strictly 2D.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-canvas: #ffffff;
  --color-ink: #000000;
  --color-ink-muted: #666666;
  --color-accent: #2ea3f2;
  --font-heading: 'Roboto', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --radius-none: 0px;
  --space-base: 10px;
}
```

## Known gaps
- Hover states for primary navigation items were not fully captured in the token evidence but are visible in screenshots as color shifts.
- Form input validation states (Success/Error) were not present in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://nebraskaglobal.com | 1440px | 2026-06-06 |