Bitcoin DeFi

Also called: Crypto dark, DeFi dashboard style, Web3 gold

Bitcoin orange on deep warm black: glowing gold numbers, coin-shaped icons, candlestick charts and trust badges everywhere.

“Digital gold”Futuristic & TechEra: 2017 → todayTechyBoldLuxuryTrustworthy

Open full screen ↗

bitcoin-defi / landingEN

bitcoin-defi / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm8pxRadius md12pxRadius lg18pxRadius xl26pxDensity×1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Dark

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

bitcoin orange #F7931Adeep warm blackglowing gold numberscoin medallion iconscandlestick chartsprice ticker stripgreen/red deltastrust & audit badgestabular mono figures

Bitcoin DeFi dresses a product as “digital gold”. The canvas is a warm near-black with a faint ledger grid and an orange glow behind the hero; every figure is set in a tabular mono with a gold gradient and a soft orange halo, because the numbers are the hero. Icons sit in round coin medallions, charts are dense (area lines, candlesticks, donuts) with green/red deltas, and audit, custody and uptime badges sit next to every money action to buy trust.

Best for

Crypto wallets, exchanges and staking apps
DeFi protocol landing pages
Trading and portfolio dashboards
Fintech products targeting crypto-native users

Avoid for

Traditional banks that need calm, conservative trust
Healthcare, education or kids products
Content-first editorial sites

✓ Do

Keep #F7931A for money actions and key figures only; everything else is warm grey on #0A0908
Set all figures in a tabular mono with a gold gradient and 18–24px orange glow
Put a trust badge (audited, non-custodial, uptime) beside every deposit or swap action

✕ Don't

Don’t mix in neon purple/cyan — that drifts into Cyberpunk or generic Web3
Don’t use orange for body text or large surfaces
Don’t show deltas without green/red and an arrow

Not to be confused with

Financial Dashboard →Financial Dashboard is neutral, light and conservative; Bitcoin DeFi is black and orange with glowing gold numbers and crypto trust badges.Cyberpunk UI →Cyberpunk is neon magenta/cyan with glitch and chamfers; Bitcoin DeFi is a single warm orange-gold on black, polished and rounded.Dark Mode (OLED) →OLED dark mode is neutral true-black with desaturated accents; Bitcoin DeFi is warm black built around one saturated brand orange and glowing figures.

On mobile

Lead with a gold balance card and a big glowing figure; keep the orange glow to that card and the primary button, use a floating dark tab bar with an orange active coin, and show deltas as green/red pills.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinSora · 600/700

The quick brown fox

Heading · ThaiK2D · 600/700

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinManrope · 400/500/600/700

Clear words make shared decisions.

Body · ThaiK2D · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

K2D is a loopless geometric Thai with a techno twist that matches Sora’s wide, engineered letterforms and Manrope’s modern body.

Colour palette

Design tokens

