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

# Idle Finance · Design System

> Deep navy, luminous gradients, clear yield signals

**Theme:** dark · **Industry:** crypto · **Source:** https://idle.finance/ · **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._

Idle Finance pairs a deep navy canvas with vivid blue and cyan light to present DeFi yield products with a polished, technical feel. Compact data cards and restrained navigation sit within a spacious, atmospheric page.

## North star

Keep the page grounded in deep navy, then use restrained cyan-blue glow and crisp white type to make yield information immediately legible.

## Overview

The visual system is anchored by a near-black navy canvas (#081336), which occupies most of the page and lets the luminous blue gradients read as ambient light rather than decorative blocks. White is reserved for high-priority headings, navigation, and bright CTA surfaces; muted gray supports explanatory copy and secondary metrics. Cyan highlights links and selected words, while green-to-cyan and blue gradients appear as localized glow fields. Source Sans Pro handles compact interface and body copy, with Open Sans used for prominent headings; both use mostly semibold or bold weights. The hero centers its headline above a row of dark yield cards, while partner marks, ecosystem tiles, security panels, and footer content form distinct horizontal groupings further down. Cards use a slightly lighter blue-gray surface and rounded corners to separate content without heavy elevation. Large areas of negative space preserve contrast and make the gradual background glow feel atmospheric. Illustration colors and token marks are supporting content, not the primary brand palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Signal White | `#ffffff` | `--color-signal-white` | neutral | Primary headings and text, nav labels, footer surface, and high-contrast CTA backgrounds. |
| Midnight Navy | `#081336` | `--color-midnight-navy` | brand | Dominant page canvas and navigation backdrop; grounds the blue glow and keeps the interface dark. |
| Slate Panel | `#17202e` | `--color-slate-panel` | surface | Raised yield and security cards, providing a quiet blue-gray contrast against the navy canvas. |
| Graphite Rule | `#595959` | `--color-graphite-rule` | semantic | Subtle section and structural hairlines; avoid using as a large surface. |
| Deep Cobalt | `#08218f` | `--color-deep-cobalt` | accent | Inner color of the broad blue radial glow, especially around the hero and section edges. |
| Current Blue | `#298acb` | `--color-current-blue` | accent | Outer blue of the radial glow and a supporting color in navigation-area gradients. |
| Cool Mist | `#cdd0d6` | `--color-cool-mist` | neutral | Muted body copy, card descriptions, and secondary labels against dark surfaces. |
| Glacier Cyan | `#6ae4ff` | `--color-glacier-cyan` | accent | Emphasized links and occasional highlighted text, including the bright edge of the brand's cool palette. |
| True Black | `#000000` | `--color-true-black` | semantic | Appears mainly in button or inverse-text readings and small interface details; not a defining page surface. |
| Blue Charcoal | `#202a3e` | `--color-blue-charcoal` | surface | Secondary link tiles and compact supporting panels, slightly distinct from the main card surface. |
| Footer Indigo | `#182243` | `--color-footer-indigo` | surface | Subtle footer-area border or tonal separation visible in measured data. |
| Mint Beam | `#34edb3` | `--color-mint-beam` | accent | Green end of a localized green-to-cyan gradient; use as glow or highlighted illustration color, not a broad fill. |
| Electric Aqua | `#00d1ff` | `--color-electric-aqua` | accent | Cyan end of the localized mint-to-cyan gradient, appearing in luminous effects and supporting visuals. |

### Semantic aliases

`--color-canvas` → `#081336` (Midnight Navy) · `--color-surface` → `#17202e` (Slate Panel) · `--color-surface-2` → `#ffffff` (Signal White) · `--color-surface-3` → `#202a3e` (Blue Charcoal) · `--color-text` → `#ffffff` (Signal White) · `--color-text-muted` → `#cdd0d6` (Cool Mist) · `--color-text-subtle` → `#000000` (True Black) · `--color-border` → `#595959` (Graphite Rule) · `--color-accent` → `#08218f` (Deep Cobalt) · `--color-accent-2` → `#298acb` (Current Blue) · `--color-accent-3` → `#6ae4ff` (Glacier Cyan)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#081336` | 18.15:1 | AAA |
| `#ffffff` | `#17202e` | 16.37:1 | AAA |
| `#ffffff` | `#202a3e` | 14.36:1 | AAA |
| `#cdd0d6` | `#081336` | 11.75:1 | AAA |
| `#cdd0d6` | `#17202e` | 10.6:1 | AAA |
| `#cdd0d6` | `#ffffff` | 1.55:1 | fail |
| `#cdd0d6` | `#202a3e` | 9.29:1 | AAA |
| `#000000` | `#081336` | 1.16:1 | fail |
| `#000000` | `#17202e` | 1.28:1 | fail |
| `#000000` | `#ffffff` | 21:1 | AAA |

### Gradients

- `radial-gradient(circle, rgb(8, 33, 143) 40%, rgb(41, 138, 203) 100%)`
- `linear-gradient(73.6deg, rgb(52, 237, 179) 2.11%, rgb(0, 209, 255))`
- `linear-gradient(90deg, rgb(45, 55, 72), rgb(74, 85, 104), rgb(113, 128, 150), rgb(74, 85, 104))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Source Sans Pro | `--font-body` | webfont | 400, 600, 500, 700 | Body copy, navigation, links, buttons, captions, and compact interface labels. | Source Sans 3 |
| Open Sans | `--font-display` | webfont | 600, 700 | Headings and prominent explanatory or display copy. | Open Sans |
| -apple-system | `--font-apple-system` | system | 700 | Oversized display role in the measured type system; use sparingly for exceptional display numerals or emphasis. | Inter |

- **Source Sans Pro:** Use measured 400–700 weights, primarily 600 for interface text; compact tracking and sentence case keep labels crisp.
- **Open Sans:** Use 600 for the main heading and 700 for secondary headings; tight negative tracking on larger heading roles.
- **-apple-system:** Measured at bold weight; the screenshot's prominent headline reads as clean sans-serif rather than a distinct display face.

### Type scale — Augmented Fourth (ratio ≈ 1.443, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 100px | 700 | 1 | 0 | — | -apple-system | Oversized display emphasis or exceptional headline treatment. |
| h1 | 56px | 600 | 1.43 | -0.036em | — | Open Sans | Main hero headline, centered above yield cards. |
| h2 | 36px | 700 | 1.33 | -0.028em | — | Open Sans | Major section headings, including ecosystem and security sections. |
| h3 | 28px | 700 | 1.57 | 0 | — | Open Sans | Card and feature headings. |
| h4 | 20px | 600 | 1.6 | -0.05em | — | Open Sans | Smaller card titles and subsection labels. |
| body | 16px | 600 | 1.5 | -0.062em | — | Source Sans Pro | Descriptions, explanatory copy, and supporting text. |
| caption | 15px | 500 | 2.13 | -0.067em | — | Source Sans Pro | Compact card metadata, labels, and secondary notes. |
| button | 16px | 600 | 1.5 | -0.062em | — | Source Sans Pro | CTA and tab labels. |
| nav | 16px | 600 | 1.5 | -0.062em | — | Source Sans Pro | Header navigation labels. |
| link | 16px | 600 | 1.5 | -0.062em | — | Source Sans Pro | Interactive links and linked partner or product names. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 5, 6, 8, 10, 12, 16, 20, 24, 28, 29, 30, 31, 50 px.
- Section rhythm 50px · element gap 8px · card padding 61px · max content width 1110px.

Use a centered content area capped at the measured 1110px maximum width, with a comfortable density and clear horizontal groupings. The opening hero centers its headline above three yield cards; lower content alternates between logo or protocol tiles and paired security panels. Preserve the measured 50-unit section rhythm and 8-unit element rhythm rather than crowding blocks together. Keep headings centered where they introduce a broad section, while card content remains left-aligned. Wide areas of dark canvas are intentional, balancing compact data and maintaining a calm, premium feel.

## Shape & elevation

- Radius: button `50%` · card `15px` · link `8px` · xs `4px` · sm `6px` · md `8px` · lg `15px` · xl `16px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s cubic-bezier(0.17, 0.17, 0.24, 1)` on interactive elements.

The interface is mostly flat: darker canvas, slightly lighter card surfaces, and restrained hairlines provide the hierarchy. Cards are visibly layered through surface contrast and measured rounded corners rather than strong shadows. Use gradients as background atmosphere, not as an elevation effect, and keep button treatment simple and sharply legible.

## Imagery

The page relies more on luminous background treatment, protocol marks, and small product visuals than on photography. Use broad, soft blue radial glows fading into navy, with restrained cyan or mint highlights. Keep logos and token marks contained within cards or tiles; the small illustrated security object can be rendered as a contained 3D-style image. Avoid letting colorful mock-up details redefine the site palette.

## Components

### Announcement and navigation

A slim gradient announcement band sits above a dark navy navigation row; white nav labels and a white Enter App CTA are clearly separated.

### Hero yield cards

Three compact #17202e cards sit beneath a centered headline, each presenting a protocol name, short descriptor, APY, TVL, token marks, and a circular arrow.

### Protocol selector

A small set of pill-like tabs introduces the ecosystem area, followed by dark rectangular partner tiles with centered marks and names.

### Security panels

Paired blue-gray rounded cards combine audit list content and a bug-bounty feature with an illustration, supporting copy, and a compact CTA.

### Footer and newsletter

A dark footer groups the brand and email signup alongside several compact link columns; subtle blue glow remains behind the layout.

### Primary CTA

Use a white button surface with dark readable label for actions such as Enter App; keep padding generous and treatment unembellished.

### Measured component styles

- **Primary button** (“Enter App”): background #ffffff · text #6ae4ff · radius 4px · padding 10px 24px · 400 99.9999px Open Sans
- **Link** (“Fasanara Investments Institutional Credi”): background #202a3e · text #6ae4ff · radius 16px · padding 12px · 400 99.9999px Open Sans
- **Input**: transparent background · text #ffffff · radius 0px · padding 1px 2px · 400 14px Open Sans
- **Card** (“Security audits Performed by world-leadi”): background #17202e · text #000000 · radius 15px · padding 66px 55px · 400 99.9999px Open Sans
- **Navigation item** (“Analytics Docs Governance Partners Secur”): transparent background · text #000000 · radius 0px · padding 0px · 400 99.9999px Open Sans

## Do

- Use #081336 as the dominant canvas.
- Keep bright blue glow localized and atmospheric.
- Set major headings in Open Sans with strong weight.
- Use Source Sans Pro for navigation and interface copy.
- Separate cards with #17202e or #202a3e surfaces.
- Reserve #6ae4ff for links and selective emphasis.
- Leave ample dark negative space around content groups.

## Don't

- Do not replace the dark canvas with large white sections.
- Do not apply gradients to every card or button.
- Do not use mint or aqua as broad page backgrounds.
- Do not crowd the centered hero or card groups.
- Do not rely on heavy shadows for card hierarchy.
- Do not treat illustration colors as the core brand palette.
- Do not use low-contrast gray for primary actions or headings.

## Agent prompt

Build a new page in Idle Finance's visual style: use Midnight Navy (#081336) as the primary canvas and let spacious dark areas frame the content. Add restrained Deep Cobalt (#08218f) and Current Blue (#298acb) radial glow as atmospheric background light, with Glacier Cyan (#6ae4ff) reserved for links and selective emphasis. Use Signal White (#ffffff) for headings and key labels, Cool Mist (#cdd0d6) for secondary copy, and Slate Panel (#17202e) or Blue Charcoal (#202a3e) for cards. Set major headings in Open Sans and interface text in Source Sans Pro. Center broad section introductions, keep card content orderly and left-aligned, and preserve comfortable gaps between groups. Prefer surface contrast and subtle hairlines over shadows; keep CTAs simple, high-contrast, and easy to scan.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Single full-length dark canvas with centered hero content and vertically grouped cards, partner tiles, security panels, and footer. | clear primary CTA, yield data scanning, grouped navigation | navy canvas, blue radial glow, rounded dark cards, cyan highlights |

## Source CSS custom properties (selected)

```css
--main-font: "Open Sans",sans-serif;
--sub-font: "Source Sans Pro",sans-serif;
--font-size-h1: .72rem;
--font-size-h2: .36rem;
--font-size-h3: .28rem;
--font-size-h4: .2rem;
--font-size-sub-1: .16rem;
--font-size-sub-2: .14rem;
--font-size-sub-3: .12rem;
--font-size-sub-4: .12rem;
--font-size-desc1: .24rem;
--font-size-desc2: .16rem;
--font-size-desc3: .14rem;
--font-size-desc-large: .2rem;
--font-size-btn-label1: .16rem;
--font-size-btn-label2: .14rem;
--font-size-label1: .16rem;
--font-size-label2: .16rem;
--font-size-label3: .14rem;
--font-size-value1: .54rem;
--font-size-value2: .28rem;
--font-size-tab-desc1: .14rem;
--font-weight-1: 100;
--font-weight-2: 200;
--font-weight-3: 300;
--font-weight-4: 400;
--font-weight-5: 500;
--font-weight-6: 600;
--font-weight-7: 700;
--letter-spacing: normal;
--letter-spacing-0: 0;
--letter-spacing-1: -1%;
--letter-spacing-2: -2%;
--letter-spacing-3: -.02rem;
--font-no-script: "Open Sans",sans-serif;
--font-size-title-ns: .43rem;
--font-size-subtitle-ns: .2rem;
--font-size-desc-ns: .16rem;
--letter-spacing-title-ns: -.006rem;
--letter-spacing-subtitle-ns: -.002rem;
```

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