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

# Fluz · Design System

> Bold money tools in a luminous, high-contrast world

**Theme:** light · **Industry:** fintech · **Source:** https://fluz.app/us · **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._

Fluz pairs oversized condensed typography and dark editorial bands with luminous gradients and detailed product imagery. A spacious, light canvas gives the vivid hero and alternating product sections room to stand out.

## North star

Set oversized condensed type and vivid product imagery against calm open space, using dark bands to create deliberate contrast.

## Overview

The page balances a pale warm-gray canvas with near-black navigation and large dark feature bands. Its hero uses a vivid green-to-blue gradient, centered white condensed lettering, and a compact white pill CTA; gradients reappear in framed product visuals rather than as a uniform page background. Greed Condensed SemiBold gives headlines their tall, compressed, assertive silhouette, while Area Semibold supports navigation and body copy. Layout alternates between centered statements, spacious two-column product explanations, image-led cards, and dark benefit sections. The phone and interface imagery is paired with playful floating objects and saturated landscapes, giving functional fintech products a tactile, approachable quality. Rounded pills and soft-corner media soften the sharp typographic contrast. Hairline borders organize dark navigation and comparison content; the overall treatment stays flat and relies on tonal bands, framing, and scale rather than prominent shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Gray | `#ededec` | `--color-gallery-gray` | surface | Primary page canvas and light section background. |
| Soft Porcelain | `#f2f2f2` | `--color-soft-porcelain` | surface | Alternate pale section surface. |
| Warm Graphite | `#514f4c` | `--color-warm-graphite` | neutral | Main measured text color on light areas. |
| Quiet Stone | `#aeaea6` | `--color-quiet-stone` | neutral | Muted supporting text on pale backgrounds. |
| Boundary Charcoal | `#373432` | `--color-boundary-charcoal` | semantic | Measured border tone, chiefly for interface and section divisions. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | Hero lettering and button text on dark or colored surfaces. |
| Espresso Ink | `#221919` | `--color-espresso-ink` | surface | Deep navigation and extended dark benefit-section background. |
| Cocoa Black | `#1a0000` | `--color-cocoa-black` | brand | Primary dark text, navigation labels, and dark CTA treatment. |
| Periwinkle Glow | `#a6b4f7` | `--color-periwinkle-glow` | accent | Blue-violet stop in the hero and product gradients. |
| Fluz Green | `#21ba4c` | `--color-fluz-green` | accent | Bright green gradient stop and vivid product-image framing. |
| Slate Edge | `#3a3a3a` | `--color-slate-edge` | neutral | Secondary dark borders and fine dividers. |
| Sky Tint | `#82beff` | `--color-sky-tint` | accent | Blue gradient and interface accent, also present in product visuals. |
| Jade Mist | `#5bb89a` | `--color-jade-mist` | accent | Teal-green gradient transition in the brand color sweep. |
| Smoked Umber | `#262221` | `--color-smoked-umber` | surface | Top stop of the dark-to-brown section gradient. |
| Brown Ember | `#564743` | `--color-brown-ember` | surface | Lower stop of the dark-to-brown section gradient. |
| Oat Sand | `#e2dbd4` | `--color-oat-sand` | accent | Warm gradient color detected in supporting section visuals. |
| Clear Sky | `#7db4f4` | `--color-clear-sky` | accent | Blue gradient stop used in the vivid hero color sweep. |

### Semantic aliases

`--color-canvas` → `#ededec` (Gallery Gray) · `--color-surface` → `#f2f2f2` (Soft Porcelain) · `--color-surface-2` → `#221919` (Espresso Ink) · `--color-text` → `#514f4c` (Warm Graphite) · `--color-text-muted` → `#aeaea6` (Quiet Stone) · `--color-text-subtle` → `#ffffff` (Clean White) · `--color-border` → `#373432` (Boundary Charcoal) · `--color-accent` → `#a6b4f7` (Periwinkle Glow) · `--color-accent-2` → `#21ba4c` (Fluz Green) · `--color-accent-3` → `#7db4f4` (Clear Sky)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#514f4c` | `#ededec` | 6.97:1 | AA |
| `#514f4c` | `#f2f2f2` | 7.29:1 | AAA |
| `#514f4c` | `#221919` | 2.11:1 | fail |
| `#aeaea6` | `#ededec` | 1.91:1 | fail |
| `#aeaea6` | `#f2f2f2` | 1.99:1 | fail |
| `#aeaea6` | `#221919` | 7.7:1 | AAA |
| `#ffffff` | `#ededec` | 1.17:1 | fail |
| `#ffffff` | `#f2f2f2` | 1.12:1 | fail |
| `#ffffff` | `#221919` | 17.2:1 | AAA |
| `#a6b4f7` | `#ededec` | 1.71:1 | fail |

