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

# Nuri · Design System

> Soft colour, confident type, money in your hands.

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

Nuri presents a self-custodial wallet through a calm sequence of pastel feature bands, oversized typography, and recurring wallet imagery. A lavender hero and CTA establish the brand, while warm off-white, lilac, and peach sections make the long fintech feature story feel approachable.

## North star

Let broad pastel colour fields and clear, oversized type make self-custody feel calm, direct, and approachable.

## Overview

The visual identity pairs a warm, pale canvas (#fffdf2) with deep olive-charcoal ink (#222013), avoiding the clinical white-and-blue language common in finance. Large lavender panels carry the hero, closing CTA, and partner marks; alternating lilac, peach, and warm-white feature bands give the long page a steady colour rhythm. System sans-serif typography keeps oversized, light-weight headlines approachable, with compact supporting copy and strong dark pill CTAs. Layouts are spacious and mostly single-column feature splits: text and a recurring wallet illustration or phone mockup alternate sides across broad sections. The hero keeps its signup form and country selector prominent beside product imagery. Hairline borders are subdued, while rounded controls and media edges soften the interface. Shadows are restrained to floating navigation and buttons; most sections rely on colour fields and generous separation rather than cards.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Olive Ink | `#222013` | `--color-olive-ink` | brand | Primary headings, body copy, dark pill CTAs, navigation details, and the footer background. |
| Warm Canvas | `#fffdf2` | `--color-warm-canvas` | neutral | Main page canvas and recurring warm-white feature bands. |
| Linen Hairline | `#eeece3` | `--color-linen-hairline` | neutral | Subtle section, card, and link dividers against the pale canvas. |
| Mist Lilac | `#f3f0ff` | `--color-mist-lilac` | surface | Cool lavender-tinted feature sections, including currency conversion and in-app help. |
| Peach Veil | `#ffe9dd` | `--color-peach-veil` | surface | Warm peach bands for payment and privacy-focused feature stories. |
| Pale Iris | `#ebe3ff` | `--color-pale-iris` | surface | Light purple feature bands, including global payments and AI integrations. |
| Nuri Lavender | `#beaaff` | `--color-nuri-lavender` | brand | Signature hero and closing CTA fields, with partner marks displayed over the CTA. |
| Muted Olive | `#666455` | `--color-muted-olive` | semantic | Secondary copy and muted explanatory text. |
| Soft Graphite | `#cacac7` | `--color-soft-graphite` | semantic | Low-emphasis navigation and footer text. |
| Pure White | `#ffffff` | `--color-pure-white` | neutral | Occasional white card or button surface; supporting detail rather than a defining page colour. |
| Footer Olive | `#3d3b30` | `--color-footer-olive` | neutral | Subtle footer border detail, not a major surface colour. |

### Semantic aliases

`--color-canvas` → `#fffdf2` (Warm Canvas) · `--color-surface` → `#f3f0ff` (Mist Lilac) · `--color-surface-2` → `#ffe9dd` (Peach Veil) · `--color-surface-3` → `#ebe3ff` (Pale Iris) · `--color-surface-4` → `#222013` (Olive Ink) · `--color-text` → `#222013` (Olive Ink) · `--color-text-muted` → `#666455` (Muted Olive) · `--color-text-subtle` → `#cacac7` (Soft Graphite) · `--color-border` → `#eeece3` (Linen Hairline) · `--color-accent` → `#beaaff` (Nuri Lavender)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#222013` | `#fffdf2` | 16.03:1 | AAA |
| `#222013` | `#f3f0ff` | 14.58:1 | AAA |
| `#222013` | `#ffe9dd` | 13.98:1 | AAA |
| `#222013` | `#ebe3ff` | 13.21:1 | AAA |
| `#666455` | `#fffdf2` | 5.85:1 | AA |
| `#666455` | `#f3f0ff` | 5.32:1 | AA |
| `#666455` | `#ffe9dd` | 5.1:1 | AA |
| `#666455` | `#ebe3ff` | 4.82:1 | AA |
| `#cacac7` | `#fffdf2` | 1.61:1 | fail |
| `#cacac7` | `#f3f0ff` | 1.46:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| system-ui | `--font-body` | system | 400, 700, 600, 200, 500, 800 | Site-wide headings, body copy, navigation, and buttons. | Inter |

- **system-ui:** Use clean sans-serif forms; display headlines are light and large, while primary CTA labels are notably bold.

### Type scale — Perfect Fourth (ratio ≈ 1.327, base 16.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 68px | 400 | 1.22 | 0 | — | system-ui | Large promotional display headings, especially brand statements. |
| h1 | 66px | 200 | 0.84 | 0 | — | system-ui | Hero headline, set lightly with compact line spacing. |
| h2 | 61px | 400 | 1.22 | 0 | — | system-ui | Feature-section headlines across the alternating bands. |
| h3 | 58px | 400 | 1.05 | 0 | — | system-ui | Secondary feature or content headlines. |
| h4 | 52px | 400 | 1.05 | -0.02em | — | system-ui | Smaller editorial or supporting section headings. |
| body | 16.5px | 400 | 1.29 | 0 | — | system-ui | Feature descriptions and hero supporting copy. |
| caption | 14.5px | 400 | 1.55 | 0 | — | system-ui | Compact legal notes, labels, and secondary interface text. |
| button | 18.5px | 800 | normal | 0 | — | system-ui | Prominent account-opening CTA labels. |
| nav | 17px | 400 | 1.29 | 0 | — | system-ui | Header navigation and language selector text. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 5, 8, 12, 13, 14, 16, 18, 20, 24, 26, 32, 40, 48, 58, 72 px.
- Section rhythm 80px · element gap 58px · card padding — · max content width 1180px.

The measured content max width is 1180px, with spacious density and broad section intervals. The page is a long vertical sequence of mostly single-column feature splits, alternating text and imagery from side to side. Hero and closing CTA sit on full-width lavender fields; intervening sections use full-width colour bands. Text is left-aligned, with generous breathing room around headlines and product visuals. The measured spacing system uses a 4px base unit and an 80px section gap; preserve the relaxed rhythm rather than compressing the page.

## Shape & elevation

- Radius: button `9999px` · media `32px` · nav `9999px` · link `24px` · xs `9px` · sm `32px` · pill `9999px`
- Shadow `lg` (button): `rgba(44, 35, 46, 0.18) 0px 14px 26px 0px`
- Shadow `lg-2` (nav): `rgba(44, 35, 46, 0.08) 0px 14px 26px 0px`
- Shadow `lg-3` (nav): `rgba(44, 35, 46, 0.18) 0px 18px 30px 0px`
- Motion: standard transition `0.18s ease` on interactive elements.

The design is mostly flat: pastel section fields, clean text, and quiet hairline borders do most of the structural work. Dark, pill-shaped controls contrast directly against their background. Use measured large soft shadows only for floating navigation or CTA treatments where appropriate; do not turn feature sections into stacked elevated cards.

## Imagery

Product imagery focuses on phone-wallet UI and card mockups, alongside a repeated teal abstract Nuri mark. The hero uses larger, layered phone and card visuals against its lavender backdrop; feature sections give the recurring mark generous space beside concise text. Imagery feels clean and illustrative rather than photographic, with rounded media framing and soft contrast. Treat incidental colours inside product artwork as illustration details, not new brand palette colours.

## Components

### Hero signup form

A rounded outlined phone-entry field combines country selection, mobile-number input, and a dark pill account CTA; an email alternative sits below.

### Primary CTA

Use a dark #222013 pill with #fffdf2 text; the hero label is bold, while the lower-page account CTA is also strongly weighted.

### Language selector

Compact rounded language control sits in the top-right navigation, with the active option emphasized in a dark circular pill.

### Feature split

A full-width pastel band pairs a large left-aligned heading and concise copy with phone imagery or the recurring teal brand mark.

### Closing CTA

A lavender full-width panel uses an uppercase money-control headline, short supporting copy, a dark pill CTA, and partner/payment marks.

### Footer

A dark #222013 base contains the brand mark, company details, app-store badges, and a compact row of navigation and legal links.

### Measured component styles

- **Primary button** (“EN”): background #222013 · text #fffdf2 · radius 999px · padding 0px 12.8px · 700 13.76px system-ui
- **Secondary button**: background #fffffe · text #222013 · border 1px solid #e5e2da · radius 8px · padding 0px 12px · 400 17px system-ui · shadow rgba(44, 35, 46, 0.18) 0px 14px 26px 0px
- **Link** (“Mercuryo”): transparent background · text #222013 · radius 0px · padding 0px · 400 17px system-ui
- **Input**: transparent background · text #222013 · radius 0px · padding 0px 18.4px · 500 21.6px system-ui
- **Card**: background #ffffff · text #222013 · radius 0px · padding 0px · 400 17px system-ui
- **Navigation item** (“Home”): transparent background · text #ffffff · radius 0px · padding 0px · 400 17px system-ui

## Do

- Use #beaaff as the signature hero and closing CTA colour.
- Alternate warm-white, lilac, and peach feature bands.
- Keep headlines large, light, and left-aligned.
- Use dark olive ink for high-contrast primary actions.
- Give each feature block generous breathing room.
- Use product mockups and the teal brand mark as imagery.

## Don't

- Do not introduce a generic blue fintech palette.
- Do not crowd the feature sections with dense card grids.
- Do not make all section backgrounds the same colour.
- Do not use heavy borders to divide every content block.
- Do not let product illustration colours redefine the brand palette.
- Do not use sharp-cornered buttons in place of pill CTAs.

## Agent prompt

Build a new Nuri-style fintech page with a warm, spacious editorial feel. Use Nuri Lavender (#beaaff) for a bold opening or closing panel, Warm Canvas (#fffdf2) as the light base, and Mist Lilac (#f3f0ff), Pale Iris (#ebe3ff), and Peach Veil (#ffe9dd) to alternate feature sections. Set text in Olive Ink (#222013) using a clean system sans-serif, with oversized light headlines and concise supporting copy. Use left-aligned feature splits with a phone-wallet mockup or recurring abstract brand illustration opposite the text. Make primary actions dark, rounded pills, and keep hairlines subtle. Maintain a calm vertical rhythm, generous whitespace, compact navigation, and a restrained footer. Keep cards and shadows secondary to colour bands and clear typography.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed lavender hero with left-aligned headline and signup form; product mockups occupy the opposite side. | Country selection, Mobile signup, Email alternative, Language selection | Lavender canvas, Dark pill CTA, Outlined phone input, Floating navigation |
| 2 | feature-split | Warm-white feature band with copy on the left and wallet phone mockup on the right. | Explain passkey security, Show wallet balances | Warm-white background, Large headline, Phone mockup |
| 3 | feature-split | Mist-lilac band with abstract teal mark on the left and copy on the right. | Introduce buy and swap | Lilac field, Oversized abstract mark, Left-right split |
| 4 | feature-split | Peach band reverses the text-and-illustration split. | Explain sending and receiving | Peach field, Alternating split, Teal illustration |
| 5 | feature-split | Warm-white band with brand mark left and copy right. | List transfer rails | Warm-white field, Large text, Abstract brand mark |
| 6 | feature-split | Soft warm-white band with text left and illustration right. | Explain virtual and physical cards | Warm neutral background, Alternating split, Teal illustration |
| 7 | feature-split | Pale-iris band with brand mark left and text right. | Show supported payment methods | Pale purple field, Large brand illustration, Feature copy |
| 8 | feature-split | Warm-white band with text left and abstract brand mark right. | Explain cash access | Warm neutral field, Alternating split, Illustration |
| 9 | feature-split | Peach feature band with illustration and text in an alternating split. | Clarify privacy, Set service expectations | Peach field, Large heading, Teal brand mark |
| 10 | feature-split | Mist-lilac band with copy left and recurring illustration right. | Offer in-app support, Emphasize private chat | Lilac field, Alternating split, Abstract illustration |
| 11 | integrations | Pale-iris feature split with abstract illustration and multi-line heading. | Connect AI tools, Describe permissioned actions | Pale purple background, Large heading, Illustration |
| 12 | content-feed | Warm-white editorial content section with a compact featured post and image area. | Read product updates, Open featured note | Editorial headline, Featured content card, Subtle border |
| 13 | cta | Lavender full-width CTA followed by a horizontal partner and payment-mark strip. | Open a free account, Show payment support | Lavender panel, Uppercase headline, Dark pill CTA, Logo strip |
| 14 | footer | Dark two-column footer with company information, app badges, navigation, and legal links. | Navigate site, Access app stores, Review legal details | Dark olive surface, Muted light text, Compact link rows |

## Source CSS custom properties (selected)

```css
--nuri-color-gray-1-light: #fcfcfc;
--nuri-color-gray-1-dark: #111111;
--nuri-color-gray-2-light: #f9f9f9;
--nuri-color-gray-2-dark: #191919;
--nuri-color-gray-3-light: #f0f0f0;
--nuri-color-gray-3-dark: #222222;
--nuri-color-gray-4-light: #e8e8e8;
--nuri-color-gray-4-dark: #2a2a2a;
--nuri-color-gray-5-light: #e0e0e0;
--nuri-color-gray-5-dark: #313131;
--nuri-color-gray-6-light: #d9d9d9;
--nuri-color-gray-6-dark: #3a3a3a;
--nuri-color-gray-7-light: #cecece;
--nuri-color-gray-7-dark: #484848;
--nuri-color-gray-8-light: #bbbbbb;
--nuri-color-gray-8-dark: #606060;
--nuri-color-gray-9-light: #8d8d8d;
--nuri-color-gray-9-dark: #6e6e6e;
--nuri-color-gray-10-light: #838383;
--nuri-color-gray-10-dark: #7b7b7b;
--nuri-color-gray-11-light: #646464;
--nuri-color-gray-11-dark: #b4b4b4;
--nuri-color-gray-12-light: #202020;
--nuri-color-gray-12-dark: #eeeeee;
--nuri-color-mauve-1-light: #fdfcfd;
--nuri-color-mauve-1-dark: #121113;
--nuri-color-mauve-2-light: #faf9fb;
--nuri-color-mauve-2-dark: #1a191b;
--nuri-color-mauve-3-light: #f2eff3;
--nuri-color-mauve-3-dark: #232225;
--nuri-color-mauve-4-light: #eae7ec;
--nuri-color-mauve-4-dark: #2b292d;
--nuri-color-mauve-5-light: #e3dfe6;
--nuri-color-mauve-5-dark: #323035;
--nuri-color-mauve-6-light: #dbd8e0;
--nuri-color-mauve-6-dark: #3c393f;
--nuri-color-mauve-7-light: #d0cdd7;
--nuri-color-mauve-7-dark: #49474e;
--nuri-color-mauve-8-light: #bcbac7;
--nuri-color-mauve-8-dark: #625f69;
```

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