---
name: Safe
description: "The site perfectly exemplifies 'premium utility' by balancing a sterile, technical UI with high-impact visual elements and bold data presentation."
version: alpha

colors:
  background: "#F5F5F5"
  primary: "#1A1A1A"
  secondary: "rgba(26,26,26,0.6)"
  tertiary: "#12FF80"
  neutral: "#999999"
  bg-soft: "#FFFFFF"
  line: "rgba(26,26,26,0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-2px"
  h2:
    fontFamily: sans-serif
    fontSize: 40px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: sans-serif
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 999px

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

---

## Overview

Secure, modular smart wallet infrastructure for onchain assets.

*Industrial-grade vault for digital assets, expressed through a clean, clinical interface.*

## Colors

High-contrast light UI anchored by a neon green accent.

- **Background (`#F5F5F5`)** — uses `bg` token
- **Primary text (`#1A1A1A`)** — uses `ink` token
- **Secondary text (`rgba(26,26,26,0.6)`)** — uses `ink-soft` token
- **Accent (`#12FF80`)** — uses `accent` token
- **Muted (`#999999`)** — uses `muted` token
- **Borders (`rgba(26,26,26,0.1)`)** — uses `line` token

## Typography

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

- Primary font is a geometric sans-serif with tight tracking on large display sizes.
- Text color is almost pure black (#1A1A1A) against light backgrounds.
- Secondary text uses reduced opacity for visual hierarchy.

## Layout

Centered content with a maximum width, transitioning to full-width dark sections.

*Rhythm:* Generous vertical padding and consistent 4px grid-based spacing.

## Elevation & Depth

- 0px 4px 4px 0px rgba(0,0,0,0.06)
- Borders: Thin 1px borders in subtle black or white for structural separation.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

## Components

- **button:** Pill-shaped primary buttons with bright green background and black text; secondary buttons with thin borders.
- **card:** Minimal cards with subtle shadows or thin borders, often containing complex UI mockups.
- **chip:** Small, rounded labels for network or status indicators.
- **input:** Clean, unbordered or subtly bordered input fields with large padding.
- **hero:** Massive typography centered above a floating app interface mockup.

## Do's and Don'ts

**Don't:**
- Don't use a dark theme for the primary hero section — the screenshot shows a light grey (#F5F5F5) background.
- Don't apply rounded corners to the main buttons — the screenshot shows pill-shaped (fully rounded) buttons.
- Don't use thin, light fonts for headlines — the screenshot shows a heavy, geometric sans-serif for display text.
- Don't use a multi-colored accent palette — the screenshot shows a single dominant neon green (#12FF80) accent.
- Don't use heavy box shadows on cards — the screenshot shows very subtle, almost flat surface depth.
- Don't use wide letter-spacing on headlines — the screenshot shows tight, negative tracking on large display text.

---

## System Prompt (paste into AI agent)

```
This design represents a secure, high-end fintech infrastructure platform (Safe). It uses a clean, light-colored UI (#F5F5F5 background) anchored by a vibrant neon green accent (#12FF80). Typography is a geometric sans-serif, used with tight tracking on large headlines to create a bold, authoritative feel. The layout is centered and spacious, transitioning from a bright hero into deeper, data-rich sections. Key constraints: never use a dark mode for the primary hero, always use the pill-shaped button style, and maintain the high-contrast pairing of black (#1A1A1A) and neon green.
```