### Gradients

- `linear-gradient(0deg, rgb(125, 180, 244) 25%, rgb(147, 180, 246) 38%, rgb(166, 180, 247) 47%, rgb(104, 184, 171) 83%, rgb(33, 186, 76) 99%)`
- `linear-gradient(rgb(38, 34, 33) 26%, rgb(86, 71, 67) 100%)`
- `linear-gradient(rgb(226, 219, 212) 0%, rgb(209, 201, 193) 100%)`
- `linear-gradient(90deg, rgb(130, 190, 255), rgb(166, 180, 247) 47.21%, rgb(91, 184, 154) 73.75%, rgb(33, 186, 76) 91.26%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Area Semibold | `--font-body` | webfont | 700, 400 | Primary body text and prominent navigation labels. | Inter |
| Greed Condensed SemiBold | `--font-display` | webfont | 700 | Display, hero, section, and CTA headings. | Barlow Condensed |
| Greed-SemiBold | `--font-greed-semibold` | webfont | 700, 400 | Small navigation and compact supporting labels. | Inter |
| Greed SemiBold | `--font-greed-semibold` | webfont | 700, 600 | Secondary headings and captions. | Barlow |

- **Area Semibold:** Bold, clean sans-serif texture; measured body is weight 700 with open line spacing.
- **Greed Condensed SemiBold:** Tall, tightly set headlines; heavy weight, tight tracking, and no default uppercase transformation.
- **Greed-SemiBold:** Semibold display character for compact UI; measured nav is small and bold.
- **Greed SemiBold:** Bold condensed-adjacent voice; use for short captions and secondary heading levels.

### Type scale — Golden Ratio (ratio ≈ 1.665, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 205px | 700 | 0.79 | -0.005em | — | Greed Condensed SemiBold | Oversized hero statement, stacked across multiple lines. |
| h1 | 96px | 700 | 0.91 | -0.025em | — | Greed Condensed SemiBold | Primary page or major feature headline. |
| h2 | 64px | 700 | 0.91 | -0.02em | — | Greed Condensed SemiBold | Large section titles and benefit statements. |
| h3 | 54px | 600 | 0.92 | -0.03em | — | Greed SemiBold | Secondary feature titles and prominent card headings. |
| h4 | 42px | 700 | 1.15 | -0.02em | uppercase | Greed Condensed SemiBold | Compact uppercase section labels and product headings. |
| body | 16px | 700 | 1.5 | 0 | — | Area Semibold | Navigation, feature descriptions, and paragraph copy. |
| caption | 15px | 700 | 1.6 | 0 | — | Greed SemiBold | Small labels and short supporting captions. |
| button | 20px | 700 | 1.2 | 0 | — | Greed Condensed SemiBold | Pill CTA labels and prominent action text. |
| nav | 14px | 700 | 1.29 | 0 | — | Greed-SemiBold | Compact menu and category labels. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 2, 7, 8, 10, 12, 14, 15, 16, 18, 20, 24, 25, 28, 30, 32, 36 px.
- Section rhythm 115px · element gap 16px · card padding — · max content width 1418px.

Use a wide centered content area, measured page max width 1418px, with generous section breaks and compact spacing within UI groups. Alternate centered title-and-copy sections with two-column product explanations and image-led card rows. The page is spacious overall: the canvas remains open around content, while dark feature bands contain tightly grouped benefit grids. Keep text alignment purposeful—centered for hero and section introductions, left-aligned for product details—and use asymmetry between copy and product media.

## Shape & elevation

- Radius: button `9999px` · media `20px` · badge `9999px` · nav `9999px` · xs `20px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The page is primarily flat, with contrast created by alternating pale and espresso-dark section bands rather than shadows. Use thin borders and subtle tonal boundaries to define navigation and comparison surfaces. Media frames and card groups sit directly within the layout; rounded corners provide separation without a pronounced elevation effect.

