---
version: alpha
name: Trionn
description: Studio-confident dark portfolio — near-black canvas with an electric lime accent, oversized tight-tracked display headlines, generous whitespace, and pill-rounded interactive chrome that reads playful but disciplined.
colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#141414"
  surface-soft: "#1c1c1c"
  ink: "#f5f5f0"
  ink-secondary: "#a3a39e"
  ink-muted: "#6b6b66"

  # Accent — electric lime
  primary: "#c5ff3a"
  accent-soft: "#9fd62e"
  accent-deep: "#7aa81f"

  # Interactive / borders
  border: "#262626"
  border-strong: "#383838"
  link: "#c5ff3a"
  focus-ring: "#c5ff3a"

  # Neutral scale
  gray-900: "#0a0a0a"
  gray-700: "#262626"
  gray-500: "#6b6b66"
  gray-300: "#a3a39e"
  gray-100: "#f5f5f0"

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

typography:
  display-hero:
    fontFamily: "Space Grotesk, Inter, Arial, sans-serif"
    fontSize: 88px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: -3.52px
  display:
    fontFamily: "Space Grotesk, Inter, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -2.56px
  section-heading:
    fontFamily: "Space Grotesk, Inter, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -1.76px
  card-title:
    fontFamily: "Space Grotesk, Inter, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.84px
  body-large:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: -0.2px
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.65
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Space Grotesk, Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0px
  label-mono:
    fontFamily: "Space Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 1px
  caption:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 32px
  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.accent-soft}"
    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}"
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
    borderColor: "{colors.border}"
  card-project:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 14px 18px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    borderColor: "{colors.focus-ring}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.border}"
---

# Trionn Design System

## Overview

Trionn is a digital product design studio, and its website is a calling card written in the language it sells: confident, dark, and theatrical. The canvas is a deep near-black (`{colors.background}`) that turns the page into a gallery wall, letting work and type glow against it. The single accent — an electric lime (`{colors.primary}`) — does all the talking, used sparingly on CTAs, links, and key labels so it never loses its charge. This is dark design with restraint, not dark design as a gimmick.

The typographic system leans on a geometric-grotesque display face (Space Grotesk, with Inter as the workhorse for reading text). Headlines run enormous — up to 88px — with aggressive negative tracking that compresses them into dense, sculptural blocks. The contrast between these tight oversized headlines and the calm, airy body copy is the studio's core rhythm: shout, then explain. A monospace label face (`{typography.label-mono}`) handles eyebrows, section markers, and metadata, lending an editorial, almost technical-spec quality.

Interactive chrome is uniformly pill-shaped (`{rounded.pill}`) — buttons and tags round all the way, reading playful and friendly against the severe canvas. Cards soften to large 20–32px radii (`{rounded.lg}`/`{rounded.xl}`), floating as discrete dark surfaces (`{colors.surface}`) one step lighter than the page, separated by hairline borders (`{colors.border}`) rather than heavy shadow. Depth here is tonal, not cast.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with warm off-white ink (`{colors.ink}`)
- A single electric-lime accent (`{colors.primary}`) used surgically on CTAs and links
- Oversized grotesque display type with aggressive negative tracking (-3.52px at 88px)
- Monospace eyebrows/labels (`{typography.label-mono}`) for editorial structure
- Fully pill-rounded buttons and badges; large-radius cards
- Tonal depth — surfaces step lighter, separated by hairline borders, minimal shadow
- Generous whitespace and large section rhythm (`{spacing.3xl}`–`{spacing.4xl}`)

## Colors

### Primary
- **Canvas Black** (`{colors.background}`): The page. Deep, near-black, slightly warm.
- **Off-White Ink** (`{colors.ink}`): Primary text and headings — warm white, never pure.
- **Electric Lime** (`{colors.primary}`): The signature accent — CTAs, links, key labels.

### Accent Variants
- **Accent Soft** (`{colors.accent-soft}`): Hover state for lime fills.
- **Accent Deep** (`{colors.accent-deep}`): Pressed / deep accent contexts.

### Surfaces
- **Surface** (`{colors.surface}`): Cards and panels, one step above canvas.
- **Surface Soft** (`{colors.surface-soft}`): Project tiles, nested surfaces.

### Text Scale
- **Ink Secondary** (`{colors.ink-secondary}`): Body and supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, disabled, fine print.

### Lines & Interactive
- **Border** (`{colors.border}`): Hairline card and section dividers.
- **Border Strong** (`{colors.border-strong}`): Inputs, secondary button outlines.
- **Link** (`{colors.link}`): Inline links — the lime accent.
- **Focus Ring** (`{colors.focus-ring}`): Keyboard focus outline.

## Typography

### Font Family
- **Display**: `Space Grotesk`, fallbacks `Inter, Arial, sans-serif`
- **Body**: `Inter`, fallbacks `Arial, sans-serif`
- **Mono labels**: `Space Mono`, fallbacks `ui-monospace, Menlo, monospace`

