---
version: alpha
name: Magnific
description: A near-black cinematic stage where ESKlarheit Plakat runs massive display type at weight 800, a volcanic hot-pink cuts through the darkness as the singular brand signal, and before/after imagery of AI-upscaled work does the selling — bold, dramatic, and technically confident.

colors:
  # Surface / canvas
  background: "#080808"          # near-black marketing canvas — almost pure dark
  surface: "#111111"             # raised panels, card fills on dark
  surface-raised: "#1a1a1a"      # hovered tiles, elevated surfaces
  surface-overlay: "#0d0d0d"     # modal / lightbox scrim

  # Ink / text
  ink: "#ffffff"                 # primary text on the dark canvas
  ink-secondary: "#a0a0a0"       # supporting copy, metadata, muted labels
  ink-muted: "#606060"           # lowest-emphasis captions, disabled text
  on-primary: "#ffffff"          # text on the hot-pink primary button
  on-dark: "#282828"             # dark label for link hover on near-white bg — was rgb(40,40,40)

  # Brand accent — Magnific hot-pink / magenta
  primary: "#ff58ae"             # the singular brand signal: CTAs, links, interactive highlights
  primary-hover: "#e03d97"       # deepened pink for hover states /* estimated */
  primary-glow: "#cc2277"        # deep magenta gradient stop, dark variant /* estimated */
  primary-soft: "#2a0d1a"        # tinted dark fill — pink at very low alpha on dark bg /* was rgba(255,88,174,0.12) — Google format requires hex */

  # Borders
  border: "#2a2a2a"              # standard dark hairline divider
  border-soft: "#1e1e1e"         # subtler separator between surface tiers

  # Shadow tints (opaque approximations)
  shadow-soft: "#000000"         # was rgba(0,0,0,0.4) — Google format requires hex
  shadow-deep: "#000000"         # was rgba(0,0,0,0.75) — Google format requires hex

  # Link interaction (from dembrandt delta)
  link-hover-bg: "#dddddd"       # was rgba(255,255,255,0.87) — flattened for Google format

typography:
  display-hero:
    fontFamily: "ESKlarheitPlakatFP, KlarheitInline, GeistInline, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 160px
    fontWeight: 800
    lineHeight: 0.85
    letterSpacing: -4px
  display:
    fontFamily: "ESKlarheitPlakatFP, KlarheitInline, GeistInline, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 80px
    fontWeight: 800
    lineHeight: 0.9
    letterSpacing: -2px
  heading:
    fontFamily: "ESKlarheitPlakatFP, KlarheitInline, GeistInline, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: -1px
  heading-sub:
    fontFamily: "ESKlarheitPlakatFP, KlarheitInline, GeistInline, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 30px
    fontWeight: 800
    lineHeight: 1.0
    letterSpacing: -0.5px
  body-large:
    fontFamily: "Geist, GeistInline, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Geist, GeistInline, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-semibold:
    fontFamily: "Geist, GeistInline, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  button-ui:
    fontFamily: "Geist, GeistInline, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: 0.75px
  label:
    fontFamily: "Geist, GeistInline, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  caption:
    fontFamily: "Geist, GeistInline, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  eyebrow:
    fontFamily: "Geist, GeistInline, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 1.5px

spacing:
  xs: 4px
  sm: 8px
  md: 10px
  lg: 16px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px
  5xl: 160px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 28px
    border: "1px solid {colors.ink}"
  button-ghost-hover:
    backgroundColor: "{colors.link-hover-bg}"
    textColor: "{colors.on-dark}"

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 10px 28px
  button-secondary-hover:
    backgroundColor: "{colors.surface-raised}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
  card-media:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 0px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.primary}"

  badge:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    padding: 16px 32px
  nav-link:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label}"
    padding: 6px 12px
  nav-link-hover:
    textColor: "{colors.ink}"

  eyebrow:
    textColor: "{colors.ink-muted}"
    typography: "{typography.eyebrow}"
    padding: 0px
---

# Magnific Design System

## Overview

