---
version: alpha
name: Bruno Cis
description: A loud, candy-bright creative portfolio — near-black Inter Tight headlines over white, splashed with a playful poster palette of lime, magenta, purple, cyan and acid yellow. Soft 5px card corners, 99px pill buttons, generous whitespace, and "anything but skippable" attitude.
colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ffffff"
  surface-soft: "#f5f5f5"
  ink: "#141414"
  ink-muted: "#797979"

  # Playful poster palette — used as accents, fills, blocks
  primary: "#d30ea1"      # hot magenta
  lime: "#d1f448"
  purple: "#9b81d7"
  cyan: "#9bd4d7"
  yellow: "#fafa8c"
  magenta-bright: "#d832f3"
  plum: "#6c1166"
  blue: "#3a98cf"
  gold: "#efc76e"

  # On-color
  on-primary: "#ffffff"
  on-lime: "#141414"
  on-ink: "#ffffff"

  # Borders / hairlines
  border: "#e6e6e6"

typography:
  display-hero:
    fontFamily: "Inter Tight, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Inter Tight, sans-serif"
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -1px
  sub-heading:
    fontFamily: "Inter Tight, sans-serif"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.5px
  card-title:
    fontFamily: "Inter Tight, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.3px
  body-large:
    fontFamily: "Inter Tight, sans-serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter Tight, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter Tight, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter Tight, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Inter Tight, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px

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

rounded:
  none: 0px
  micro: 2px
  sm: 5px
  md: 8px
  pill: 99px
  circle: 9999px

components:
  # Primary pill CTA — magenta
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  # Lime accent button — black text for contrast
  button-accent:
    backgroundColor: "{colors.lime}"
    textColor: "{colors.on-lime}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  # Outline / ghost button
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.ink}"

  # Project / portfolio card with 5px soft corners
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 24px
    borderColor: "{colors.border}"

  # Colored "brag zone" / testimonial block
  card-color:
    backgroundColor: "{colors.purple}"
    textColor: "{colors.ink}"
    typography: "{typography.body-large}"
    rounded: "{rounded.sm}"
    padding: 32px

  # Pill tag / category chip
  badge:
    backgroundColor: "{colors.yellow}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  # Input field
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    borderColor: "{colors.primary}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"
---

# Bruno Cis Design System

## Overview

Bruno Cis's portfolio is a creative-director's calling card built to be, in its own words, "anything but skippable." Where most designer portfolios whisper in monochrome, this one shouts in a candy-bright poster palette. The foundation is restrained — near-black `{colors.ink}` text on a clean white `{colors.background}` canvas, set in the geometric, slightly condensed Inter Tight — but that restraint exists only to make the color pop harder when it lands. Lime, hot magenta, purple, cyan and acid yellow arrive as full-bleed blocks, pill buttons, and testimonial cards, never as timid tints.

The typography does the heavy lifting for personality. Inter Tight at bold weight (700) with tightened negative tracking gives headlines a punchy, billboard-poster compression. Hero copy scales fluidly via `clamp()` so the big statements stay big on every screen. Body copy relaxes to a comfortable 400 weight at a 1.6 line-height, leaning on what the site itself calls "unnecessary blank space" — generous whitespace that frames the work like gallery pieces.

The shape language is friendly and consistent: soft 5px corners on cards and image wrappers (`{rounded.sm}`), and fully-rounded 99px pills (`{rounded.pill}`) on every button and tag. There is no heavy chrome, no drop-shadow theatrics — depth comes from color blocking and spacing rather than borders or elevation. This is a site that trusts bold flat color and confident type to carry the brand.

**Key Characteristics:**
- Inter Tight throughout — bold (700) compressed headlines, relaxed 400 body
- Negative letter-spacing on display sizes for a poster-print feel
- Near-black `{colors.ink}` text on pure white — color is reserved for impact
- A playful multi-hue palette: magenta, lime, purple, cyan, acid yellow
- Pill buttons and tags at 99px radius (`{rounded.pill}`)
- Soft 5px corners (`{rounded.sm}`) on cards and image blocks
- Generous whitespace as a deliberate framing device
- Color blocking over shadows — flat, confident, "skippable" is the enemy

## Colors

### Canvas & Ink
- **White** (`{colors.background}`): Page canvas, card surfaces.
- **Soft Gray** (`{colors.surface-soft}`): Subtle section tint.
- **Near Black** (`{colors.ink}`): Headlines, body text, outline buttons.
- **Muted Gray** (`{colors.ink-muted}`): Secondary captions, metadata.

### Poster Palette
- **Hot Magenta** (`{colors.primary}`): Primary CTA fills, key accents.
- **Lime** (`{colors.lime}`): Accent buttons, highlight blocks (pairs with black text).
- **Purple** (`{colors.purple}`): Testimonial / "brag zone" blocks.
- **Cyan** (`{colors.cyan}`): Soft accent panels.
- **Acid Yellow** (`{colors.yellow}`): Tags, highlight chips.
- **Bright Magenta** (`{colors.magenta-bright}`): Vivid accent / gradient stops.
- **Plum** (`{colors.plum}`): Deep accent for contrast pairings.
- **Blue** (`{colors.blue}`): Cool accent.
- **Gold** (`{colors.gold}`): Warm accent.

