---
title: "UGLYCASH design system"
variant: extended
source: https://ugly.cash/
captured_at: 2026-10-12
theme: light
industry: fintech
generator: Design DNA (https://four.wiralomi.com/style/ugly-cash)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# UGLYCASH · Design System

> Opportunity, framed in bold type and vivid product moments.

**Theme:** light · **Industry:** fintech · **Source:** https://ugly.cash/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

UGLYCASH pairs oversized condensed headlines with a pale, nearly monochrome canvas and vivid product imagery. The homepage moves from a phone-led hero into feature cards, regulatory information, editorial video, and discovery links.

## North star

Keep the page calm and pale, then use oversized condensed black type and vivid product imagery as the deliberate points of emphasis.

## Overview

The page is built on a soft light-gray canvas, with black doing nearly all the work in headlines, body copy, and key interface details. White cards provide quiet separation, while electric magenta, cyan, and lime appear as small, high-energy accents or within product imagery rather than as broad site-wide bands. Oversized, tightly tracked condensed display type gives the hero its force; Inter keeps supporting copy and labels legible. A centered, phone-led opening gives way to aligned feature grids and a larger regulatory card row, with generous vertical pauses between sections. Product screens, money imagery, cards, compliance illustrations, video, and merchandise supply color and texture. Most content remains visually flat: rounded media and cards establish grouping without relying on shadows or decorative borders. The result feels editorial and direct, balancing a striking headline with practical financial-product explanations.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Ink Black | `#000000` | `--color-ink-black` | brand | Primary headline and body text, logo, dark interface details, and occasional dark media backgrounds. |
| Soft Canvas | `#f7f7f7` | `--color-soft-canvas` | surface | Dominant page canvas and continuous background across the homepage sections. |
| Card White | `#ffffff` | `--color-card-white` | surface | Light feature-card surfaces and white areas within product and interface imagery. |
| Muted Gray | `#6e6e6e` | `--color-muted-gray` | neutral | Secondary copy and less prominent supporting text. |
| Mid Gray | `#888888` | `--color-mid-gray` | neutral | Low-emphasis text detected in the palette; keep to secondary copy rather than prominent headings. |
| Parchment Beige | `#e7e3bf` | `--color-parchment-beige` | semantic | Minor surface tone detected outside the dominant page canvas; not a defining site-wide color. |
| Near Ink | `#000100` | `--color-near-ink` | neutral | Near-black detail detected in supporting content or media, not a separate primary brand surface. |
| Charcoal Gray | `#3a3a3a` | `--color-charcoal-gray` | neutral | Dark supporting detail in imagery and interface content. |
| Electric Magenta | `#fa00ff` | `--color-electric-magenta` | accent | Small vivid accents in app and card imagery; not a broad page background. |
| Signal Cyan | `#02bbff` | `--color-signal-cyan` | accent | Accent card and product imagery color, notably the trade feature card. |
| Acid Lime | `#adff02` | `--color-acid-lime` | accent | Small highlighted links and illustration backgrounds, including vivid product and compliance cards. |

### Semantic aliases

`--color-canvas` → `#f7f7f7` (Soft Canvas) · `--color-surface` → `#ffffff` (Card White) · `--color-surface-2` → `#000000` (Ink Black) · `--color-surface-3` → `#e7e3bf` (Parchment Beige) · `--color-text` → `#000000` (Ink Black) · `--color-text-muted` → `#6e6e6e` (Muted Gray) · `--color-accent` → `#fa00ff` (Electric Magenta) · `--color-accent-2` → `#02bbff` (Signal Cyan) · `--color-accent-3` → `#adff02` (Acid Lime)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f7f7f7` | 19.6:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#e7e3bf` | 16.14:1 | AAA |
| `#6e6e6e` | `#f7f7f7` | 4.76:1 | AA |
| `#6e6e6e` | `#ffffff` | 5.1:1 | AA |
| `#6e6e6e` | `#000000` | 4.12:1 | AA-large |
| `#6e6e6e` | `#e7e3bf` | 3.92:1 | AA-large |
| `#fa00ff` | `#f7f7f7` | 3.01:1 | AA-large |
| `#fa00ff` | `#ffffff` | 3.23:1 | AA-large |
| `#fa00ff` | `#000000` | 6.51:1 | AA |

### Gradients

- `linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(-90deg, rgb(0, 0, 0) 0%, rgba(174, 174, 174, 0) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%)`
- `linear-gradient(rgb(129, 125, 114) 0%, rgb(194, 190, 172) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 500, 700, 400 | Body copy, captions, links, and supporting interface text. | Inter |
| Helvetica Now Display Cn Bold | `--font-display` | webfont | 700, 900 | Display headlines and large uppercase hero statements. | Barlow Condensed |

- **Inter:** Use measured weights 400, 500, and 700; keep supporting text clear and restrained.
- **Helvetica Now Display Cn Bold:** Use very heavy weights, tight negative tracking, compressed proportions, and uppercase for emphatic headings.

### Type scale — Perfect Fifth (ratio ≈ 1.556, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 164px | 700 | 0.85 | -0.033em | capitalize | Helvetica Now Display Cn Bold | Oversized condensed display statement anchoring the hero. |
| h1 | 85px | 900 | 0.94 | -0.02em | uppercase | Helvetica Now Display Cn Bold | All-caps hero and major statement headlines. |
| h2 | 64px | 700 | 0.94 | -0.02em | — | Helvetica Now Display Cn Bold | Section headings introducing feature and discovery groups. |
| h3 | 38px | 400 | 1.2 | 0 | — | Miss Fajardose | Decorative script-style subheading role where present. |
| h4 | 24px | 700 | 1.17 | -0.02em | — | Inter | Compact bold labels and card titles. |
| body | 18px | 500 | 1.2 | 0 | — | Inter | Feature descriptions and standard supporting paragraphs. |
| caption | 14px | 400 | 1.29 | 0 | — | Inter | Small legal, metadata, and understated helper text. |
| link | 20px | 400 | 1.4 | -0.02em | — | Inter | Navigation and calls to explore app or related content. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 4, 5, 9, 10, 16, 20, 24, 27, 96, 168 px.
- Section rhythm 96px · element gap 10px · card padding — · max content width 1110px.

Use a centered content area capped at the measured 1110px maximum width, with a spacious density and measured 96px section rhythm. The hero is centered and vertically composed around the large headline and phone media. Lower sections shift to left-aligned headings and two- or three-column media cards; the regulatory content uses a denser multi-card row. Keep generous breathing room around groups and let imagery determine each card's visual weight.

## Shape & elevation

- Radius: button `9999px` · card `16px` · media `16px` · link `16px` · xs `1px` · sm `16px` · md `23px` · lg `38px` · xl `43px` · 2xl `46px` · pill `9999px`
- No box shadows measured: the page is flat.

The measured design is mostly flat, with no recurring shadow system or visible hairline borders. Use the pale canvas and white card surfaces for separation, and measured 16px card and media radii where appropriate. Allow product imagery to supply depth through its own rendering rather than adding interface shadows.

## Imagery

Lead with a large smartphone product mockup beneath the hero headline. Use app-interface screenshots, money and card visuals, compliance illustrations, merchandise photography, and a prominent editorial video thumbnail. Images are often cropped into rounded card frames; saturated magenta, cyan, and lime primarily live inside these visuals, against the otherwise restrained page.

## Components

### Top navigation

Compact centered pill-like header with the condensed UGLYCASH wordmark, social icons, and a small app link framed by a magenta accent.

### Hero product showcase

Centered, tightly set uppercase statement above a tall phone mockup; the phone screen supplies the primary product detail.

### Feature cards

Rounded media cards with concise labels and short descriptions; most use white surfaces, with a cyan card providing a vivid exception.

### Regulatory card row

A multi-column collection of compliance and safety topics, mixing illustrations, short labels, and supporting copy.

### Editorial video

Large rounded video thumbnail with oversized image typography, paired with a compact heading and dark pill-shaped More videos control.

### Discovery cards

Three visual links for cashback, business accounts, and merchandise, each combining an image with a brief title and description.

### Measured component styles

- **Primary button** (“More videos”): background #000000 · text #0000ee · radius 100px · padding 0px 24px · 400 12px sans-serif
- **Link** (“Licences, registrations and security pol”): background #ffffff · text #0000ee · radius 16px · padding 0px · 400 12px sans-serif
- **Card** (“Access Spend locally. Grow globally.”): background #ffffff · text #000000 · radius 16px · padding 0px · 400 12px sans-serif

## Do

- Use #f7f7f7 as the continuous page canvas.
- Set major statements in heavy, condensed uppercase typography.
- Keep black text as the primary visual anchor.
- Use #fa00ff, #02bbff, and #adff02 as focused accents.
- Pair each feature image with a concise title and explanation.
- Leave generous vertical space between content groups.

## Don't

- Do not turn the page into a dark theme.
- Do not use bright accents as full-page background bands.
- Do not replace the oversized display type with generic light headings.
- Do not add a prominent shadow system or decorative borders.
- Do not crowd the hero with multiple competing calls to action.
- Do not treat illustration-only colors as core site-wide surfaces.

## Agent prompt

Build a new UGLYCASH-style fintech page with a calm #f7f7f7 Soft Canvas and Ink Black #000000 typography. Use a heavy condensed display face for oversized, tight-tracked uppercase headlines, paired with Inter for readable body copy and labels. Compose the opening around one assertive headline and a prominent phone or product visual. Organize supporting content into spacious, rounded image cards with short descriptions; use #ffffff Card White for quiet surfaces. Reserve Electric Magenta #fa00ff, Signal Cyan #02bbff, and Acid Lime #adff02 for selective highlights and vivid imagery, not broad background fields. Keep sections centered within a measured 1110px maximum width, with generous vertical separation and grids that adapt to content. Favor flat surfaces and image-led depth over shadows or borders.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered oversized headline above a vertically framed smartphone image. | brand navigation, product-first introduction | condensed uppercase headline, phone mockup, small app link |
| 2 | how-it-works | Left-aligned section heading followed by three image-led cards. | three-step overview, feature summaries | three-column card grid, rounded media, brief captions |
| 3 | feature-grid | Left-aligned heading over a two-column set of image-and-copy features. | capability overview, scannable feature descriptions | two-column media grid, rounded cards, colorful product imagery |
| 4 | feature-grid | Dense multi-column row of regulatory, security, and compliance cards. | trust information, topic-by-topic browsing | illustrated cards, short labels, mixed light and vivid surfaces |
| 5 | video | Section heading and small video control above one wide thumbnail. | video discovery, more-videos link | large rounded thumbnail, dark pill control, oversized image lettering |
| 6 | product-grid | Left-aligned heading above three visual discovery cards. | related-product discovery, category navigation | three-column image cards, short descriptions, rounded media |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/ugly-cash