Magnific is an AI image upscaler that dresses its marketing site like a volcanic event: near-black stage (`{colors.background}`), enormous display type that bleeds off-screen, and a singular hot-pink signal (`{colors.primary}`) that crackles through the darkness the way magma runs through stone. The 403 error page — itself showing a dramatic lava-flow photograph with glowing magenta seams — is not an anomaly; it is the brand. Magnific does not soften the pitch with pastels or friendly gradients. It leads with raw visual power: extreme scale, extreme contrast, and output imagery that speaks for itself.

The type system is built around ESKlarheit Plakat, a high-impact condensed grotesque with a compressed aspect ratio that allows headlines to run at 160px (`{typography.display-hero}`) with extremely tight tracking (-4px at hero scale, -2px at display scale) and a lineHeight below 1.0. At these proportions the headline becomes almost a graphic element — letters stacked tall and dense, functioning more like a woodblock poster than a paragraph. Geist (`{typography.body}`) handles all body and UI copy: clean, neutral, slightly techy, at home in a tool product. The pairing is calculated: the expressive Klarheit shouts the brand's confidence; Geist keeps the interface legible and precise.

The brand accent strategy is all-or-nothing. `{colors.primary}` — a hot-pink `#ff58ae` — is the only chromatic color in the system and it earns its intensity by appearing almost nowhere. It punctuates CTAs, link hovers, and the occasional highlight. On the 403 page it appears as glowing lava-seam lines through a volcanic landscape; on the product pages it is the "Upscale" button. Everything else is a ladder of near-blacks, near-whites, and mid-grays. The result is a design that feels cinematic and technical in equal measure: not pretty, not loud — powerful.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) treated as a deep-space or volcanic backdrop, not a neutral surface
- ESKlarheit Plakat (`{typography.display-hero}`) at 160px with -4px tracking and lineHeight 0.85 — type as graphic mass
- Geist (`{typography.body}`) for all UI, body, and navigation — clean and tool-appropriate
- Hot-pink `{colors.primary}` as the sole chromatic signal — reserved for CTAs, key links, and interactive states
- Pill-only button geometry (`{rounded.pill}`) with uppercase, tracked button labels
- Before/after imagery of upscaled photos is the primary content format — the outputs sell the product
- Dramatic photographic backgrounds (lava, volcanic landscapes, high-contrast stills) used at full bleed
- A compact, fast spacing scale for UI (`{spacing.xs}`–`{spacing.lg}`) with generous vertical section rhythm (`{spacing.5xl}`)
- Motion is subtle: 0.2s ease transitions on buttons (background-color, color only)
- Ghost button with white border and fill-to-near-white hover is the secondary CTA shape

## Colors

### Surface & Canvas
- **Near-Black** (`{colors.background}`): The dominant marketing canvas. Deeper than charcoal, approaching pure black. Acts as a stage that makes imagery and typography appear to glow.
- **Raised Surface** (`{colors.surface}`): Slightly lighter than the canvas — used for cards, panels, input fills.
- **Elevated Surface** (`{colors.surface-raised}`): Hovered tile states, dropdown panels.
- **Overlay** (`{colors.surface-overlay}`): Modal scrims and lightbox backgrounds.

### Ink / Text
- **White** (`{colors.ink}`): Primary text on the dark canvas. High-contrast, no compromise.
- **Gray** (`{colors.ink-secondary}`): Supporting copy, metadata, quiet navigation labels.
- **Muted Gray** (`{colors.ink-muted}`): Captions, disabled states, eyebrow markers.
- **Dark** (`{colors.on-dark}`): The label color when a white ghost button flips on hover.

### Brand Accent
- **Hot-Pink** (`{colors.primary}`): The singular Magnific signal. Every CTA, every interactive link, every live state indicator. Derived from the literal color of magma light through dark rock. Never used as a surface fill on large areas.
- **Deep Pink** (`{colors.primary-hover}`): The hover deepening — same hue, more saturation, less lightness.
- **Magenta Glow** (`{colors.primary-glow}`): Gradient stop for the most dramatic brand moments.
- **Pink Tint** (`{colors.primary-soft}`): Near-black with a barely-there pink undertone for badge backgrounds and active-state fills.

