---
name: Vividand
description: "This site is a masterclass in restrained, high-end agency design, using bold typography and a minimal dark-mode palette to convey authority and premium positioning."
version: alpha

colors:
  background: "#101010"
  primary: "#FFFDF9"
  secondary: "#6F879C"
  bg-soft: "#1a1a1a"
  line: "rgba(255, 253, 249, 0.2)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 105px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  body:
    fontFamily: geometric-sans
    fontSize: 20px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "-0.2px"

rounded:
  sm: 15px
  md: 15px
  lg: 15px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A premium, dark-mode agency portfolio defined by bold typography and 3D glass accents.

*A high-end architectural studio that builds invisible frameworks.*

## Colors

Deep charcoal grounds the layout, while high-contrast off-white text ensures absolute legibility and premium feel.

- **Background (`#101010`)** — uses `bg` token
- **Primary text (`#FFFDF9`)** — uses `ink` token
- **Secondary text (`#6F879C`)** — uses `ink-soft` token
- **Borders (`rgba(255, 253, 249, 0.2)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans

- Use uppercase for secondary navigation and labels
- Maintain tight tracking for large display text

## Layout

Asymmetric split layout in hero; full-width list with left-aligned text and horizontal separators.

*Rhythm:* Generous vertical spacing (48px-96px) between major sections creates a breathable, cinematic feel.

## Elevation & Depth

- Borders: Minimal, 1px solid lines in low-opacity white are used strictly for horizontal dividers.

## Shapes

- `sm`: 15px
- `md`: 15px
- `lg`: 15px
- `pill`: 999px

## Components

- **button:** Minimalist text links or simple geometric shapes.
- **card:** None visible; information is presented in clean list rows.
- **chip:** None visible.
- **input:** None visible.
- **hero:** Large-scale typography paired with subtle 3D glass render elements on a dark background.

## Do's and Don'ts

**Don't:**
- Don't use bright accent colors — screenshot shows a strictly monochrome palette with muted blue-grey accents.
- Don't use serif fonts for headlines — screenshot shows exclusively geometric sans-serif typography.
- Don't apply heavy drop shadows — screenshot shows flat, clean surfaces without 3D depth shadows.
- Don't center-align all text — screenshot shows strong left-aligned typography for headings.
- Don't use busy background patterns — screenshot shows a solid, deep charcoal background.
- Don't use rounded corners on everything — screenshot shows sharp edges or very specific 15px border radii.

---

## System Prompt (paste into AI agent)

```
A premium agency portfolio for Vivid+Co, characterized by a dark charcoal background (#101010) and high-contrast off-white typography (#FFFDF9). The visual system uses geometric sans-serif fonts to create a bold, modern aesthetic. It features 3D glass-render accents and clean horizontal dividers. Critical constraints: avoid serif fonts, avoid bright accent colors, avoid heavy drop shadows, and maintain generous vertical spacing to preserve the cinematic, premium feel.
```