Brand Guidelines

Yuiva Design System

Yuiva's visual identity uses the Catppuccin Macchiato palette — warm and precise. Pink as the primary brand color, blue as secondary, teal as accent. Headings in Plus Jakarta Sans, body in Inter.

ℹ This page is the source of truth for all brand decisions for contributors and developers. The Figma file is the canonical design reference.

Logo

The logomark is a rounded square with a pink-to-blue gradient. The wordmark uses Plus Jakarta Sans Medium with tight tracking.

Yuiva

Primary — Dark Background

Yuiva

Light Background

⚠ Never stretch, recolor, or modify the gradient on the logomark. Maintain clear space equal to the mark's height on all sides.

Color System

Based on Catppuccin Macchiato. All values are defined in theme.css under the .dark block. Never use hard-coded hex values in components — always reference the CSS variables.

Backgrounds

Background

--color-background

#24273a

Card / Surface

--color-card

#363a4f → hover #42465e

Sidebar

--color-sidebar

#1e2030 → hover #252837

Brand Accent Colors

Primary — Pink

--color-primary

#f5bde6 → hover #f8d2ec

Secondary — Blue

--color-secondary

#8aadf4 → hover #a5c0f8

Accent — Teal

--color-accent

#8bd5ca → hover #a3e0d4

Brand Gradient

--gradient-brand

Pink → Blue → Teal · 135°

Text Gradient

--gradient-brand-text

Pink → Mauve → Blue · 90°

AI Agent & Human User Colors

These colors distinguish AI-generated content from human interactions across the product.

AI Agent — Mauve

--color-ai

#c6a0f6 → hover #d4b5f9

Human User — Rosewater

--color-human

#f4dbd6 → hover #f7e5e1

Text

Primary Text

--color-text-primary

#cad3f5

Secondary Text

--color-text-secondary

#a5adcb

Dark (on light bg)

--color-text-dark

#181926

System / Status

Success — Green

--color-success

#a6da95 → hover #b8e3a8

Warning — Yellow

--color-warning

#eed49f

Destructive — Red

--color-destructive

#ed8796 → hover #f19faa

Typography

Two typefaces. Plus Jakarta Sans for all headings (h1–h4). Inter for body, labels, buttons, and inputs. JetBrains Mono for code and technical identifiers.

h1 — Plus Jakarta Sans, Medium (500), 36px

Build something worth connecting for.

h2 — Plus Jakarta Sans, Medium (500), 30px

Connections made by intelligence

h3 — Plus Jakarta Sans, Medium (500), 24px

Brand Design System

h4 — Plus Jakarta Sans, Medium (500), 20px

Color System · Typography · Spacing

p — Inter, Regular (400), 16px, 1.6 line-height

Yuiva uses server-side AI agents to match users — no swiping, no browsing, no algorithms optimising for engagement.

label — Inter, Medium (500), 14px, 1.5 line-height

Display name

button — Inter, Medium (500), 16px

Get started

Mono — JetBrains Mono, Regular (400)

POST /auth/login → { "access_token": "eyJ..." }

Spacing

Based on a 4px base unit. Use these tokens — do not use arbitrary pixel values.

--spacing-1 · 4pxTight gap, icon padding

--spacing-2 · 8pxInline gap, small padding

--spacing-3 · 12pxComponent inner padding

--spacing-4 · 16pxDefault padding

--spacing-6 · 24pxCard padding, section gap

--spacing-8 · 32pxComponent separation

--spacing-12 · 48pxSection padding

--spacing-16 · 64pxPage sections

--spacing-24 · 96pxHero, large sections

Radius & Shadows

Consistent corner radius from theme.css.

--radius-sm
6px

--radius-md
10px

--radius-lg
14px

--radius-xl
20px

full

--radius-full
9999px

Glow Shadows

--shadow-glow-primary

--shadow-glow-ai

--shadow-glow-human

Buttons

Three variants. Border radius is --radius-md (10px). Font is Inter Medium 16px.