Radius	`sm 8px · md 12px · lg 18px · xl 26px · pill 999px`
Border	`1px`
Shadow	`0 1px 0 rgba(255,255,255,0.05) inset, 0 16px 40px rgba(0,0,0,0.55)`
Display	`clamp(2.8rem, 6vw, 5rem)`
Motion	`200ms cubic-bezier(.2,.8,.2,1)`
Density	`×1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Bitcoin DeFi (bitcoin-defi) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Only a dark mode: its colours sit on :root.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&family=K2D:wght@400;500;600;700&display=swap
 */
:root {
  --radius: 18px;
  --background: #0A0908;
  --foreground: #F6F1E9;
  --card: #14110E;
  --card-foreground: #F6F1E9;
  --popover: #14110E;
  --popover-foreground: #F6F1E9;
  --primary: #F7931A;
  --primary-foreground: #140A00;
  --secondary: #FFD27A;
  --secondary-foreground: #1A1206;
  --muted: #1C1814;
  --muted-foreground: #A69E92;
  --accent: #1C1814;
  --accent-foreground: #F6F1E9;
  --destructive: #F0525C;
  --border: #2B251D;
  --input: #2B251D;
  --ring: #F7931A;
  --chart-1: #F7931A;
  --chart-2: #FFD27A;
  --chart-3: #16C784;
  --chart-4: #8E8A99;
  --chart-5: #EDE6DA;
  --sidebar: #14110E;
  --sidebar-foreground: #F6F1E9;
  --sidebar-primary: #F7931A;
  --sidebar-primary-foreground: #140A00;
  --sidebar-accent: #1C1814;
  --sidebar-accent-foreground: #F6F1E9;
  --sidebar-border: #2B251D;
  --sidebar-ring: #F7931A;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Bitcoin DeFi (bitcoin-defi) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Only a dark mode: its colours sit on :root.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&family=K2D:wght@400;500;600;700&display=swap
 */
@theme {
  --color-bg: #0A0908;
  --color-surface: #14110E;
  --color-surface-2: #1C1814;
  --color-text: #F6F1E9;
  --color-text-muted: #A69E92;
  --color-primary: #F7931A;
  --color-on-primary: #140A00;
  --color-secondary: #FFD27A;
  --color-on-secondary: #1A1206;
  --color-accent: #16C784;
  --color-border: #2B251D;
  --color-success: #16C784;
  --color-warning: #F3BA2F;
  --color-danger: #F0525C;
  --color-chart-1: #F7931A;
  --color-chart-2: #FFD27A;
  --color-chart-3: #16C784;
  --color-chart-4: #8E8A99;
  --color-chart-5: #EDE6DA;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 0 rgba(255,255,255,0.04) inset, 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 1px 0 rgba(255,255,255,0.05) inset, 0 16px 40px rgba(0,0,0,0.55);
  --shadow-lg: 0 0 0 1px rgba(247,147,26,0.25), 0 0 60px rgba(247,147,26,0.18), 0 30px 70px rgba(0,0,0,0.6);
  --font-heading: "Sora", "K2D", system-ui, sans-serif;
  --font-body: "Manrope", "K2D", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "K2D", monospace;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Bitcoin DeFi (bitcoin-defi). Default mode: dark. Fonts: https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&family=K2D:wght@400;500;600;700&display=swap",
  "color": {
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.0353,
            0.0314
          ],
          "hex": "#0a0908"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0667,
            0.0549
          ],
          "hex": "#14110e"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.0941,
            0.0784
          ],
          "hex": "#1c1814"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9451,
            0.9137
          ],
          "hex": "#f6f1e9"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.651,
            0.6196,
            0.5725
          ],
          "hex": "#a69e92"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9686,
            0.5765,
            0.102
          ],
          "hex": "#f7931a"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0392,
            0
          ],
          "hex": "#140a00"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8235,
            0.4784
          ],
          "hex": "#ffd27a"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.0706,
            0.0235
          ],
          "hex": "#1a1206"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.7804,
            0.5176
          ],
          "hex": "#16c784"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.1451,
            0.1137
          ],
          "hex": "#2b251d"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.7804,
            0.5176
          ],
          "hex": "#16c784"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.7294,
            0.1843
          ],
          "hex": "#f3ba2f"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.3216,
            0.3608
          ],
          "hex": "#f0525c"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9686,
            0.5765,
            0.102
          ],
          "hex": "#f7931a"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8235,
            0.4784
          ],
          "hex": "#ffd27a"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.7804,
            0.5176
          ],
          "hex": "#16c784"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5569,
            0.5412,
            0.6
          ],
          "hex": "#8e8a99"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9294,
            0.902,
            0.8549
          ],
          "hex": "#ede6da"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 18,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 26,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "hex": "#ffffff",
            "alpha": 0.04
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.4
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 8,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "hex": "#ffffff",
            "alpha": 0.05
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.55
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 16,
            "unit": "px"
          },
          "blur": {
            "value": 40,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.9686,
              0.5765,
              0.102
            ],
            "hex": "#f7931a",
            "alpha": 0.25
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 1,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.9686,
              0.5765,
              0.102
            ],
            "hex": "#f7931a",
            "alpha": 0.18
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 0,
            "unit": "px"
          },
          "blur": {
            "value": 60,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0,
              0,
              0
            ],
            "hex": "#000000",
            "alpha": 0.6
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 30,
            "unit": "px"
          },
          "blur": {
            "value": 70,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Sora",
        "K2D",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Manrope",
        "K2D",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "JetBrains Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "K2D",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 200,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.2,
      0.8,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 1
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!