### On-Color
- **On Primary** (`{colors.on-primary}`): White text on magenta/dark fills.
- **On Lime** (`{colors.on-lime}`): Black text on light bright fills (lime/yellow/cyan).

## Typography

### Font Family
- **Primary**: `Inter Tight`, with fallback `sans-serif`. Used for everything — headlines, body, UI.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 48px hero — billboard impact, fluid `clamp()` in practice |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections, callouts |
| `card-title` | Project / portfolio card titles |
| `body-large` | Intros, lead paragraphs |
| `body` | Standard reading text |
| `body-small` | Fine print, metadata |
| `button-ui` | Buttons, nav links |
| `caption` | Tags, labels |

### Principles
- **Bold compression for impact**: Headlines run weight 700 with negative tracking — poster typography, not corporate.
- **One family, full range**: Inter Tight carries the whole system; hierarchy comes from weight (400/500/600/700) and size, not font-switching.
- **Breathing body**: Body at 1.6 line-height with surrounding whitespace — readability inside a loud frame.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px; the scale climbs to large `{spacing.2xl}`–`{spacing.3xl}` gaps to deliver the site's deliberate "unnecessary blank space."

### Grid & Container
- Centered single-column hero with large fluid type
- Card-based project grid for portfolio tiles
- Full-bleed color blocks for testimonial / "brag zone" sections
- Mobile nav collapses to a hamburger toggle

### Whitespace Philosophy
- **Space as confidence**: Massive padding between sections lets each loud color block land on its own.
- **Frame the work**: Whitespace isolates portfolio tiles like gallery pieces.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved / full-bleed |
| `micro` | 2px | Tiny inline elements |
| `sm` | 5px | Cards, image wrappers — the signature soft corner |
| `md` | 8px | Slightly larger containers |
| `pill` | 99px | Buttons, tags, chips |
| `circle` | 9999px | Avatars, icon buttons |

## Components

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

### Buttons
- **`button-primary`** — Hot magenta pill, white text. The default CTA.
- **`button-accent`** — Lime pill with black text (contrast-safe on the bright fill).
- **`button-secondary`** — White pill with a 1px black outline.

### Cards
- **`card`** — White, 5px corners, hairline border, generous padding.
- **`card-color`** — Full color block (purple by default) for testimonials / "brag zone" callouts.

### Tags & Badges
- **`badge`** — Acid-yellow pill chip with black text.

### Inputs
- **`input`** — White, 5px corners, hairline border. Focus shifts the border to magenta.

### Navigation
- **`nav-bar`** — White sticky header, Inter Tight 15px weight 600 links, hamburger on mobile.

## Do's and Don'ts

### Do
- Keep text near-black `{colors.ink}` on white — let color be the event, not the baseline
- Use the poster palette as full, confident fills and blocks
- Pair bright light fills (lime, yellow, cyan) with black text for contrast
- Use pill radius (99px) on all buttons and tags
- Use soft 5px corners on cards and images
- Lean on whitespace to frame the work

### Don't
- Don't water the colors down into pastel tints — they're meant to be loud
- Don't put white text on lime/yellow (fails contrast) — use black
- Don't add heavy drop shadows; depth is color and space
- Don't mix in a second font family — Inter Tight does it all
- Don't use positive tracking on bold headlines — keep them tight

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, tighter padding, hamburger nav |
| Tablet | 600–800px | 2-column grids begin |
| Desktop | 800–1200px | Full card grid |
| Large | >1200px | Centered, generous margins |

### Collapsing Strategy
- Hero type scales via `clamp(26px, 3.8vw, 38px)`-style fluid sizing
- Navigation collapses to hamburger below 800px
- Project grid: multi-column → single column
- Section spacing compresses on mobile but stays generous

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Hot Magenta `{colors.primary}` (white text)
- Accent CTA: Lime `{colors.lime}` (black text)
- Background: White `{colors.background}`
- Heading text: Near Black `{colors.ink}`
- Body text: Near Black `{colors.ink}` / muted `{colors.ink-muted}`

### Example Component Prompts
- "Hero on white: headline 48px Inter Tight weight 700, letter-spacing -1.5px, color `{colors.ink}`. Magenta pill CTA (`{colors.primary}`, white text, 99px radius, 14px 28px padding) beside a black-outline ghost pill."
- "Project card: white surface, 5px radius, hairline `{colors.border}`, 24px padding. Title 24px Inter Tight weight 600. Yellow pill tag (`{colors.yellow}`, black text)."
- "Testimonial block: full purple fill (`{colors.purple}`), black text, 5px radius, 32px padding, body 19px Inter Tight."

### Iteration Guide
1. White canvas + near-black type is the constant — color blocks are the variable
2. Bright light fills always pair with black text, dark fills with white
3. Pills (99px) for actions, 5px soft corners for surfaces
4. Bold tight headlines, relaxed airy body
5. Whitespace is a feature — don't crowd the blocks

---

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