---
name: Premium Print Collective
colors:
  surface: '#121414'
  surface-dim: '#121414'
  surface-bright: '#37393a'
  surface-container-lowest: '#0c0f0f'
  surface-container-low: '#1a1c1c'
  surface-container: '#1e2020'
  surface-container-high: '#282a2b'
  surface-container-highest: '#333535'
  on-surface: '#e2e2e2'
  on-surface-variant: '#d0c5af'
  inverse-surface: '#e2e2e2'
  inverse-on-surface: '#2f3131'
  outline: '#99907c'
  outline-variant: '#4d4635'
  surface-tint: '#e9c349'
  primary: '#f2ca50'
  on-primary: '#3c2f00'
  primary-container: '#d4af37'
  on-primary-container: '#554300'
  inverse-primary: '#735c00'
  secondary: '#c9c6c5'
  on-secondary: '#313030'
  secondary-container: '#4a4949'
  on-secondary-container: '#bab8b7'
  tertiary: '#cfcece'
  on-tertiary: '#2f3131'
  tertiary-container: '#b3b3b3'
  on-tertiary-container: '#444546'
  error: '#ffb4ab'
  on-error: '#690005'
  error-container: '#93000a'
  on-error-container: '#ffdad6'
  primary-fixed: '#ffe088'
  primary-fixed-dim: '#e9c349'
  on-primary-fixed: '#241a00'
  on-primary-fixed-variant: '#574500'
  secondary-fixed: '#e5e2e1'
  secondary-fixed-dim: '#c9c6c5'
  on-secondary-fixed: '#1c1b1b'
  on-secondary-fixed-variant: '#474646'
  tertiary-fixed: '#e3e2e2'
  tertiary-fixed-dim: '#c6c6c6'
  on-tertiary-fixed: '#1a1c1c'
  on-tertiary-fixed-variant: '#464747'
  background: '#121414'
  on-background: '#e2e2e2'
  surface-variant: '#333535'
typography:
  display-lg:
    fontFamily: Playfair Display
    fontSize: 64px
    fontWeight: '700'
    lineHeight: '1.1'
    letterSpacing: -0.02em
  display-lg-mobile:
    fontFamily: Playfair Display
    fontSize: 40px
    fontWeight: '700'
    lineHeight: '1.2'
    letterSpacing: -0.01em
  headline-xl:
    fontFamily: Playfair Display
    fontSize: 48px
    fontWeight: '600'
    lineHeight: '1.2'
  headline-lg:
    fontFamily: Playfair Display
    fontSize: 32px
    fontWeight: '600'
    lineHeight: '1.3'
  headline-md:
    fontFamily: Playfair Display
    fontSize: 24px
    fontWeight: '500'
    lineHeight: '1.4'
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.6'
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '500'
    lineHeight: '1.2'
    letterSpacing: 0.05em
  label-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '600'
    lineHeight: '1.2'
    letterSpacing: 0.03em
rounded:
  sm: 0.125rem
  DEFAULT: 0.25rem
  md: 0.375rem
  lg: 0.5rem
  xl: 0.75rem
  full: 9999px
spacing:
  base: 8px
  container-max: 1440px
  gutter: 24px
  margin-mobile: 16px
  margin-desktop: 64px
  stack-xs: 4px
  stack-sm: 12px
  stack-md: 24px
  stack-lg: 48px
  stack-xl: 80px
---

## Brand & Style

The brand personality is rooted in the intersection of traditional craftsmanship and cutting-edge technology. It targets high-end B2B agencies and discerning B2C consumers who value tactile quality and digital precision. The emotional response is one of **exclusivity, reliability, and technical mastery.**

The design style is a hybrid of **Modern SaaS and High-End Editorial.** It adopts the structural logic of a high-performance tool like Stripe, the aesthetic restraint of Apple, and the material richness of luxury print houses. This is achieved through generous whitespace, high-contrast typography, and digital "materials"—utilizing glassmorphism and subtle metallic accents to mirror physical print finishes like foil and vellum.