### Borders & Shadow Tints
- **Standard Border** (`{colors.border}`): Hairline dividers between dark surface tiers.
- **Soft Border** (`{colors.border-soft}`): Even subtler, almost invisible seam between background and surface.
- **Soft / Deep Shadow** (`{colors.shadow-soft}`, `{colors.shadow-deep}`): Pure black at low to high opacity — flattened for the spec. Used to lift floating media off the dark canvas.

## Typography

### Font Family
- **Display**: `ESKlarheitPlakatFP` (self-hosted, Extrabold 800 only), fallbacks: `KlarheitInline, GeistInline, Helvetica Neue, Helvetica, Arial, sans-serif`. A compressed, high-impact grotesque. Only used for all display and heading sizes — there is no lighter weight variant in this system.
- **Body / UI**: `Geist` (self-hosted Regular 400, SemiBold 600), fallbacks: `GeistInline, Helvetica Neue, Helvetica, Arial, sans-serif`. Vercel's geometric grotesque — precise, neutral, modern.
- **No variable fonts** detected. Two families, three weights total (800 Klarheit; 400 and 600 Geist).

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 160px / 800 / -4px — the marquee headline, almost typographic sculpture |
| `display` | 80px / 800 / -2px — large section titles, feature callouts |
| `heading` | 48px / 800 / -1px — section headings |
| `heading-sub` | 30px / 800 / -0.5px — card titles, feature subheads |
| `body-large` | 20px / 400 — lead paragraphs below hero |
| `body` | 16px / 400 — standard body copy |
| `body-semibold` | 16px / 600 — emphasized inline copy, link text |
| `button-ui` | 15px / 600 / 0.75px — pill button labels (uppercase tracked) |
| `label` | 14px / 500 — nav links, UI labels |
| `caption` | 13px / 400 — metadata, image attribution |
| `eyebrow` | 12px / 600 / 1.5px — section markers, feature category tags |

### Principles
- **ESKlarheit Plakat is the brand.** At 160px with lineHeight 0.85, the display headline becomes a compositional block, not a sentence. It dominates without competing with the imagery beneath it.
- **Tighten everything above 30px.** Display tracking is deeply negative (-4px at hero); body sits at 0. The system never opens up headlines — tight tracking is the signature.
- **Geist keeps the product honest.** All UI, buttons, navigation, and body copy use Geist: clean, no-nonsense, appropriately technical.
- **Two families, nothing else.** Do not introduce a serif, a mono, or any third family. Klarheit carries drama; Geist carries clarity.

## Layout

### Spacing System
The full scale lives in the `spacing:` token block. Base unit: 8px. The micro-scale (`{spacing.xs}`–`{spacing.md}`) packs UI controls tightly; the macro-scale (`{spacing.4xl}`–`{spacing.5xl}`) gives full-bleed image sections enormous breathing room so the darkness of the canvas can do its atmospheric work.

### Grid & Container
- Full-viewport hero sections — display type and imagery span edge to edge
- Max content width roughly 1280px; centered, with generous lateral padding on desktop
- Before/after comparison sliders are a primary layout pattern — two images with a draggable divider
- Feature sections typically alternate: large text block left, imagery or product demo right

### Whitespace Philosophy
- **Darkness is the spacing.** The near-black canvas acts as infinite vertical rhythm between sections — emptiness here reads as confidence, not oversight.
- **Pack the controls, space the content.** Button internals and nav links are tight; sections and heroes breathe.
- **Imagery defines the texture.** Before/after upscale comparisons and dramatic photographic stills are the visual mass. Whitespace retreats so the images can dominate.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; `{colors.border}` divider only | Most dark-canvas sections, flat cards |
| Subtle (Level 1) | `0 2px 8px` at ~40% black (`{colors.shadow-soft}`) | Resting cards and UI panels |
| Card (Level 2) | `0 4px 24px` at ~50% black | Feature cards, comparison modules |
| Elevated (Level 3) | `0 8px 48px` at ~60% black | Floating product demos |
| Deep (Level 4) | `0 0 80px 20px` (`{colors.shadow-deep}`) | Full-bleed image frames hovering over the canvas |
| Focus Ring | `0 0 0 2px` (`{colors.primary}`) | Keyboard focus on inputs and interactive controls |

