---
version: alpha
name: Up Digital
description: Playful dark-mode studio energy — near-black canvas, electric lime accent, and oversized expressive display type. Interactive flip cards, drag-to-explore portfolio rails, and arrow-marked CTAs give it a tactile, motion-forward personality.

colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#141414"
  surface-soft: "#1c1c1c"
  ink: "#f5f5f5"
  ink-secondary: "#a3a3a3"
  ink-muted: "#737373"

  # Accent — electric lime
  primary: "#c4f82a"
  primary-soft: "#1f2410"      # lime flattened low over dark canvas
  primary-hover: "#d2ff4d"

  # Interactive
  link: "#c4f82a"
  focus-ring: "#c4f82a"
  border: "#2a2a2a"
  border-strong: "#3d3d3d"

  # On-color
  on-primary: "#0a0a0a"
  on-ink: "#0a0a0a"

  # Neutral scale
  gray-100: "#ededed"
  gray-300: "#a3a3a3"
  gray-500: "#737373"
  gray-700: "#404040"
  gray-900: "#171717"

typography:
  display-hero:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: -2.16px
  display:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.68px
  section-heading:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -1.2px
  card-title:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.72px
  body-large:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: 0px
  label:
    fontFamily: "Space Grotesk, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0.5px
  caption:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 120px

rounded:
  none: 0px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border-strong}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  card-flip:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border-strong}"
  card-portfolio:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 0px
    borderColor: "{colors.border}"
  badge:
    backgroundColor: "{colors.primary-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.focus-ring}"
---

# Up Digital Design System

## Overview

Up Digital presents itself as a creative digital studio, and the design system performs that brief loudly. The canvas is near-black (`{colors.background}`), letting one electric lime accent (`{colors.primary}`) do nearly all the chromatic work — on CTAs, the logo mark, hover states, and small status labels. It is confident, contemporary studio energy: dark mode as default, not as a toggle.

Type carries the personality. Display headlines run oversized (up to 72px) in a geometric grotesk with tight negative tracking, giving the marketing copy a poster-like presence, while body copy drops to a neutral humanist sans for readability against the dark surface. The contrast between expressive heads and quiet body is the typographic engine of the brand.

The interaction layer is where Up Digital differentiates from generic dark portfolios. Service cards flip on hover to reveal what the studio does, the portfolio is a horizontal drag-to-explore rail, and CTAs are marked with directional arrows ("View project →", "See Your Future →"). Motion is treated as a first-class material, so the static tokens here are deliberately tactile: rounded surfaces, pill buttons, and a layered surface scale (`{colors.surface}` → `{colors.surface-soft}`) that supports card-flip front/back states.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with a single electric lime accent (`{colors.primary}`)
- Oversized geometric-grotesk display type with tight negative tracking (-2.16px at 72px)
- Humanist sans body copy for calm readability on dark
- Interactive flip cards and drag-to-explore portfolio rails — motion as material
- Pill-shaped CTAs with directional arrow affordances
- Layered dark surface scale for card front/back and elevation
- Lime used functionally (action, focus, status), never as background wash

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Near-black page canvas. The default surface for the entire site.
- **Surface** (`{colors.surface}`): Card and panel fill, one step up from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Flip-card backs and elevated panels.
- **Ink** (`{colors.ink}`): Primary text — off-white, never pure white, to soften glare on dark.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled text.

### Accent
- **Lime** (`{colors.primary}`): The single brand accent — CTAs, logo mark, links, status. Electric and high-energy.
- **Lime Hover** (`{colors.primary-hover}`): Brighter lime for hover states.
- **Lime Soft** (`{colors.primary-soft}`): Lime flattened low over the dark canvas — badge and tag backgrounds.

### Interactive & Structure
- **Link** (`{colors.link}`): Lime links, often paired with an arrow.
- **Focus Ring** (`{colors.focus-ring}`): Lime keyboard focus indicator.
- **Border** (`{colors.border}`): Subtle card and divider outlines.
- **Border Strong** (`{colors.border-strong}`): Higher-contrast outlines on inputs and secondary buttons.

### On-Color
- **On Primary** (`{colors.on-primary}`): Near-black text on lime fills — the only readable pairing for the bright accent.

## Typography

### Font Family
- **Display / UI**: `Space Grotesk` with fallbacks `Arial, sans-serif` — geometric grotesk for headlines, buttons, and labels.
- **Body**: `Inter` with fallbacks `Arial, sans-serif` — humanist sans for reading text.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 72px hero — poster-scale headline |
| `display` | 56px secondary hero |
| `section-heading` | Feature section titles |
| `card-title` | Service / portfolio card headings |
| `body-large` | Intros, lead copy |
| `body` | Standard reading text |
| `body-medium` | Emphasized inline text, nav |
| `button-ui` | Buttons, CTAs |
| `label` | Uppercase-ish small labels, eyebrows |
| `caption` | Metadata, fine print |

### Principles
- **Expressive heads, quiet body**: Space Grotesk display sizes carry brand voice; Inter body keeps long copy legible on dark.
- **Tight display tracking**: Negative letter-spacing scales with size (-2.16px at 72px) for compressed, poster-like headlines.
- **Two-family discipline**: One grotesk, one humanist sans — no third family.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px, with large jumps (`{spacing.3xl}`, `{spacing.4xl}`) for generous section breathing room around expressive headlines.

