# Picknik Design System

> Deep-space navy canvases anchored by high-voltage electric blue actions and technical Inter Tight typography.

**Source:** https://picknik.ai | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Picknik utilizes a high-contrast "Dark Mode" primary aesthetic, where a deep navy foundation (`#000f19`) meets a vibrant primary blue (`#0b77f6`). The system is characterized by its technical, engineering-forward feel, achieved through the use of **Inter Tight** for headlines and **Gantari** for specialized body and navigation elements. UI components favor a medium-radius geometry (8px to 16px) and subtle 1px borders that define containers against the dark background. The layout is structured around generous vertical spacing (up to 120px) and a clear hierarchy of information density, moving from airy marketing heroes to dense, data-rich pricing and feature tables.

## Signature DNA
1. **The Electric Primary** (`#0b77f6`): A highly saturated blue used for all critical path actions, primary buttons, and brand-critical highlights across both light and dark surfaces.
2. **Technical Typography Pairing**: The contrast between the geometric, high-readability **Inter Tight** (used for display and data) and the slightly more humanist **Gantari** (used for navigation and brand labels).
3. **Deep Space Containment**: Use of dark, low-luminance backgrounds (`#000f19`, `#061b26`) paired with 1px borders in muted accent blues to create a sense of depth and technical precision.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | `#ffffff` | Primary text on dark, surface background on light | 228 | 1.0 | `css_variable:--white` |
| `{colors.navy-deep}` | `#000f19` | Primary section background (Dark mode) | 3 | 0.6 | `computed_style` |
| `{colors.navy-mid}` | `#061b26` | Navigation and surface backgrounds | 2 | 0.8 | `computed_style` |
| `{colors.gray-text}` | `#51555b` | Secondary body text on light surfaces | 74 | 0.8 | `computed_style` |
| `{colors.black}` | `#000000` | Primary text on light surfaces | 38 | 0.8 | `computed_style` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.primary}` | `#0b77f6` | Primary buttons, active borders, brand text | 55 | 1.0 | `brand_page` |
| `{colors.blue-accent}` | `#007bff` | Secondary brand signals | 21 | 1.0 | `css_variable:--primary` |
| `{colors.slate-blue}` | `#3c4a69` | Muted navigation text, secondary labels | 218 | 0.8 | `computed_style` |
| `{colors.ice-blue}` | `#d7dee9` | Tertiary text, de-emphasized labels | 19 | 0.8 | `computed_style` |
| `{colors.border-muted}` | `#172635` | Subtle container outlines on dark | 9 | 0.6 | `computed_style` |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{colors.success}` | `#28a745` | Confirmation signals (e.g., pricing checkmarks) |
| `{colors.warning}` | `#ffc107` | Cautionary signals |
| `{colors.error}` | `#dc3545` | Error states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| **Inter Tight** | 300, 400, 500, 600, 700, 800, 900 | Headlines, Display, Data tables | Inter | Google Fonts |
| **Gantari** | 300, 400, 700 | Navigation, Brand labels, Body | Montserrat | Google Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-lg}` | 40px | 48px | normal | 700 | Section titles | `h3.recommendations-title` |
| `{type.heading-md}` | 32px | 40px | normal | 500 | Feature headers | `h3` |
| `{type.heading-sm}` | 24px | 28.8px | normal | 500 | Card titles | `h3` |
| `{type.nav-brand}` | 20px | 30px | normal | 400 | Logo text | `a.navbar-brand` |
| `{type.body-lg}` | 17px | 24px | normal | 500 | Lead paragraphs | `p` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Standard body | `div.homepage__body` |
| `{type.button}` | 16px | 24px | normal | 700 | Primary CTA | `a.btn.btn-primary` |
| `{type.caption}` | 12px | 15.6px | normal | 600 | Small labels | `p.homepage__case-studies` |

### Principles
1. **Headline Weighting**: Primary section headers use Inter Tight at 700 weight for maximum technical authority.
2. **Navigation Lightness**: Top-level navigation items utilize Gantari at 300 weight to maintain a clean, airy header.
3. **Data Density**: Pricing tables and technical specs use Inter Tight at 500-600 weight for legibility in dense grids.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 35 |
| `{space.sm}` | 16px | 22 |
| `{space.md}` | 24px | 138 |
| `{space.lg}` | 32px | 12 |
| `{space.xl}` | 48px | 4 |
| `{space.section}` | 120px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.input}` | 4px | Form fields, small tags | `input.hs-button` |
| `{radius.button}` | 8px | Primary CTAs, small cards | `a.btn.btn-primary` |
| `{radius.card}` | 16px | Feature cards, pricing tiers | `div.moveit-price__plan-item` |
| `{radius.panel}` | 24px | Navigation containers | `nav.navbar` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.nav}` | `rgba(0, 0, 0, 0.2) 0px 0px 4px 2px` | Floating navigation bar | `nav.navbar` |
| `{shadow.card}` | `rgba(16, 24, 40, 0.05) 0px 1px 2px 0px` | Subtle lift for primary cards | `div.moveit-price__plan-item` |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site actions (Connect, Pricing, Submit)
**Pages observed:** Homepage, Pricing
**Spec:** Background `{colors.primary}` (#0b77f6) / Text `{colors.white}` (#ffffff) / Radius 8px / Padding 10px 18px / Font `{type.button}`
**States observed:** Default | Hover: captured | Active: captured | Disabled: not captured

#### Text Input
**Role:** Newsletter signup and lead capture
**Pages observed:** Homepage, Pricing
**Spec:** Background transparent / Text `{colors.white}` (#ffffff) / Border 1px (#989898) / Radius 4px / Padding 10px 14px
**States observed:** Default | Focus: captured

### Tier 2: Patterns

#### Navigation
**Role:** Global site header
**Pages observed:** Homepage, Pricing
**Spec:** Background `{colors.navy-mid}` (#061b26) / Text `{colors.slate-blue}` (#3c4a69) / Border 1px (#283943) / Radius 24px / Shadow `{shadow.nav}`
**States observed:** Default | Hover: captured

#### Feature Card
**Role:** Benefit and use-case display
**Pages observed:** Homepage
**Spec:** Background transparent / Border 1px `{colors.border-muted}` (#172635) / Radius 16px / Padding 32px
**States observed:** Default

### Tier 3: Surface-specific

#### Pricing Tier
**Role:** Product plan comparison
**Pages observed:** Pricing
**Spec:** Background `{colors.navy-deep}` (#000f19) / Border 1px `{colors.border-muted}` (#172635) / Radius 16px / Padding 32px
**States observed:** Default | Highlighted: uses `{colors.primary}` border

#### Marketplace Badge
**Role:** Small category labels
**Pages observed:** Homepage
**Spec:** Background `rgba(11, 119, 246, 0.05)` / Text `{colors.primary}` (#0b77f6) / Radius 4px / Padding 4px 10px
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1440px |
| Section Gutter | 24px |
| Vertical Rhythm | 120px (Section), 48px (Group) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; 1-column card stacks; Section padding reduces to 20px. |
| Desktop | 1440px | Multi-column grids (3-up or 4-up); Floating navigation bar centered. |

## Imagery & decoration
Picknik uses high-fidelity 3D renders of robotic systems and space-grade hardware. Visuals often feature dark backgrounds with high-contrast lighting to match the UI. Avoids flat, playful illustrations or bright, multi-colored photography.

## Do's
- Use `#0b77f6` for all primary interactive elements.
- Maintain high contrast by using `#ffffff` text on all dark navy backgrounds.
- Apply `{radius.card}` (16px) to all major content containers.
- Pair Inter Tight headlines with Gantari navigation for the correct technical voice.
- Use 1px borders in `#172635` to define sections on dark canvases.