**Shadow Philosophy**: Magnific uses shadow to amplify the scene-within-a-scene effect. Floating product UI or comparison images are given wide, deep black shadows (`{colors.shadow-deep}`) so they appear to float above the near-black stage — a subtle but powerful depth cue when background and foreground are this close in value. The hot-pink focus ring (`{colors.primary}`) ensures accessibility doesn't compromise the brand.

## Shapes

The full radius scale lives in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Sharp image frames, dividers |
| `sm` | 4px | Small UI chips, inner containers |
| `md` | 8px | Input fields, small cards |
| `lg` | 12px | Feature cards, larger containers |
| `pill` | 9999px | All buttons — the only interactive shape |

The radius system is nearly binary: everything is either sharp (images, structural elements) or fully rounded (buttons). There is no soft middle — no 24px or 32px card rounding. The sharp imagery + pill-button contrast reinforces the "raw tool, polished CTA" personality.

## Components

The complete component spec lives in the `components:` token block.

### Button variants
- **`button-primary`** — Hot-pink (`{colors.primary}`) pill, white label, uppercase 0.75px tracking. The "Upscale" action, every primary CTA. Deepens to `{colors.primary-hover}` on hover.
- **`button-ghost`** — Transparent fill, white `1px solid` border, white label. The secondary CTA — "Back to Homepage," sign-in, etc. On hover the fill flips to near-white and the label goes dark (`{colors.on-dark}`), a hard inversion.
- **`button-secondary`** — Dark surface fill (`{colors.surface}`) with white label. Used for less prominent actions, option pills.

### Cards
- **`card`** — Dark surface, 12px radius, 24px padding. Holds feature copy, pricing blocks, comparison details.
- **`card-media`** — Dark surface, 12px radius, zero padding. Before/after images bleed to the edge.

### Inputs
- **`input`** — Dark fill, 8px radius, 12px 16px padding. **`input-focus`** swaps the border to hot-pink (`{colors.primary}`) — the sole place pink touches an input.

### Badges / Tags
- **`badge`** — Pink-tinted dark fill (`{colors.primary-soft}`), hot-pink label (`{colors.primary}`), pill radius. Feature category and tier labels.

### Navigation
- **`nav-bar`** — Black bar, white links in Geist 14px. **`nav-link`** gray by default; brightens to full white on hover. The primary CTA (hot-pink pill) persists in the nav across all scroll states.

## Do's and Don'ts

### Do
- Keep the canvas near-black (`{colors.background}`) — the darkness is the atmosphere, not a design decision to reconsider
- Use ESKlarheit Plakat (`{typography.display-hero}`) at maximum scale with aggressive negative tracking (-4px at 160px, -2px at 80px)
- Spend `{colors.primary}` on one primary CTA and one or two link colors — the pink earns its power from scarcity
- Apply `{rounded.pill}` to all buttons without exception — the system has no intermediate-radius buttons
- Use full-bleed before/after comparison imagery as the central proof-of-value format
- Let the near-black canvas breathe with `{spacing.5xl}` vertical section rhythm
- Keep button labels in Geist 15px, 600 weight, 0.75px tracking for that uppercase-adjacent punch
- Apply pink focus ring (`{colors.primary}`) at 2px for keyboard accessibility without breaking the dark aesthetic

### Don't
- Don't wash any large surface with the hot-pink — `{colors.primary}` is a puncture through darkness, not a background
- Don't use a rounded card radius (24px, 32px) — sharp imagery frames and 12px containers are the only shapes between `{rounded.none}` and `{rounded.pill}`
- Don't introduce a third typeface. Klarheit for drama, Geist for clarity — nothing else belongs
- Don't loosen the display tracking — tight negative letterSpacing at large scale is the signature; relaxing it deflates the power
- Don't lighten the canvas to charcoal or dark gray — the near-black depth is non-negotiable
- Don't use conventional drop shadows on the near-black canvas — they vanish; use wide deep-black halos to create elevation
- Don't use pink for any decorative element that isn't interactive or brand-critical — dilution kills the signal
- Don't center-align body paragraphs — long text stays left-aligned; centered copy is reserved for short hero taglines

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <768px | Single column; display type drops from 160px toward 56px; nav collapses; comparison sliders reflow to full-width stacked |
| Tablet | 768–1023px | Two-column feature sections; display type ~80–100px; before/after sliders at full width |
| Desktop | 1024–1679px | Full layout; 160px hero type; alternating text/image feature rows |
| Large | ≥1680px | Wide container; generous horizontal margins; hero type can exceed 160px |

