# Trade Crypto — Style Reference
> Precision on parchment: a financial platform that feels like an architect's blueprint, meticulously detailed on a bright white surface, with interactive elements highlighted in stark, electric blue.
**Theme:** light
Gemini's design system offers a crisp, compact, and confident interface for financial markets. It balances extensive negative space with information-dense cards, punctuated by a vibrant blue accent for interactive elements. The typography is modern and precise, contributing to an atmosphere of focused functionality rather than elaborate decoration, where every element serves a clear purpose.
## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink Black | `#010304` | `--color-ink-black` | Primary text, darker borders, icon fill, active states for ghost buttons |
| Paper White | `#ffffff` | `--color-paper-white` | Page backgrounds, card surfaces, button backgrounds, primary text on dark accents |
| Deep Graphite | `#000000` | `--color-deep-graphite` | Navigation text, strong button backgrounds, bold iconography |
| Steel Gray | `#999a9b` | `--color-steel-gray` | Muted text, subtle borders, secondary labels |
| Light Cloud | `#e6e6e6` | `--color-light-cloud` | Hairline separators, subtle background accents |
| Soft Fog | `#676868` | `--color-soft-fog` | Subheading text, descriptive content |
| Pale Mist | `#808181` | `--color-pale-mist` | Auxiliary text, granular data labels |
| Electric Blue | `#005ff9` | `--color-electric-blue` | Violet text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color |
| Sky Tint | `#c9e0ff` | `--color-sky-tint` | Primary action button background, selected states |
## Tokens — Typography
### Geist — Primary UI font for all textual content, from headings to body text and interactive elements. Its custom nature provides a distinct, clean aesthetic that feels tailored. · `--font-geist`
- **Substitute:** Inter
- **Weights:** 400
- **Sizes:** 9px, 10px, 12px, 14px, 16px, 18px, 22px, 26px, 32px, 42px, 56px
- **Line height:** 1.00
- **Letter spacing:** -0.0500em at 56px, -0.0380em at 42px, -0.0360em at 32px, -0.0290em at 26px, 0.0250em at 9px
- **Role:** Primary UI font for all textual content, from headings to body text and interactive elements. Its custom nature provides a distinct, clean aesthetic that feels tailored.
### Geist — Used for emphasizing key information and interactive labels, providing a subtle boost in visual weight without feeling heavy. It maintains the same crispness as 400 weight for a consistent system. · `--font-geist`
- **Substitute:** Inter Medium
- **Weights:** 500
- **Sizes:** 9px, 10px, 12px, 14px, 16px, 18px, 22px, 26px, 32px, 42px, 56px
- **Line height:** 1.00
- **Letter spacing:** -0.0500em at 56px, -0.0380em at 42px, -0.0360em at 32px, -0.0290em at 26px, 0.0250em at 9px
- **Role:** Used for emphasizing key information and interactive labels, providing a subtle boost in visual weight without feeling heavy. It maintains the same crispness as 400 weight for a consistent system.
### Geist — Reserved for headlines and critical action text, providing a strong visual hierarchy while retaining the modern character of the font. The robust weight signifies importance. · `--font-geist`
- **Substitute:** Inter SemiBold
- **Weights:** 600
- **Sizes:** 9px, 10px, 12px, 14px, 16px, 18px, 22px, 26px, 32px, 42px, 56px
- **Line height:** 1.00
- **Letter spacing:** -0.0500em at 56px, -0.0380em at 42px, -0.0360em at 32px, -0.0290em at 26px, 0.0250em at 9px
- **Role:** Reserved for headlines and critical action text, providing a strong visual hierarchy while retaining the modern character of the font. The robust weight signifies importance.
### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body | 14px | 1.35 | -0.08px | `--text-body` |
| subheading | 18px | 1.33 | -0.04px | `--text-subheading` |
| heading-sm | 22px | 1.16 | -0.04px | `--text-heading-sm` |
| heading | 32px | 1.15 | -0.12px | `--text-heading` |
| display | 56px | 1.07 | -0.2px | `--text-display` |
## Tokens — Spacing & Shapes
**Base unit:** 4px
**Density:** compact
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 60 | 60px | `--spacing-60` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 84 | 84px | `--spacing-84` |
| 100 | 100px | `--spacing-100` |
| 104 | 104px | `--spacing-104` |
| 128 | 128px | `--spacing-128` |
### Border Radius
| Element | Value |
|---------|-------|
| tags | 12px |
| cards | 20px |
| inputs | 12px |
| buttons | 1000px |
### Shadows
| Name | Value | Token |
|------|-------|-------|
| xl | `rgba(0, 0, 0, 0.08) 0px 8px 32px 0px` | `--shadow-xl` |
| xl-2 | `rgba(0, 0, 0, 0.08) 0px 16px 64px 0px` | `--shadow-xl-2` |
### Layout
- **Section gap:** 40px
- **Card padding:** 24px
- **Element gap:** 8px
## Components
### Primary Action Button
**Role:** Main call-to-action
Filled button with a Sky Tint background (#c9e0ff), Electric Blue text (#005ff9), and a full pill-shaped radius (1000px). Padding is 0px top/bottom and 32px left/right for a compact appearance.
### Ghost Button
**Role:** Secondary action / Navigation
Transparent background (rgba(0, 0, 0, 0)), Ink Black text (#010304). No explicit padding in its smallest variant, relying on text size for click area, used for navigation items.
### Outlined Button
**Role:** Tertiary action
White background (#ffffff), Ink Black text (#010304), subtle border of rgba(0, 0, 0, 0.1), and a 1000px pill-shaped radius. Padding of 1px top/bottom and 16px left/right.
### Dark Primary Button
**Role:** Hero or prominent action
Solid Deep Graphite background (#000000), Paper White text (#ffffff), and a 1000px pill-shaped radius. Padding of 0px top/bottom and 16px left/right.
### Information Card
**Role:** Content container
Paper White background (#ffffff), 20px border radius, and a subtle shadow (rgba(0, 0, 0, 0.08) 0px 8px 32px 0px). Internal padding of 24px on all sides.
### QR Code Card
**Role:** Unique interactive element
Paper White background (#ffffff), 16px border radius, and a larger shadow (rgba(0, 0, 0, 0.08) 0px 16px 64px 0px). Internal padding of 12px on all sides.
### Minimal Card
**Role:** Compact grouped information
Light gray background (oklab(0 0 0 / 0.05)), 12px border radius, no shadow. Padding of 0px top/bottom and 16px left/right.
### Prediction Input Card
**Role:** Interactive prediction logic
Paper White background (#ffffff), 16px border radius, and a subtle shadow (rgba(0, 0, 0, 0.08) 0px 8px 32px 0px). Internal padding of 16px top, 20px right, 16px bottom, 16px left.
### Text Input
**Role:** User entry field
Transparent background (rgba(0, 0, 0, 0)), Paper White text (#ffffff), with a Steel Gray border (#767676). Padding of 10px top/bottom and 16px left/right.
## Do's and Don'ts
### Do
- Prioritize Paper White (#ffffff) as the dominant background for all content cards and primary page surfaces.
- Use Ink Black (#010304) for primary text and Deep Graphite (#000000) for navigation and prominent button text to ensure high contrast.
- Apply a 1000px border-radius to all primary action buttons for a distinctly pill-shaped aesthetic.
- Employ the Sky Tint (#c9e0ff) background with Electric Blue (#005ff9) text for clear, functional primary call-to-actions.
- Maintain a compact information density using Geist typeface with precise letter-spacing, particularly tighter tracking for larger display text.
- Utilize a consistent element gap of 8px for spacing elements within components and small clusters.
- Elevate cards with a subtle shadow (rgba(0, 0, 0, 0.08) 0px 8px 32px 0px) and a radius of 20px to differentiate content blocks.
### Don't
- Avoid using highly saturated, non-brand colors; restrict the palette primarily to neutrals with the defined Electric Blue and Sky Tint accents.
- Do not deviate from the Geist typeface; its specific weights and letter-spacing define the brand's typographic tone.
- Refrain from using hard-edged or overly sharp corners on interactive or grouped elements; prefer radii of 12px to 1000px.
- Do not introduce heavy gradients or complex background patterns; maintain a clean, flat surface treatment for most UI elements.
- Avoid excessive use of elevation; reserve shadows for distinct interactive cards and key UI elements to guide attention.
- Do not use generic system fonts; the custom Geist font is critical to the brand's visual identity.
- Do not introduce large, decorative imagery that distracts from functional UI; focus on product-showcasing or abstract graphics when necessary.
## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Page Canvas | `#ffffff` | Dominant background for the entire page, providing a clean, expansive workspace. |
| 1 | Default Card | `#ffffff` | Background for most content cards, slightly elevated from the canvas with a subtle shadow. |
| 2 | Accent Card | `#0000000d` | Background for compact, grouped information, subtly differentiated from the white cards and canvas. |
## Elevation
- **Information Card:** `rgba(0, 0, 0, 0.08) 0px 8px 32px 0px`
- **QR Code Card:** `rgba(0, 0, 0, 0.08) 0px 16px 64px 0px`
- **Prediction Input Card:** `rgba(0, 0, 0, 0.08) 0px 8px 32px 0px`
## Imagery
The site's imagery is sparse, prioritizing UI and functionality over abstract visuals. When present, it features tight, product-focused illustrations like the rounded-rectangle app icon, or simplified graphic elements such as the basketball icon in the prediction interface. Icons are line-drawn and monochrome (often Deep Graphite or Ink Black), maintaining a clean, technical feel. Photography is notably absent, reinforcing a sense of precise, data-driven interaction. Imagery serves an explanatory or functional role, never purely decorative, and occupies minimal space relative to text and data.
## Layout
The page primarily uses a full-bleed structure, with key content areas constrained to a central column (implied max-width around 1200px from overall screenshot analysis). The hero section is characterized by a central headline and subtext, often over a clean white background, framed by functional navigation. Section rhythm is provided by distinct content blocks and cards on a uniform white canvas. Content is arranged in flexible patterns, including centered stacks for key messages, simple left-aligned text with right-aligned card interactions, and grids for showcasing features or data. The layout avoids visual dividers between sections, relying on consistent vertical spacing for flow. Navigation is a sticky top bar, providing immediate access to key brand links and calls to action.
## Agent Prompt Guide
### Quick Color Reference
text: #010304
background: #ffffff
border: #e6e6e6
accent: #005ff9
primary action: #c9e0ff (filled action)
### 3-5 Example Component Prompts
1. Create a Primary Action Button: #c9e0ff background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.
2. Design a `Prediction Input Card` showing 'Orlando vs Detroit': Paper White background (#ffffff), 16px radius, rgba(0, 0, 0, 0.08) 0px 8px 32px 0px shadow. Internal padding 16px top, 20px right, 16px bottom, 16px left. Headline 'Place a prediction' in Ink Black (#010304), Geist weight 600 at 22px, letter-spacing -0.04em.
3. Build a navigation bar item: Ghost Button style, Ink Black text (#010304), Geist weight 500 at 14px, letter-spacing -0.0290em. No background, no border, no padding. Hover state shifts text to Electric Blue (#005ff9).
4. Create a `Minimal Card` to display data: oklab(0 0 0 / 0.05) background, 12px radius, no shadow. Internal padding 0px vertical, 16px horizontal. Text in Deep Graphite (#000000), Geist weight 500 at 16px, letter-spacing -0.0290em.
## Similar Brands
- **Coinbase** — Shares a clean, high-contrast light theme with a focus on clear data presentation and functional elements over elaborate design.
- **Revolut** — Utilizes a compact, systematic UI with tight typography and a limited but distinct accent color to highlight interactive elements and states in a financial context.
- **Stripe** — Employs a minimalist aesthetic with extensive use of whitespace, precise typography, and subtle component elevation to convey professionalism and clarity.
## Quick Start
### CSS Custom Properties
```css
:root {
/* Colors */
--color-ink-black: #010304;
--color-paper-white: #ffffff;
--color-deep-graphite: #000000;
--color-steel-gray: #999a9b;
--color-light-cloud: #e6e6e6;
--color-soft-fog: #676868;
--color-pale-mist: #808181;
--color-electric-blue: #005ff9;
--color-sky-tint: #c9e0ff;
/* Typography — Font Families */
--font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-body: 14px;
--leading-body: 1.35;
--tracking-body: -0.08px;
--text-subheading: 18px;
--leading-subheading: 1.33;
--tracking-subheading: -0.04px;
--text-heading-sm: 22px;
--leading-heading-sm: 1.16;
--tracking-heading-sm: -0.04px;
--text-heading: 32px;
--leading-heading: 1.15;
--tracking-heading: -0.12px;
--text-display: 56px;
--leading-display: 1.07;
--tracking-display: -0.2px;
/* Typography — Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
/* Spacing */
--spacing-unit: 4px;
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-20: 20px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-60: 60px;
--spacing-64: 64px;
--spacing-80: 80px;
--spacing-84: 84px;
--spacing-100: 100px;
--spacing-104: 104px;
--spacing-128: 128px;
/* Layout */
--section-gap: 40px;
--card-padding: 24px;
--element-gap: 8px;
/* Border Radius */
--radius-lg: 8px;
--radius-xl: 12px;
--radius-2xl: 16px;
--radius-2xl-2: 20px;
--radius-full: 100px;
--radius-full-2: 1000px;
/* Named Radii */
--radius-tags: 12px;
--radius-cards: 20px;
--radius-inputs: 12px;
--radius-buttons: 1000px;
/* Shadows */
--shadow-xl: rgba(0, 0, 0, 0.08) 0px 8px 32px 0px;
--shadow-xl-2: rgba(0, 0, 0, 0.08) 0px 16px 64px 0px;
/* Surfaces */
--surface-page-canvas: #ffffff;
--surface-default-card: #ffffff;
--surface-accent-card: #0000000d;
}
```
### Tailwind v4
```css
@theme {
/* Colors */
--color-ink-black: #010304;
--color-paper-white: #ffffff;
--color-deep-graphite: #000000;
--color-steel-gray: #999a9b;
--color-light-cloud: #e6e6e6;
--color-soft-fog: #676868;
--color-pale-mist: #808181;
--color-electric-blue: #005ff9;
--color-sky-tint: #c9e0ff;
/* Typography */
--font-geist: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-body: 14px;
--leading-body: 1.35;
--tracking-body: -0.08px;
--text-subheading: 18px;
--leading-subheading: 1.33;
--tracking-subheading: -0.04px;
--text-heading-sm: 22px;
--leading-heading-sm: 1.16;
--tracking-heading-sm: -0.04px;
--text-heading: 32px;
--leading-heading: 1.15;
--tracking-heading: -0.12px;
--text-display: 56px;
--leading-display: 1.07;
--tracking-display: -0.2px;
/* Spacing */
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-20: 20px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-60: 60px;
--spacing-64: 64px;
--spacing-80: 80px;
--spacing-84: 84px;
--spacing-100: 100px;
--spacing-104: 104px;
--spacing-128: 128px;
/* Border Radius */
--radius-lg: 8px;
--radius-xl: 12px;
--radius-2xl: 16px;
--radius-2xl-2: 20px;
--radius-full: 100px;
--radius-full-2: 1000px;
/* Shadows */
--shadow-xl: rgba(0, 0, 0, 0.08) 0px 8px 32px 0px;
--shadow-xl-2: rgba(0, 0, 0, 0.08) 0px 16px 64px 0px;
}
```

monochrome financial ledger

Regulated purple circuit board.…
High-contrast digital trading…
Deep-sea radiant data

Digital Trust, Blueprinted. A…
Digital ledger on white marble.
Monochromatic Precision, Neon Pulse
Dark mode precision, neon…

Architectural blueprint on white…
Crisp Editorial Clarity: a…
Midnight Command Center: a dark…
Blockchain blueprint on bright…

Architectural blueprint on white…
Electric lime on a dark canvas.…

Fuzzy Neon Playground. Crisp white…
Analytical Console on Dark Steel.…

Achromatic ledger, crisp yet silent
midnight command center, bright…
Soft-edged transparency on…

Deep-space observatory control…