# Startupblowup · Design system migration spec

> Source: https://www.startupblowup.com  ·  Curated by OpenDesign  ·  en

> This site is worth including as a prime example of expressive, non-corporate startup branding that uses graphic elements and custom interactions to create a memorable experience.

## 1. Identity DNA

Startupblowup treats its interface like a pop-art comic book page, where every element is a panel in a larger, playful narrative. The design language is built on the analogy of a single balloon ready to inflate, making growth feel tangible and graphic rather than abstract.

**One-liner:** A playful, comic-inspired service helping startups grow exponentially.
**Keywords:** playful · startup · comic · inflation · bold
**Analogy:** A pop-art comic book page

## 2. Color

The palette is a study in stark contrast: a warm off-white field, heavy black ink lines, and a single, assertive pastel pink. This high-contrast comic book palette rejects nuance for immediate, graphic impact.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F4EDDC` | main background |
| `--bg-soft` | `#FFFFFF` | card background |
| `--bg-quiet` | `#F4EDDC` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#000000` | placeholder |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** High-contrast comic book palette with stark black outlines and a single dominant pastel hue.

The principle is flat color fills and stark outlines, creating a bold, printed aesthetic.

## 3. Typography

Typography separates into two distinct voices: a comic-style font for display and a clean sans-serif for body copy. This pairing gives headlines a hand-lettered, graphic punch while keeping long-form text legible.

- **Display:** comic
- **Body:** humanist-sans
- **Mono:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.5 | 400 | normal | Hero headline |
| body | 16px | 1.5 | 400 | normal | Standard text |

**Type rules:**
- Use a comic-style font for large display text and a clean sans-serif for body copy.

## 4. Spacing

Rhythm is established on a strict 4px base grid, providing a subtle, structured foundation for the more playful elements to rest upon.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 4px base grid

## 5. Surfaces

Depth is communicated not through shadow, but through stark borders and flat color fields. The 2px solid black outlines define every shape, giving the interface its comic-book structure and graphic weight.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** 2px solid black

## 6. Layout

The layout is centered and graphic-heavy, prioritizing large shapes over traditional grid lines. Text is overlaid directly on these shapes, integrating typography as a core visual element within the composition.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Large centered graphic elements with text overlaid directly on shapes.

## 7. Motion & Interaction

Motion philosophy is playful and implied, centered on an inflation/deflation theme that mirrors the balloon graphic. All elements have a CSS transition applied, ensuring any state change feels smooth and considered.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Inflation/deflation effect implied by the balloon graphic and custom cursors.

- **Hover:** Custom pointer cursor on interactive elements.
- **Click:** Custom pointer-small cursor on specific elements.
- **Transition:** all elements have a CSS transition applied.
- **Keyboard:** Standard browser focus states.

## 8. Voice & Don'ts

The editorial voice is energetic and slightly provocative, matching the bold graphic style. It avoids corporate jargon in favor of comic-book style headlines with thick black outlines.

- **Tone:** Playful, energetic, and slightly provocative.
- **Headline style:** Comic book style with a thick black outline and slight shadow effect.
- **CTA style:** Not explicitly shown, but implied to be bold and interactive.
- **Avoid:** Serif fonts / Subtle gradients / Corporate jargon / Muted colors / Small text sizes

### Don'ts
- ❌ Don't use subtle gradients — screenshot shows flat color fills.
- ❌ Don't use serif typography — screenshot shows comic and sans-serif fonts.
- ❌ Don't use a dark background — screenshot shows a light, warm background.
- ❌ Don't use complex shadows — screenshot shows flat elements with simple outlines.
- ❌ Don't use muted colors — screenshot uses a stark black and a bright pink.
- ❌ Don't use standard UI components — screenshot uses custom cursors and graphic shapes.

The system deliberately avoids serif fonts, subtle gradients, dark backgrounds, muted colors, complex shadows, and standard UI components.

## System Prompt (paste into AI tool)

```
This site is a playful, comic-inspired service for startups. The design uses a stark black and white palette with a dominant pastel pink accent. The typography relies on a custom comic font for display text and a clean sans-serif for body copy. Key interactions include custom cursors and an inflation theme. Critical donts: don't use serif fonts, don't create subtle gradients, don't use a dark background, don't use complex shadows, don't use muted colors, and don't use standard UI components.
```