### Grid & Container
- Centered content column with comfortable max width
- Service cards in a responsive multi-column grid that flips on hover
- Portfolio as a full-bleed horizontal drag rail rather than a wrapped grid
- Generous vertical padding between sections to let oversized type breathe

### Whitespace Philosophy
- **Dark negative space**: The near-black canvas functions as breathing room — emptiness reads as intentional, not bare.
- **Accent restraint**: Lime appears sparingly so it always signals action or status.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | Background canvas | Page surface, text blocks |
| Surface | `{colors.surface}` fill + `{colors.border}` outline | Cards, panels |
| Raised | `{colors.surface-soft}` fill + `{colors.border-strong}` | Flip-card backs, hover states |
| Focus | `{colors.focus-ring}` lime outline | Keyboard focus on interactive elements |

Depth comes from surface-tint stepping and outline contrast rather than heavy shadows — shadows read weakly on a near-black canvas, so the system leans on layered grays and the lime accent for emphasis.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved / full-bleed media |
| `sm` | 8px | Inputs, small containers |
| `md` | 12px | Portfolio media cards |
| `lg` | 16px | Service / content cards |
| `xl` | 24px | Large panels |
| `pill` | 9999px | Buttons, badges, tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card-flip}`).

### Buttons
- **`button-primary`** — Lime fill, near-black text, pill radius. The primary CTA, usually arrow-marked.
- **`button-secondary`** — Dark surface fill with a strong border, lime reserved for hover/focus.

### Cards
- **`card`** — Surface fill, subtle border, `{rounded.lg}`. Standard content card.
- **`card-flip`** — Surface-soft fill for the reveal/back face of hover-flip service cards.
- **`card-portfolio`** — Zero-padding media card for the drag-to-explore portfolio rail.

### Badges & Labels
- **`badge`** — Lime-soft background with lime text, pill radius, for status/category tags.

### Inputs
- **`input`** — Dark surface, strong border, `{rounded.sm}`. Focus swaps the border to lime.

### Navigation
- **`nav-bar`** — Dark sticky header, Space Grotesk links, lime CTA right-aligned.

### Distinctive Components
- **Flip Service Cards**: Hover reveals a back face ("Hover any card to see what we do") using the surface-soft fill.
- **Drag Portfolio Rail**: Horizontal drag-to-explore strip of portfolio media cards.
- **Arrow CTAs**: Directional arrows on links and buttons ("View project →", "See Your Future →").

## Do's and Don'ts

### Do
- Keep the canvas near-black and reserve lime for action, focus, and status
- Use Space Grotesk at large sizes with tight negative tracking for headlines
- Step surfaces (`{colors.surface}` → `{colors.surface-soft}`) for elevation, not heavy shadows
- Pair lime fills only with near-black text (`{colors.on-primary}`)
- Lean into motion — flip, drag, arrow affordances — as part of the brand

### Don't
- Don't use lime as a full background wash — it loses its signal
- Don't put white or light text on lime fills (fails contrast)
- Don't introduce a third font family
- Don't use pure white (`#ffffff`) for body text — off-white softens glare
- Don't rely on drop shadows for depth on the dark canvas

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked cards, hero type scales down |
| Tablet | 600–1024px | 2-column service grid, portfolio remains a drag rail |
| Desktop | 1024–1400px | Full multi-column grid, oversized hero type |
| Large | >1400px | Centered, generous side margins |

### Touch Targets
- Pill buttons keep comfortable 14px vertical padding
- Flip-card hover becomes tap-to-reveal on touch devices
- Portfolio drag rail uses native touch scroll

### Collapsing Strategy
- Hero: 72px display scales down proportionally, tracking maintained
- Service grid: multi-column → 2-column → single column
- Portfolio rail: stays horizontal-scroll across breakpoints
- Navigation: links → hamburger menu on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Lime `{colors.primary}` with near-black text `{colors.on-primary}`
- Background: Near-black `{colors.background}`
- Heading text: Off-white `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Border: `{colors.border}`
- Focus ring: Lime `{colors.focus-ring}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline 72px Space Grotesk weight 700, line-height 1.00, letter-spacing -2.16px, `{colors.ink}`. Lime pill CTA (`{colors.primary}` fill, `{colors.on-primary}` text, 9999px radius, 14px 28px padding) with a trailing arrow."
- "Build a flip service card: front face `{colors.surface}` fill, `{colors.border}` outline, 16px radius; back face `{colors.surface-soft}` reveal on hover. Title 24px Space Grotesk weight 600, body 16px Inter `{colors.ink-secondary}`."
- "Make a status badge: `{colors.primary-soft}` background, `{colors.primary}` text, pill radius, 13px Space Grotesk weight 500."

### Iteration Guide
1. Near-black canvas first, lime accent applied only to action/focus/status
2. Two families only — Space Grotesk for display/UI, Inter for body
3. Negative tracking scales with display size
4. Surface-tint stepping for depth, not shadows
5. Lime fills always pair with near-black text

---

## 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 Up Digital. Brand names and trademarks belong to their respective owners.