## Colors

The palette is designed to evoke the materials of the printing trade. **Deep Obsidian** serves as the foundation for the dark mode, providing a "void" that makes Gold accents feel more luminous. **Pure White** is the primary canvas for the light mode, emphasizing a clean, clinical perfection.

- **Primary (Gold):** Used sparingly for high-intent actions, premium status indicators, and critical brand moments.
- **Secondary (Obsidian):** The structural core for Dark Mode and primary text color for Light Mode.
- **Tertiary (Metallic Silver):** Used for subtle borders, secondary iconography, and auxiliary text.
- **Surface Tints:** In dark mode, surfaces use a 4% to 8% opacity shift from the background to create depth without losing the "obsidian" feel.

## Typography

This design system utilizes a high-contrast typographic pairing. **Playfair Display** is used for all headlines and display text to signal heritage and luxury. Its high-contrast strokes and elegant serifs require generous leading to remain legible.

**Inter** provides the functional counterbalance. Used for all body copy, inputs, and interface labels, it ensures maximum readability in dense B2B data environments. For small labels and metadata, a slight increase in letter spacing and a medium-to-bold weight is applied to maintain the "premium" feel.

## Layout & Spacing

The layout follows a **Fluid Grid** model with strict maximum widths for content readability. On desktop, a 12-column grid is utilized with substantial outer margins (64px) to emphasize the "luxury of space."

The spacing rhythm is built on an 8px base unit. To achieve the Apple/Stripe aesthetic, vertical "stack" spacing is exaggerated between major sections (80px+) to allow the content to breathe. Gutters remain consistent at 24px to ensure data density remains manageable in B2B dashboard views.

## Elevation & Depth

Visual hierarchy is conveyed through a combination of **Glassmorphism** and **Ambient Shadows.**

1.  **Level 0 (Base):** Deep Obsidian (#0A0A0A) or Pure White (#FFFFFF).
2.  **Level 1 (Cards/Floating Elements):** Subtle 1px borders in Silver (#C0C0C0) at 20% opacity. Shadows are highly diffused, using a 10% black or 5% gold tint, with a 30px-50px blur and 0px spread.
3.  **Level 2 (Modals/Overlays):** These utilize a backdrop-filter (blur: 20px). In Dark Mode, the fill is Obsidian at 70% opacity. In Light Mode, the fill is White at 80% opacity. 

Depth is further emphasized by "Rim Lighting"—a faint, 1px inner stroke on the top edge of dark cards to simulate a physical light source hitting a premium surface.

## Shapes

The shape language is **Soft (0.25rem - 0.75rem)**. While consumer brands often go for pill-shapes, this design system uses smaller radii to maintain a professional, architectural character. 

- **Standard Elements (Buttons, Inputs):** 4px (0.25rem) radius for a sharp, precise look.
- **Containers (Cards, Sections):** 8px (0.5rem) or 12px (0.75rem) to soften the overall interface.
- **Status Badges:** Completely square or minimal 2px radius to differentiate them from interactive buttons.

## Components

### Buttons
- **Primary:** Gold background, Obsidian text. No border. On hover, a subtle inner glow.
- **Secondary:** Transparent background, 1px Silver border, Silver or White text.
- **Ghost:** Text only, with a Gold underline appearing on hover.

### Cards & Data Widgets
Cards use the "Level 1" elevation. For data-heavy widgets, headers use Inter Bold in small-caps with Gold accents. Graphs use Silver-to-Gold gradients to indicate growth.

### Inputs
Fields use a 1px Silver border. On focus, the border transitions to Gold and the shadow depth increases. In Dark Mode, the input background is 2% lighter than the base surface.

### Status Badges
Extremely refined and small. Instead of large color blocks, badges use a "dot + label" system. For example, "Processing" is a pulsating Gold dot next to Silver text.

### Glass Overlays
Used for navigation bars and sidebars. The background blur (20px) ensures that content scrolling underneath remains illegible, maintaining focus on the primary task.