### Hierarchy

The complete type scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 88px hero — sculptural, max compression |
| `display` | Large section openers |
| `section-heading` | Standard section titles |
| `card-title` | Project / feature card headings |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-small` | Dense UI text |
| `button-ui` | Buttons, nav links |
| `label-mono` | Eyebrows, section markers, metadata |
| `caption` | Captions, tags |

### Principles
- **Shout then explain**: Oversized tight headlines paired with calm, roomy body copy.
- **Negative tracking scales with size**: -3.52px at 88px relaxing toward 0 at body.
- **Mono as structure**: Space Mono uppercase labels give editorial, spec-sheet rhythm.
- **Two weights for display**: 600 for headlines, 500 for card titles — never heavier.

## Layout

### Spacing System
Base unit is 8px. The scale climbs fast into large section gaps (`{spacing.3xl}` 96px, `{spacing.4xl}` 160px) — whitespace is a primary material.

### Grid & Container
- Max content width ~1200px, centered
- Hero: single-column, oversized headline with generous top padding
- Work grid: 2-column project tiles, large gutters
- Sections separated by `{spacing.3xl}`+ vertical rhythm

### Whitespace Philosophy
- **Gallery emptiness**: dark canvas plus large gaps frame the work like a wall.
- **Tonal separation**: surfaces step lighter; hairline borders, not heavy shadow.
- **Accent discipline**: lime appears rarely so it always reads as "act here."

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 8px | Small chips, inline elements |
| `md` | 12px | Inputs, small panels |
| `lg` | 20px | Cards |
| `xl` | 32px | Project tiles, large media |
| `pill` | 9999px | Buttons, badges, tags |

## Components

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

### Buttons
- **`button-primary`** — Lime fill, black text, full pill. The default CTA.
- **`button-secondary`** — Dark surface with `{colors.border-strong}` outline, pill.
- **`button-ghost`** — Canvas-colored, hairline border, pill.

### Badges
- **`badge`** — Dark soft surface, lime mono text, pill. Tags and status markers.

### Cards
- **`card`** — Surface one step above canvas, 20px radius, hairline border.
- **`card-project`** — Larger 32px radius project tiles on soft surface.

### Inputs
- **`input`** — Dark surface, strong-border resting state; focus swaps border to lime.

### Navigation
- **`nav-bar`** — Canvas-colored, hairline bottom border, mono/grotesk links, lime pill CTA.

## Do's and Don'ts

### Do
- Keep the canvas near-black and the ink warm off-white — never pure black/white pairings
- Reserve lime (`{colors.primary}`) for CTAs, links, and one or two key labels per view
- Use oversized grotesque headlines with aggressive negative tracking
- Use mono uppercase labels for eyebrows and metadata
- Pill-round all buttons and badges; large-radius the cards
- Separate surfaces tonally with hairline borders, not heavy shadow

### Don't
- Don't flood the page with lime — it loses its charge instantly
- Don't put dark ink on the dark canvas; off-white ink only for reading
- Don't use sharp 0px corners on interactive chrome
- Don't add loud drop shadows — depth is tonal here
- Don't crowd sections; the large whitespace is the design

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, stacked nav |
| Tablet | 600–1024px | 2-column work grid begins, expanded padding |
| Desktop | 1024–1400px | Full layout, max content width |
| Large | >1400px | Centered, generous side margins |

### Collapsing Strategy
- Hero: 88px → scales down proportionally, keeps negative tracking
- Navigation: inline links + CTA → hamburger menu
- Work grid: 2-column → single column
- Section spacing: 96–160px → ~64px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Canvas Black `{colors.background}`
- Heading/body ink: Off-White `{colors.ink}` / `{colors.ink-secondary}`
- Primary CTA: Electric Lime `{colors.primary}` with black text `{colors.on-primary}`
- Borders: hairline `{colors.border}`
- Link / focus: Lime `{colors.primary}`

### Example Component Prompts
- "Hero on near-black `{colors.background}`. Headline 88px Space Grotesk weight 600, line-height 1.0, letter-spacing -3.52px, color `{colors.ink}`. Mono eyebrow above in `{colors.primary}` uppercase. Lime pill CTA `{colors.primary}` with black text, 14px 28px padding, full pill radius."
- "Project card: surface `{colors.surface}`, 20px radius, hairline border `{colors.border}`, 32px padding. Title 28px Space Grotesk weight 500, body 17px Inter `{colors.ink-secondary}`."
- "Pill badge: `{colors.surface-soft}` background, lime `{colors.primary}` Space Mono text, full pill, 4px 12px padding."

### Iteration Guide
1. Lime is a scalpel, not a paint roller — one or two uses per view
2. Negative tracking scales with size: -3.52px at 88px toward 0 at body
3. Surfaces step lighter from the canvas; borders are hairlines, shadow is minimal
4. Pill everything interactive; large-radius the cards; nothing sharp

---

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