---
name: Increase
description: "A prime example of a modern, developer-focused Fintech interface that balances professional authority with high-tech visual appeal through bold typography and geometric abstraction."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1A2B3B"
  secondary: "#687887"
  tertiary: "#31F2CC"
  neutral: "#314352"
  bg-soft: "#F5F6F7"
  bg-quiet: "#E4E5E9"
  muted-soft: "#1A2B3B"
  line: "rgba(26, 43, 59, 0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 72px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-2px"
  h2:
    fontFamily: grotesque-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-1.6px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

Enterprise-grade banking APIs for technology companies.

*A precision-engineered dashboard for financial infrastructure.*

## Colors

A clean, professional palette anchored in deep navy for trust, balanced by vibrant teal and lime gradients for modern tech appeal.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1A2B3B`)** — uses `ink` token
- **Secondary text (`#687887`)** — uses `ink-soft` token
- **Accent (`#31F2CC`)** — uses `accent` token
- **Muted (`#314352`)** — uses `muted` token
- **Borders (`rgba(26, 43, 59, 0.1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

## Layout

Max-width container with a 12-column grid, centering main content.

*Rhythm:* A consistent 4px grid system driving clear visual hierarchy.

## Elevation & Depth

- rgba(12, 25, 39, 0.05) 0px 6px 8px 0px
- rgba(12, 25, 39, 0.06) 0px 16px 20px 0px
- rgba(12, 25, 39, 0.1) 0px 50px 60px 0px
- Borders: 1px solid rgba(26, 43, 59, 0.1)

## Shapes

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

## Components

- **button:** Dark pill-shaped primary buttons with white text; white secondary buttons with dark borders and icons.
- **card:** Clean white cards with subtle drop shadows and 12px border-radius.
- **chip:** Small, rounded pill-shaped labels.
- **input:** Clean text fields with subtle borders and rounded corners.
- **hero:** Large, impactful typography paired with dynamic, overlapping geometric gradients.

## Do's and Don'ts

**Don't:**
- Don't use serif fonts — screenshot shows grotesque-sans for display and body text
- Don't use complex, organic illustrations — screenshot shows bold, flat geometric gradients
- Don't use a wide, airy layout without clear hierarchy — screenshot shows tight, structured grids
- Don't use bright, neon colors as primary UI elements — screenshot uses a deep navy base with vibrant accents
- Don't use heavy drop shadows on every element — screenshot uses subtle shadows only on cards and buttons
- Don't use a cluttered navigation bar — screenshot shows a clean, minimal top navigation

---

## System Prompt (paste into AI agent)

```
This is a professional Fintech SaaS product designed for enterprise developers. The palette is anchored by a deep navy (#1A2B3B) for trust, contrasted with vibrant teal (#31F2CC) and lime-green gradients for modern energy. Typography uses grotesque-sans for display and body, with monospace for code snippets. Layouts are grid-based, spacious, and highly legible. Critical constraints: Don't use serif fonts, avoid cluttered UI, and never use overly playful or organic visual elements. Ensure the deep navy is used for primary buttons and text to maintain authority.
```