# NexPatch Design Guide

Version 1.0, July 2026. Single source of truth for the NexPatch brand across web, social, print and product UI.

Interactive version with live swatches and copy-paste tokens: https://nexpatch.ai/en/brand

- Company: NexPatch AI UG, Neumarkt 31, 04109 Leipzig, Germany
- Positioning: AI-native software engineering
- Boilerplate: "Building the next generation of AI-driven products. We design intelligent systems that help forward-thinking enterprises scale with confidence."
- Hero triad: Build. Deploy. Predict.
- Contact: info@nexpatch.ai, +49 341-97856921, https://nexpatch.ai

---

## 1. Logo

The mark is the "NX circuit" monogram inside a hexagonal outline. The wordmark sets NEXPATCH next to the mark.

| Variant | SVG | PNG |
|---|---|---|
| Icon + text, full color (#EA4D20) | `/assets/logo/svg/full-color/nexpatch-logo-icon-text-full-color.svg` | `/assets/logo/png/full-color/nexpatch-logo-icon-text-full-color.png` |
| Icon + text, white | `/assets/logo/svg/white/nexpatch-logo-icon-text-white.svg` | `/assets/logo/png/white/nexpatch-logo-icon-text-white.png` |
| Icon + text, black (#15171A) | `/assets/logo/svg/black/nexpatch-logo-icon-text-black.svg` | `/assets/logo/png/black/nexpatch-logo-icon-text-black.png` |
| Icon only, full color | `/assets/logo/svg/full-color/nx-logo-icon.svg` | `/assets/logo/png/full-color/nx-logo-icon.png` |
| Icon only, white | `/assets/logo/svg/white/nx-logo-icon.svg` | `/assets/logo/png/white/nx-logo-icon.png` |
| Icon only, black | `/assets/logo/svg/black/nx-logo-icon.svg` | `/assets/logo/png/black/nx-logo-icon.png` |

All paths are relative to `https://nexpatch.ai` (repo: `public/`).

Rules:

- Logo orange is `#EA4D20`. Never recolor the mark with UI accent tones.
- On dark grounds use the full-color or white variant. On light grounds use full-color or black.
- Minimum size: icon 24 px, wordmark 120 px wide (print: icon 8 mm, wordmark 30 mm).
- Clear space: the height of the hexagon's inner "N" stroke on all sides, roughly 25 percent of the mark's height.
- Do not add glows, gradients, outlines, shadows or rotation to the logo.
- Favicon and app icons use the icon-only mark (`/favicon.ico`, `/favicon.svg` at `#EE714D`).

## 2. Color

NexPatch is dark-first. The system is derived from Material 3 tonal logic with a warm orange primary.

### Surfaces (dark theme)

| Token | Hex | Usage |
|---|---|---|
| `--color-nxp-bg` | `#131313` | Page background |
| `--color-nxp-bg-mid` | `#1c1b1b` | Secondary panels |
| `--color-nxp-card` | `#201f1f` | Cards, tiles, stat boxes |
| `--color-nxp-card-hover` | `#2a2a2a` | Card hover, high surface |
| `--color-nxp-surface-highest` | `#353534` | Highest elevation |
| `--color-nxp-surface-lowest` | `#0e0e0e` | Recessed areas |

### Text

| Token | Hex | Usage |
|---|---|---|
| `--color-nxp-fg` | `#e5e2e1` | Headlines, body text |
| `--color-nxp-fg-variant` | `#e6beb2` | Section descriptions |
| `--color-nxp-muted-fg` | `#ad897e` | Eyebrows, captions, meta |

### Accents

| Token | Hex | Usage |
|---|---|---|
| `--color-nxp-primary` | `#ffb59e` | Primary accent, links, focus |
| `--color-nxp-primary-glow` | `#ffdbd0` | Highlights on primary |
| `--color-nxp-primary-container` | `#ff571a` | Filled CTAs, strong emphasis |
| `--color-nxp-on-primary` | `#5e1700` | Text on primary |
| `--color-nxp-secondary` | `#b1c5ff` | Secondary accent (blue) |
| `--color-nxp-secondary-container` | `#0559d4` | Filled secondary |
| `--color-nxp-tertiary` | `#c7bfff` | Tertiary accent (purple) |
| `--color-nxp-tertiary-container` | `#8f7fff` | Filled tertiary |
| Logo orange | `#EA4D20` | Logo artwork only |

### Semantic

| Token | Hex |
|---|---|
| `--color-nxp-success` | `#22c55e` |
| `--color-nxp-warning` | `#f59e0b` |
| `--color-nxp-destructive` | `#ffb4ab` |

### Borders

| Token | Value |
|---|---|
| `--color-nxp-border` | `rgba(255,255,255,0.05)` |
| `--color-nxp-border-strong` | `rgba(255,255,255,0.1)` |
| `--color-nxp-outline` | `#ad897e` |

### Product and domain accents

| Context | Hex |
|---|---|
| Private AI, finance | `#ffb59e` |
| Full-Stack, energy | `#b1c5ff` |
| Orpheon, oil and gas | `#c7bfff` |

### Light variant (print and handouts)

| Role | Hex |
|---|---|
| Background | `#ffffff` |
| Surface | `#f6f4f3` |
| Foreground | `#1c1b1b` |
| Muted text | `#6b5d57` |
| Border | `#e5e2e1` |

Color rules:

1. One dominant accent per composition. Never mix orange, blue and purple with equal weight in a single view.
2. Accents color small areas: labels, lines, numbers, icons, buttons. Surfaces stay neutral.
3. Gradient sweeps run `#ffb59e` to `#b1c5ff` to `#c7bfff` and are reserved for thin lines and progress indicators.
4. `#EA4D20` belongs to the logo. UI orange is `#ffb59e` on dark, `#ff571a` for filled elements.

## 3. Typography

| Role | Family | Weights | Treatment |
|---|---|---|---|
| Display, headlines | Space Grotesk | 500, 600, 700 | Tight leading, slightly negative tracking |
| Body | Inter | 400, 500 | Line height 1.4 to 1.7 |
| Labels, eyebrows, data | JetBrains Mono | 400, 500 | Uppercase, letter-spacing 0.15 to 0.2 em |

CSS stacks:

```css
--font-display: 'Space Grotesk', sans-serif;
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
```

Web loading: `next/font/google` with `display: swap`, weights 400 to 700 per family.

Component type specs:

- Eyebrow: JetBrains Mono 500, 0.6 rem, uppercase, letter-spacing 0.2 em, color `#ad897e`
- Badge: JetBrains Mono 500, 0.71 rem, uppercase, letter-spacing 0.15 em
- Button: Space Grotesk 700, 0.88 rem, uppercase, letter-spacing 0.04 em
- Section description: 0.92 rem, weight 300, line height 1.7, max width 580 px

Print sizes (A4): headline 28 to 40 pt, subheadline 16 to 20 pt, body 9.5 to 11 pt, eyebrow and labels 7 to 9 pt.

Legacy faces (`Druk Wide Bold`, `Standerd`) exist in `public/assets/fonts/` for older material. Do not use them in new work.

## 4. Layout, spacing, radius

- Corner radius: `--radius: 0.125rem` (2 px). Surfaces are near-square. Only pills and badges use `border-radius: 999px`. Cards may use radius 0.
- Section padding: 96 px vertical, 10 vw horizontal. Container max width 1920 px.
- Card padding: 22 to 26 px. Button padding: 14 px 28 px.
- Spacing steps: 4 rem, 4.5 rem, 5 rem, 7.5 rem for large gaps.
- Borders are 1 px hairlines at `rgba(255,255,255,0.05)`, strong variant at 0.1 alpha.
- Depth comes from glows, not drop shadows: `0 0 30px rgba(255,181,158,0.3)` on primary hover, `0 0 15px rgba(255,87,26,0.4)` on filled CTAs.
- Sticky header: `rgba(19,19,19,0.7)` with `backdrop-filter: blur(16px) saturate(1.2)`.
- Focus ring: 2 px solid `#ffb59e`, offset 2 px.
- Optional texture: fractal noise overlay at 0.025 opacity.

Print (handouts): A4 margins 15 mm, A5 margins 12 mm, 3 mm bleed, 12-column grid.

## 5. Motion

- Easing: `cubic-bezier(0.22, 1, 0.36, 1)`
- Reveal durations 0.6 to 0.8 s, ambient loops 3 to 5 s
- Named keyframes: `nxp-fade-up`, `nxp-float`, `nxp-pulse-glow`, `nxp-shimmer`, `nxp-scale-in`, `nxp-border-glow`, `nxp-gradient-sweep`
- Always honor `prefers-reduced-motion`

## 6. Voice and tone

Precise, technical, calm. We explain systems, we do not hype them.

Approved examples:

- "Private AI for real operations."
- "Forecasting that survives real-world complexity."
- "Build once. Deploy securely. Scale deliberately."
- "From data chaos to decisions."
- "Von Datenchaos zu belastbaren Entscheidungen."

Banned phrases:

- "Revolutionize your business today"
- "Unlock next-level AI magic"
- "We are your innovative partner for success"

Mono label vocabulary: `ENTERPRISE AI`, `PRIVATE DEPLOYMENT`, `FORECAST SYSTEM`, `CASE STUDY`.

Product taglines:

- Full-Stack: "From idea to production-ready product in 4-8 weeks. We co-found, design, build, and ship, with government funding support."
- Private AI: "Deploy powerful AI agents on your own infrastructure. Zero data leaves your network. Full sovereignty, full control."
- Orpheon: "AI-native time-series forecasting with visual pipeline orchestration. From raw data to 7-quantile predictions in hours."

## 7. Formats

Social: 1080 x 1080, 1080 x 1350, 1080 x 1920. Safe area 80 px. One dominant accent per post, logo small and quiet, mono eyebrow top left.

Print: A4, A5, DIN long, 16:9 slides. Handout types carry assigned accents (see `doc/design-handouts.md`).

## 8. Asset index

Base URL `https://nexpatch.ai`, repo path `public/`.

- Logos: `/assets/logo/{svg,png}/{full-color,white,black}/`
- Favicon: `/favicon.ico`, `/favicon.svg`
- OG image: `/og-image.png`
- Social profile images: `/assets/social-media/`
- Banners: `/assets/banner-01.png`, `/assets/banner-02.png`
- Technology icons: `/assets/images/technologies/`
- Case study logos: `/assets/images/case-studies/`
- Team portraits: `/assets/images/team-member/`
- Whitepapers: `/whitepapers/{build,deploy,predict}[.en].pdf`
- Fonts (legacy, self-hosted): `/assets/fonts/`

Related documents in the repo: `doc/design.md` (social media guide, German), `doc/design-handouts.md` (print guide, German), `NexPatchBrandAssets.md` (asset URL index).