### Touch Targets
- Pill buttons with `10px 28px` padding sit comfortably above 44px touch height
- Comparison sliders need a generously-sized drag handle — minimum 44×44px touch target

### Collapsing Strategy
- **Navigation**: horizontal nav → hamburger/sheet on mobile; hot-pink CTA pill always visible
- **Hero**: display type scales aggressively downward (160px → 56–80px) to prevent overflow; tracking relaxes proportionally
- **Feature rows**: side-by-side text/image → stacked single column
- **Section rhythm**: `{spacing.5xl}` compresses toward `{spacing.3xl}` on mobile

### Image Behavior
- Before/after comparison sliders reflow from fixed-width side-by-side to full-viewport-width stacked on mobile
- Full-bleed photographic backgrounds maintain `object-fit: cover` and recentre on the focal point

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Near-Black (`{colors.background}`)
- Text: White (`{colors.ink}`) on dark canvas
- Secondary text: Mid-Gray (`{colors.ink-secondary}`)
- Brand accent: Hot-Pink (`{colors.primary}`) — one primary CTA and key links
- Border: Dark Hairline (`{colors.border}`)
- Focus ring: Hot-Pink (`{colors.primary}`) at 2px

### Example Component Prompts

- "Create a hero on near-black (`{colors.background}`) with a 160px ESKlarheit Plakat (`{typography.display-hero}`) white headline at letterSpacing -4px and lineHeight 0.85, below it a 16px Geist body line in `{colors.ink-secondary}`, and a hot-pink pill button (`{colors.primary}` fill, `{colors.on-primary}` label, `{typography.button-ui}`, `{rounded.pill}`, 10px 28px padding) left-aligned. Back the section with a full-bleed volcanic or dramatic photographic image."
- "Build the ghost button: transparent fill, `1px solid {colors.ink}` border, white Geist label, `{rounded.pill}` radius, 10px 28px padding; on hover fill to `{colors.link-hover-bg}` and darken the label to `{colors.on-dark}` in 0.2s ease."
- "Render a before/after comparison card: `{colors.surface}` background, `{rounded.lg}` radius, zero padding so the two images bleed to the edge; a draggable divider in `{colors.primary}` at the midpoint."
- "Design an input field: `{colors.surface}` fill, `{colors.ink}` text, `{rounded.md}` radius, 12px 16px padding; on focus add a `1px solid {colors.primary}` border to signal the brand accent."
- "Create a feature badge: `{colors.primary-soft}` fill, `{colors.primary}` label, `{typography.caption}`, `{rounded.pill}`, 4px 10px padding — for tier labels and feature category tags."
- "Build a feature section: near-black canvas (`{colors.background}`), a 48px ESKlarheit heading (`{typography.heading}`) in white left-aligned, a 20px Geist lead paragraph (`{typography.body-large}`) in `{colors.ink-secondary}`, a hot-pink pill CTA, and a right-side product screenshot with a wide black shadow `0 8px 48px {colors.shadow-deep}` to float it above the stage."

### Iteration Guide

1. Start on near-black (`{colors.background}`). If you reached for charcoal or a gradient, go darker.
2. Set the hero headline in ESKlarheit Plakat at 160px, weight 800, letterSpacing -4px, lineHeight 0.85. If the tracking feels loose, tighten it.
3. Apply hot-pink (`{colors.primary}`) to exactly one button and one or two link states. No more. If you used pink for decoration, remove it.
4. All buttons are pills (`{rounded.pill}`). No intermediate radius on interactive elements.
5. Keep body and UI in Geist (`{typography.body}`) only. If a third family appeared, remove it.
6. Lift floating product surfaces with deep wide shadows (`{colors.shadow-deep}`) on the dark canvas — conventional shadows vanish.
7. Before/after imagery is the star. Keep card padding 0 (`{components.card-media}`) so images bleed edge to edge.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Magnific. Brand names and trademarks belong to their respective owners.