# Hardpoint Labs Brand Guidelines

Hardpoint Labs builds database infrastructure for teams that need strong tenant isolation.

## Principles

| Word | Description |
|------|-------------|
| **Precise** | Every element is deliberate. Pixel-exact, no decoration without purpose. |
| **Reliable** | The brand should feel like the product — dependable, never flashy. |
| **Direct** | Say exactly what you mean. No marketing spin, no manufactured warmth. |

### Brand motif

![Pixel logo mark](logo.svg)

The logo is an 8×8 pixel grid with a single 2×2 focal node at center — a system at scale with one highlighted point. This grid is the geometric foundation for spacing, layout, and technical illustration.

---

## Logo system

The mark works in two weights: the pixel mark alone, and the mark paired with the logotype. Use the lockup as the default. Use the mark alone when space is constrained.

### Variants

| Variant | Surface | Preview |
|---------|---------|---------|
| Mark | Light | ![Logo mark](logo.svg) |
| Mark | Dark | ![Logo mark inverted](logo-inverted.svg) |
| Lockup | Light | ![Logo lockup](logo-with-logotype.svg) |
| Lockup | Dark | ![Logo lockup inverted](logo-with-logotype-inverted.svg) |

### Clear space

The minimum clear space equals one logo grid module — ⅛ of the mark's width. Maintain this around both the mark alone and the lockup.

```
1u = mark_width ÷ 7.5
```

### Minimum sizes

| Size | Use case |
|------|----------|
| 16px | Favicon |
| 24px | App icon / tab |
| 36px | Small contexts |
| 54px | Standard |
| 72px | Large / hero |

### Don'ts

- **Don't rotate** the logo
- **Don't stretch** or distort the logo
- **Don't recolor** — use only Brand Blue (#355EBD) on light or white on dark
- **Don't place on busy backgrounds**

---

## Color system