Primary uses --color-primary (#f5bde6) with --color-primary-foreground (#181926) text. Hover adds --shadow-glow-primary.

Tags & Chips

Used for labels, statuses, and categorisation. Always uppercase, 0.7rem, pill radius.

✦ Primary Secondary Accent 🤖 AI Agent 👤 Human 🔒 Confidential Coming soon

Cards

The primary container primitive. Border radius --radius-lg (14px), background --color-card, hover shifts to --color-card-hover. Cards are selectable — click to toggle selected state, click again to deselect.

📡

WebSocket Hub

Manages real-time connections for messaging, presence, and match events.

🤖

AI Matchmaker

Server-side agent that autonomously evaluates and creates user pairings.

🗃️

Profile Store

PostgreSQL tables for user identity, preferences, and match history.

⚡

Redis Cache

Session tokens, rate limiting, and ephemeral pub/sub for live events.

Selected state uses --color-primary border with a subtle pink glow. Unselected on click removes the highlight.

Form Elements

Background is --color-input-background (#363a4f). Focus ring uses --color-ring (#f5bde6). Border radius --radius-sm (6px).

Display name

Bio

Do & Don't

Core rules for maintaining brand consistency.

✓ Do

Use --color-* variables from theme.css

Use Plus Jakarta Sans for headings

Maintain 4px spacing grid

Keep #24273a as the page background

Apply glow shadows on brand-colored elements

✗ Don't

Hard-code hex values in components

Use Inter for headings or display text

Change the brand accent order (pink is primary)

Swap AI Mauve and Human Rosewater colors

Use light backgrounds unless explicitly needed

theme.css

The complete design token file exported from Figma. This is the single source of truth for all colors, typography, spacing, radius, and shadow values. Import this file in your project before any other styles.

theme.css

CSS · Yuiva Design Tokens

@custom-variant dark (&:is(.dark *));

:root {
  /* ===== TYPOGRAPHY ===== */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ===== COLORS (light mode) ===== */
  --color-background: #eff1f5;
  --color-foreground: #4c4f69;
  --color-card: #e6e9ef;
  --color-card-foreground: #4c4f69;
  --color-popover: #dce0e8;
  --color-popover-foreground: #4c4f69;
  --color-sidebar: #e6e9ef;
  --color-sidebar-foreground: #4c4f69;
  --color-primary: #ea76cb;
  --color-primary-foreground: #eff1f5;
  --color-secondary: #179299;
  --color-secondary-foreground: #eff1f5;
  --color-accent: #dd7878;
  --color-accent-foreground: #eff1f5;
  --color-muted: #ccd0da;
  --color-muted-foreground: #5c5f77;
  --color-destructive: #d20f39;
  --color-destructive-foreground: #eff1f5;
  --color-border: #9ca0b0;
  --color-input: transparent;
  --color-input-background: #e6e9ef;
  --color-ring: #ea76cb;

  /* ===== BORDER RADIUS ===== */
  --radius: 0.625rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  /* ===== SPACING ===== */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;
}

.dark {
  /* ===== BACKGROUNDS ===== */
  --color-background: #24273a;
  --color-background-hover: #2d3143;
  --color-foreground: #cad3f5;

  /* ===== SURFACES ===== */
  --color-card: #363a4f;
  --color-card-hover: #42465e;
  --color-card-foreground: #cad3f5;
  --color-popover: #363a4f;
  --color-popover-foreground: #cad3f5;
  --color-sidebar: #1e2030;
  --color-sidebar-hover: #252837;
  --color-sidebar-foreground: #cad3f5;

  /* ===== BRAND COLORS ===== */
  --color-primary: #f5bde6;           /* Pink — primary */
  --color-primary-foreground: #181926;
  --color-primary-hover: #f8d2ec;
  --color-secondary: #8aadf4;         /* Blue — secondary */
  --color-secondary-foreground: #181926;
  --color-secondary-hover: #a5c0f8;
  --color-accent: #8bd5ca;            /* Teal — accent */
  --color-accent-foreground: #181926;
  --color-accent-hover: #a3e0d4;

  /* ===== AI / HUMAN DISTINCTION ===== */
  --color-ai: #c6a0f6;                /* Mauve — AI agents */
  --color-ai-foreground: #181926;
  --color-ai-hover: #d4b5f9;
  --color-human: #f4dbd6;             /* Rosewater — human users */
  --color-human-foreground: #181926;
  --color-human-hover: #f7e5e1;

  /* ===== SYSTEM ===== */
  --color-muted: #5b6078;
  --color-muted-foreground: #a5adcb;
  --color-success: #a6da95;
  --color-success-foreground: #181926;
  --color-success-hover: #b8e3a8;
  --color-destructive: #ed8796;
  --color-destructive-foreground: #181926;
  --color-destructive-hover: #f19faa;
  --color-warning: #eed49f;

  /* ===== TEXT ===== */
  --color-text-primary: #cad3f5;
  --color-text-secondary: #a5adcb;
  --color-text-dark: #181926;
  --color-text-success: #a6da95;
  --color-text-failed: #ed8796;
  --color-text-warning: #eed49f;
  --color-text-human: #f4dbd6;
  --color-text-ai: #c6a0f6;
  --color-text-brand-primary: #f5bde6;
  --color-text-brand-secondary: #8aadf4;
  --color-text-brand-accented: #8bd5ca;

  /* ===== UI ELEMENTS ===== */
  --color-border: #5b6078;
  --color-input: #363a4f;
  --color-input-background: #363a4f;
  --color-ring: #f5bde6;

  /* ===== SHADOWS ===== */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --shadow-glow-primary: 0 0 20px rgba(245, 189, 230, 0.3);
  --shadow-glow-ai: 0 0 20px rgba(198, 160, 246, 0.3);
  --shadow-glow-human: 0 0 20px rgba(244, 219, 214, 0.3);

  /* ===== GRADIENTS ===== */
  --gradient-brand: linear-gradient(135deg, #f5bde6 0%, #8aadf4 50%, #8bd5ca 100%);
  --gradient-brand-text: linear-gradient(90deg, #f5bde6 0%, #c6a0f6 50%, #8aadf4 100%);
}

@layer base {
  * { @apply border-border outline-ring/50; }

  body {
    @apply bg-background text-foreground;
    font-family: 'Inter', sans-serif;
  }

  h1, h2, h3, h4 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    line-height: 1.3;
  }

  p     { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.6; }
  label { font-family: 'Inter', sans-serif; font-size: 0.875rem; font-weight: 500; line-height: 1.5; }
  button { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.5; }
  input, textarea, select { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5; }
}

Figma File

The Figma file is the canonical design reference. Request access to collaborate.

🎨

Yuiva · Brand Design Guideline

figma.com/design/2ySP73gQCCnbxn2VSIjKXh

Open in Figma →