## Don'ts
- **Wrong:** Using `#007bff` (Standard Blue) for primary buttons. **Right:** Use `#0b77f6`. **Reason:** Standard blue is a legacy token; `#0b77f6` is the brand primary.
- Do not use sharp (0px) corners for buttons; always use 8px.
- Avoid using light backgrounds for primary marketing sections; the brand identity is "Dark Mode" first.
- Do not use Inter Tight for top-level navigation; use Gantari 300.

## Similar brands
- Scale AI
- Anduril
- Boston Dynamics
- SpaceX

## Quick start

### CSS Custom Properties
```css
:root {
  --pk-primary: #0b77f6;
  --pk-navy-deep: #000f19;
  --pk-navy-mid: #061b26;
  --pk-white: #ffffff;
  --pk-slate: #3c4a69;
  --pk-radius-card: 16px;
  --pk-radius-button: 8px;
  --pk-font-display: 'Inter Tight', sans-serif;
  --pk-font-nav: 'Gantari', sans-serif;
}
```

## Agent prompt examples
- "Generate a primary CTA button using Picknik's electric blue #0b77f6, 8px border radius, and Inter Tight 700 font."
- "Create a feature card with a 1px border of #172635, a background of #000f19, and 16px corner radius."
- "Design a pricing table header using Inter Tight at 30px size and 700 weight on a navy background."

## Known gaps
- Hover state hex values for primary buttons were not explicitly captured in the token set.
- Mobile-specific typography scale for display sizes was not fully sampled.
- Secondary button (outline) padding was inconsistent across analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://picknik.ai | 1440px | 2026-06-06 |
| Pricing | https://picknik.ai/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://picknik.ai | 390px | 2026-06-06 |