Brand Blue (#355EBD) is the only true color. Use it intentionally for interactive elements and primary actions. Everything else is grayscale with a slight blue cast — neutrals that feel native to the primary.

### Primary — Blue

| Hex | Name | Usage |
|-----|------|-------|
| #2347A0 | Blue Dark | Hover on dark surfaces |
| #355EBD | Blue / Primary | Actions, links, focus |
| #4A72D1 | Blue Mid | Secondary interactions |
| #7A96DE | Blue Light | Decorative, disabled |
| #B3C5EE | Blue Tint | Selected states |
| #E3E8F3 | Blue Ghost | Hover, subtle surfaces |

### Neutral — Blue-cast grays

| Hex | Name | Usage |
|-----|------|-------|
| #0A0A0A | Ink | Display headings |
| #1A1A1A | Black-90 | Body text |
| #3D3D3D | Black-75 | Secondary body |
| #555555 | Gray-65 | Captions, strokes |
| #8894C0 | Blue-Gray | Technical labels |
| #AEBACE | Gray-50 | Placeholder text |
| #D4D9E8 | Gray-25 | Borders, dividers |
| #EAECF5 | Gray-10 | Elevated surfaces |
| #F4F6FB | Gray-5 | Page fill |
| #FAFBFF | Off-White | Card surfaces |
| #FFFFFF | White | Primary background |

### Diagram palette — Technical visuals only

Calibrated for isometric and network diagrams. Do not use as UI surface colors.

| Hex | Name | Usage |
|-----|------|-------|
| #355EBD | Accent Blue | Primary nodes, key paths |
| #8894C0 | Stroke Gray-Blue | Component borders |
| #E3E8F3 | Face Right | Isometric right face |
| #EAECF5 | Face Left | Isometric left face |
| #FAFBFF | Face Top | Isometric top face |
| #EEF2FF | Fill Light | Inner node fill |

### Contrast checks

| Combination | Ratio | Pass |
|-------------|-------|------|
| White on Brand Blue (#355EBD) | 4.7:1 | AA |
| White on Ink (#0A0A0A) | 19:1 | AAA |
| Blue (#355EBD) on White | 4.7:1 | AA |
| Gray-65 (#555555) on White | 5.7:1 | AA |

---

## Type system

Two families. **Inter** for all UI text and the logotype. **Intel One Mono** for code, status labels, data values, section numbers, and technical spec strings.

### Font families

| | Primary — Inter | Secondary — Intel One Mono |
|---|---|---|
| Weights | 300, 400, 500, 600, 700 | 400, 500, 600 |
| Usage | UI text, headings, body copy, buttons, nav, logotype | Code, data labels, status strings, spec tables, section numbers |

### Type scale

| Style | Size | Weight | Leading | Tracking |
|-------|------|--------|---------|----------|
| Display | 48px | 700 | 1.05 | -0.025em |
| Heading 1 | 36px | 600 | 1.15 | -0.02em |
| Heading 2 | 24px | 600 | 1.25 | -0.015em |
| Heading 3 | 18px | 500 | 1.35 | -0.01em |
| Body Large | 16px | 400 | 1.65 | 0 |
| Body | 14px | 400 | 1.65 | 0 |
| Label | 12px | 500 | 1.4 | 0.04em |
| Caption | 11px | 400 | 1.5 | 0.01em |

### Code specimen

```
cluster.deploy({
  region: "us-east-1",
  replicas: 3,
  strategy: "rolling",  // zero-downtime
  healthCheck: "/api/status",
  resources: { cpu: "4", memory: "16Gi" }
})
```

---

## Spacing system

The base unit is **6px** — the pixel square plus gap from the logo grid. All spacing is a multiple of 6px.

```
1u = 6px → logo pixel module
```

### Spacing scale

| Unit | Pixels | Usage |
|------|--------|-------|
| 1u | 6px | Icon gap, tight internal padding |
| 2u | 12px | Component internal padding |
| 3u | 18px | Element gap |
| 4u | 24px | Section padding, card gap |
| 6u | 36px | Component margin |
| 8u | 48px | Section top/bottom padding |
| 12u | 72px | Major section gap |
| 16u | 96px | Page padding (desktop) |
| 20u | 120px | Hero section padding |

### Logo grid anatomy

| Element | Size | Description |
|---------|------|-------------|
| Pixel unit | 3×3px | Fundamental atom. Never render below 3px. |
| Module unit | 6px (pixel + gap) | Base spatial unit. All spacing is a multiple of 6px. |
| Focal node | 9×9px (1.5×) | The 2×2 enlarged center square. Signals primary content. |
| Grid frame | 45×45px (7.5u) | Full logo bounds at base size. |

### Border radius

| Radius | Element | Note |
|--------|---------|------|
| 0px | Brand elements | Logos, diagrams, data viz |
| 2px | UI elements | Buttons, inputs, tags |
| 4px | Cards | Content containers |
| 8px | Modals only | Dialogs, toasts |

---

## Component patterns

Flat geometry, no shadows. Blue only on primary interactive elements. One primary action per view.

### Buttons

| Type | Description |
|------|-------------|
| Primary | Main action per view. One per screen. |
| Secondary | Supporting action. Paired with primary. |
| Tertiary | Neutral. Used for cancel / back. |
| Ghost | Text-only. For low-emphasis actions. |

### Status tags & Badges

Tags use Intel One Mono, compact padding, and status-driven colors:
- **ACTIVE** — Blue on Blue Ghost
- **DEPLOYING** — White on Ink
- **STOPPED** — Gray-65 on Gray-10
- **IDLE** — Gray-50 on Off-White, bordered
- **ERROR** — White on #DC2626

### Form inputs

- 2px radius, 1px rgba border, focus ring uses Brand Blue
- Error state uses #DC2626 border

### Data cards

Metric cards with stat/value, delta indicator, and 4px radius border.

### Code & terminal

Code blocks use Intel One Mono, Off-White background, labeled header bar.

---

## Technical diagrams

Infrastructure diagrams use the isometric grid style. Flat, three-face geometry. No drop shadows, no gradients, no perspective beyond the isometric axis.

### Rules

| Rule | Description |
|------|-------------|
| Isometric grid | 30° angle, consistent across all technical illustrations. Never mix perspective styles. |
| Flat surfaces | Three distinct face tones — top (#FAFBFF), right (#E3E8F3), left (#EAECF5). |
| 1.5px strokes | #555555 for structural lines. #8894C0 for secondary / internal components. |
| Blue for data | #355EBD at 20–25% opacity for data flow overlays and dot grids on top faces. |
| Dashed bounds | System boundaries: #355EBD dashed stroke, dash-array 10 5. Signals container scope. |
| Pixel dot grid | 3×3px dots at 25% #355EBD opacity — directly references the logo motif in context. |

### Isometric cube — element anatomy

![Isometric cube diagram](isometric-cube.svg)

| Face | Hex | Stroke |
|------|-----|--------|
| Top face | #FAFBFF | #555555 |
| Right face | #E3E8F3 | #555555 |
| Left face | #EAECF5 | #555555 |
| Inner node | #EEF2FF | #8894C0 |

- Structural stroke: #555555 · 1.5px
- Secondary stroke: #8894C0 · 1px
- Blue data overlay: #355EBD · 20% opacity