## Imagery

Use crisp product-interface imagery, especially phones, cards, and dashboards, framed by colorful landscape scenes. Supplement with playful floating objects and occasional 3D-style illustrations. Product frames have soft rounded corners; visuals are saturated and lively against the neutral canvas. Keep important UI readable and let imagery carry the color when adjacent copy stays restrained.

## Components

### Top navigation

Compact dark two-level header with white Fluz mark, small links, a pale rounded Search control, and a gradient sign-in pill.

### Hero CTA

Centered white pill button beneath the stacked headline and short supporting copy; use the measured Greed Condensed SemiBold button style.

### Product feature split

Alternate left-aligned feature copy and framed phone or interface imagery across a generous light section.

### Product card trio

Three rounded media-led cards pair product categories with concise labels and bright interface artwork.

### Dark benefits band

Espresso background holds centered condensed headings and a compact multi-column grid of benefits.

### Comparison panel

Dark rounded panel organizes Fluz advantages against other providers with fine dividers and small status icons.

### Pill buttons

Use full capsule shapes for primary actions, with white-on-dark or dark-on-white contrast depending on the surface.

### Measured component styles

- **Primary button** (“Explore virtual cards”): background #170100 · text #ffffff · radius 200px · padding 16px 32px · 700 20px Greed Condensed SemiBold
- **Secondary button** (“Search”): background #e3e3e3 · text #000000 · border 1px solid · radius 100px · padding 8px 16px · 400 13.3333px Arial
- **Link** (“PERSONAL Earn cashback on everyday purch”): transparent background · text #1a0000 · radius 0px · padding 0px · 700 16px Area Semibold
- **Badge** (“VIRTUAL CARDS”): background #ededec · text #000000 · radius 500px · padding 2px 10px 1px 10px · 700 15px Greed SemiBold
- **Navigation item** (“Money Marketplace Blog Personal Business”): transparent background · text #1a0000 · radius 0px · padding 0px · 700 16px Area Semibold

## Do

- Use Greed Condensed for short, oversized headlines.
- Keep the pale canvas dominant across light sections.
- Reserve saturated gradients for hero and framed product moments.
- Alternate light sections with deliberate espresso-dark bands.
- Use pill silhouettes for navigation actions and CTAs.
- Pair product copy with recognizable phone or interface imagery.

## Don't

- Do not fill every section with gradients.
- Do not crowd the page with dense copy or tight spacing.
- Do not replace condensed display typography with generic wide headlines.
- Do not add heavy drop shadows to otherwise flat sections.
- Do not use saturated accents as long blocks of body text.
- Do not make every product section symmetrical.

## Agent prompt

Build a new Fluz-style fintech page with a spacious #ededec canvas and occasional #f2f2f2 sections. Use #221919 for deep editorial bands and #1a0000 for dark text or CTA fills. Give the hero a vivid gradient sweep using #21ba4c, #5bb89a, #a6b4f7, and #7db4f4, with oversized white condensed lettering and a centered pill action. Keep body copy restrained and pair left-aligned product explanations with rounded phone or dashboard imagery. Use Greed Condensed-style headlines and clean bold sans-serif UI text. Alternate image-led product rows with centered section introductions and compact benefit grids. Favor open spacing, fine borders, and flat surfaces over shadows. Keep accents vivid but concentrated in gradients and product artwork; use rounded capsule controls consistently.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Centered heading on a dark comparison band, followed by a two-column advantages table. | Side-by-side provider comparison, Scannable benefit rows | Centered condensed heading, Dark rounded panel, Fine row dividers, Small status icons |

## Source CSS custom properties (selected)

```css
--fa-style-family-brands: "Font Awesome 6 Brands";
--fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
--fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
--fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
--nectar-accent-color: #161616;
--nectar-extra-color-1: #ffe9e1;
--nectar-extra-color-2: #fec251;
--nectar-extra-color-3: #4574f4;
```

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