---
version: alpha
name: Uno
description: Playful fintech energy — a near-black canvas lit by an electric lime-green accent, rounded geometric sans headlines, generously rounded cards and pill CTAs, with confident high-contrast type that makes money management feel light and modern.
colors:
  # Canvas + ink
  background: "#0c0c0e"
  surface: "#16161a"
  surface-soft: "#1f1f24"
  ink: "#ffffff"
  ink-secondary: "#a8a8b3"
  ink-muted: "#6e6e7a"

  # Brand accent — electric lime
  primary: "#c6f432"
  primary-hover: "#b4e21f"
  accent-soft: "#1d2410"

  # Secondary accents
  violet: "#7b61ff"
  coral: "#ff6b5e"
  sky: "#56c2ff"

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

  # Lines + states
  border: "#26262d"
  border-strong: "#34343d"
  success: "#3ddc97"
  badge-bg: "#1d2410"
  badge-text: "#c6f432"

typography:
  display-hero:
    fontFamily: "Poppins, Inter, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Poppins, Inter, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -1.0px
  sub-heading:
    fontFamily: "Poppins, Inter, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.6px
  card-title:
    fontFamily: "Poppins, Inter, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Poppins, Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.2px
  badge:
    fontFamily: "Poppins, Inter, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.4px

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

rounded:
  none: 0px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 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.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}"
  badge:
    backgroundColor: "{colors.badge-bg}"
    textColor: "{colors.badge-text}"
    typography: "{typography.badge}"
    rounded: "{rounded.pill}"
    padding: 6px 12px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px
    borderColor: "{colors.border}"
  card-feature:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 32px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"
---

# Uno Design System

## Overview

Uno's interface treats personal finance as something energetic rather than austere. The canvas is a deep near-black (`{colors.background}`) that lets a single electric lime-green accent (`{colors.primary}`) do the heavy lifting — it appears on the primary CTAs, key numbers, and accent badges, snapping against the dark surface with maximum contrast. This is fintech that wants to feel like a consumer app, not a bank statement: confident, fast, and a little fun.

Type is geometric and friendly. Headlines use a rounded humanist sans (Poppins) at heavy weights with tightened tracking, giving large numbers and value props a punchy, billboard quality, while body copy drops to a more neutral grotesque (Inter) for readability across dense card layouts. The pairing keeps marketing voice and product UI consistent: expressive at display sizes, quiet and legible at reading sizes.

Shape language is soft and generous. Cards round at 24–32px, CTAs are full pills, and inputs round at 12px — nothing in the system has a hard right angle in a prominent position. Depth comes from layered dark surfaces (`{colors.surface}` over `{colors.background}`, `{colors.surface-soft}` for raised feature panels) and hairline borders (`{colors.border}`) rather than heavy shadows, which keeps the dark UI clean and flat.

**Key Characteristics:**
- Deep near-black canvas (`{colors.background}`) with high-contrast white ink
- Single electric lime accent (`{colors.primary}`) reserved for CTAs, key figures, and badges
- Rounded geometric sans (Poppins) headlines paired with Inter body for product clarity
- Generous radii throughout — 24–32px cards, full-pill buttons
- Layered dark surfaces + hairline borders instead of heavy shadows
- Supporting violet / coral / sky accents for category color and illustration

## Colors

### Primary
- **Canvas Black** (`{colors.background}`): Page background, the dark stage for everything.
- **Surface** (`{colors.surface}`): Card and panel fills, one step up from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Raised feature panels and nested cards.
- **Ink** (`{colors.ink}`): Primary white text and headings.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy, captions.
- **Ink Muted** (`{colors.ink-muted}`): Placeholder and disabled text.

### Brand Accent
- **Uno Lime** (`{colors.primary}`): Primary CTAs, hero highlights, key numbers — the brand signature.
- **Lime Hover** (`{colors.primary-hover}`): Pressed/hover state on lime CTAs.
- **Accent Soft** (`{colors.accent-soft}`): Tinted lime-on-dark wash behind badges and highlights.

### Secondary Accents
- **Violet** (`{colors.violet}`): Category color, illustration, secondary highlights.
- **Coral** (`{colors.coral}`): Alerts, playful illustration accents.
- **Sky** (`{colors.sky}`): Informational accents, links.

### Lines & States
- **Border** (`{colors.border}`): Hairline card and divider lines.
- **Border Strong** (`{colors.border-strong}`): Input outlines, secondary button edges.
- **Success** (`{colors.success}`): Positive states, confirmations.
- **Badge Bg / Text** (`{colors.badge-bg}` / `{colors.badge-text}`): Tinted lime pill badges.

## Typography

### Font Family
- **Display / UI**: `Poppins`, with fallbacks `Inter, Arial, sans-serif` — rounded geometric sans for headlines and buttons.
- **Body**: `Inter`, with fallbacks `Arial, sans-serif` — neutral grotesque for reading text and dense 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` | 56px hero headline — billboard value prop |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections, large card headings |
| `card-title` | Feature and product cards |
| `body-large` | Intros, feature descriptions |
| `body` | Standard reading text |
| `body-medium` | Emphasized UI text, nav |
| `button-ui` | Buttons and CTAs |
| `caption` | Metadata, labels |
| `badge` | Pill badges, eyebrow tags |

### Principles
- **Two-family system**: Poppins announces, Inter explains. Display energy stays consistent with marketing voice; body stays neutral for legibility.
- **Tightened display tracking**: Negative letter-spacing (-1.6px at hero) keeps heavy headlines compact and punchy.
- **Weight discipline**: 700 for hero, 600 for headings/UI, 500 for emphasis, 400 for body.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with comfortable jumps to 40px / 64px / 96px for section rhythm.

### Grid & Container
- Max content width: approximately 1200px
- Hero: centered single-column with large headline + lime CTA
- Feature sections: 2–3 column rounded card grids
- Dark sections separated by spacing and hairline borders, not background shifts

### Whitespace Philosophy
- **Breathing dark space**: Generous padding (`{spacing.3xl}`–`{spacing.4xl}`) lets the lime accent pop without crowding.
- **Soft containers**: Rounded cards float on the canvas, separated by border hairlines rather than shadow.
- **Accent restraint**: Lime is used sparingly so it always reads as the action color.

## Components

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

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

### Badges
- **`badge`** — Tinted lime-on-dark pill (`{colors.badge-bg}` / `{colors.badge-text}`), Poppins 12px.

### Cards
- **`card`** — Surface fill, 24px radius, hairline border, 24px padding.
- **`card-feature`** — Raised surface, 32px radius, larger padding for hero feature panels.

### Inputs
- **`input`** — Surface fill, `{colors.border-strong}` outline, 12px radius.

### Navigation
- **`nav-bar`** — Canvas-matched sticky header, Poppins links, lime pill CTA right-aligned.

## Do's and Don'ts

### Do
- Keep the canvas deep near-black and let lime be the single hero accent
- Use full-pill CTAs and generous 24–32px card radii
- Pair Poppins headlines with Inter body
- Build depth with layered dark surfaces + hairline borders
- Reserve lime for actions, key figures, and badges

### Don't
- Don't scatter lime decoratively — it loses its action meaning
- Don't introduce hard right-angle prominent containers
- Don't put white CTA text on the lime fill (use dark `{colors.on-primary}`)
- Don't rely on heavy drop shadows for depth
- Don't drop body copy below Inter for readability

---

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