# Bitcoin DeFi

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

- Nickname: Digital gold
- Also called: Crypto dark, DeFi dashboard style, Web3 gold
- Category: Futuristic & Tech
- Moods: Techy, Bold, Luxury, Trustworthy
- Industries: Web3 & Crypto, Fintech & Banking, Startup & Tech, Gaming
- Style page: https://uilingo.dev/styles/bitcoin-defi/

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

## Audit
Passed after 1 round · builder unknown · auditor unknown

## Prompt
Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, dark mode. For another page, stack, language or mode, use the prompt builder on the style page.

```markdown
# Build a landing web page in the "Bitcoin DeFi" UI style

Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: dark

## The style in one line
Bitcoin orange on deep warm black: glowing gold numbers, coin-shaped icons, candlestick charts and trust badges everywhere.
Design keywords: bitcoin orange #F7931A, deep warm black, glowing gold numbers, coin medallion icons, candlestick charts, price ticker strip, green/red deltas, trust & audit badges, tabular mono figures.

## Visual language
Digital gold. A warm near-black canvas (#0A0908) with a faint orange ledger grid and a bitcoin-orange glow bleeding in from the top corner; everything else is warm grey, so the single brand orange (#F7931A) reads as value. Numbers are the hero: every balance, price and KPI is set in a tabular mono with a cream-to-orange gradient and a soft orange halo. Icons sit in round, embossed coin medallions, charts are dense (glowing area lines, candlesticks, donuts) with green/red deltas, and trust badges — audited, non-custodial, uptime — sit next to every money action. Polished, confident, crypto-native.

## Signature details (must be visible)
- Canvas: #0A0908 with radial-gradient(42% 38% at 78% 8%, rgba(247,147,26,.22), transparent) and a 56px grid of rgba(247,147,26,.045) hairlines
- Glowing figures: JetBrains Mono 700, background linear-gradient(180deg, #FFE7B8, #FFC266 45%, #F7931A) clipped to text, filter drop-shadow(0 0 16px rgba(247,147,26,.35))
- Coin medallion icons: 40–44px circles, radial-gradient(circle at 35% 30%, #FFD27A, #F7931A 58%, #A85808) with inset rings and a 18px orange glow; dark icon on top
- Primary button: vertical gradient #FFAA45 → #F7931A → #E07F0B, near-black #140A00 label, inset top highlight and 0 8px 26px rgba(247,147,26,.35) glow
- Cards: gradient #17130F → #110E0B with 1px #2B251D border; hover border turns rgba(247,147,26,.45) with an orange outer glow
- Candlestick bars: thin green #16C784 / red #F0525C bodies with a 1.5px wick above and below
- Price-ticker strip: a full-width bordered row of names with ▲/▼ percentage changes in green/red mono
- Featured / highlight card = 'gold bar': radial-gradient(#FFD27A → #F7931A → #C76A06) with dark text and a large faint ₿ watermark

## Design tokens — use these exact values
Colours (dark mode):
  - background #0A0908
  - surface #14110E
  - surface-2 #1C1814
  - text #F6F1E9
  - text-muted #A69E92
  - primary #F7931A (text on it #140A00)
  - secondary #FFD27A (text on it #1A1206)
  - accent #16C784
  - border #2B251D
  - success #16C784 · warning #F3BA2F · danger #F0525C
  - chart series #F7931A, #FFD27A, #16C784, #8E8A99, #EDE6DA
Radius: sm 8px, md 12px, lg 18px, xl 26px, pill 999px
Border width: 1px
Shadows: sm `0 1px 0 rgba(255,255,255,0.04) inset, 0 2px 8px rgba(0,0,0,0.4)`, md `0 1px 0 rgba(255,255,255,0.05) inset, 0 16px 40px rgba(0,0,0,0.55)`, 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)` (where shadows reference var(--c-border) use the border colour)
Spacing: 8px base unit × 1 density
Motion: 200ms cubic-bezier(.2,.8,.2,1)

## Typography (Latin + Thai)
- Headings: Sora 600/700 with Thai fallback K2D 600/700
- Body: Manrope 400/500/600/700 with Thai fallback K2D 400/500/600
- Mono: JetBrains Mono
- Google Fonts URL: 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
- CSS stacks: heading `"Sora", "K2D", system-ui, sans-serif`; body `"Manrope", "K2D", system-ui, sans-serif`; mono `"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "K2D", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to K2D — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face.
- Display size clamp(2.8rem, 6vw, 5rem), heading weight 700, heading tracking -0.03em (Latin only), uppercase small labels (Latin only).
- Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side.
- Why this pairing: K2D is a loopless geometric Thai with a techno twist that matches Sora’s wide, engineered letterforms and Manrope’s modern body.

## Components
- Eyebrow: pill with 1px orange 40% border, orange 8% fill, mono caps label and a glowing orange ₿ coin at the start
- Secondary button: transparent with #2B251D border; hover = orange border + 8% orange fill
- Inputs: #0E0C0A fill, 12px radius, warm border; focus = orange border, 3px rgba(247,147,26,.18) ring and soft glow
- Delta pills: mono, 8px radius, green #3EDDA0 on rgba(22,199,132,.12) or red #FF7A82 on rgba(240,82,92,.12), always with an arrow
- Status badges: tinted mono labels with matching 30% borders; solid badge = orange with dark text
- Trust badges: orange-outlined pills with a glowing filled shield/check icon circle
- Sidebar: #0C0A08 with the active item as an orange-to-transparent gradient bar and a 2px orange left edge
- Charts: orange primary area line with drop-shadow glow and a warm gradient area, grey dashed comparison line, dashed #2B251D grid, glowing donut
- Tables: mono numbers, warm hairline rows, faint orange hover tint
- Switch on = solid orange with glow; progress = dark-orange → orange → gold gradient bar with glow

## Layout for this web page
Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer.
Hero: two columns — copy left, product visual right. Navigation: split style. Sections in order: hero → logos → stats → features → trust → showcase → pricing → faq → cta. Feature section as bento.
Landing: split hero with a large white-to-cream headline and a glowing chart/balance mock on the right over an orange halo; directly under it a price-ticker strip; then big bordered stat tiles with glowing figures, a bento feature grid led by a gold-bar card, a row of trust badges, a showcase, pricing (gold-bar featured plan), FAQ and an orange-glow CTA. Dashboard: dark sidebar, KPI cards with gold figures and delta pills, then a chart-heavy grid — area line + candlesticks, forecast + donut, transactions table + activity.

## Content
Use realistic product copy (fictional brand) suited to: Crypto wallets, exchanges and staking apps. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match.

## 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
- Purple, cyan or neon multi-colour gradients — it turns into generic Web3/Cyberpunk
- Orange body text or large flat orange surfaces outside the featured card
- Cold blue-black backgrounds; the black must stay warm
- Figures in a proportional font or without tabular numbers
- Deltas without green/red and an arrow
- Money actions without a nearby trust signal

## Stack notes
One self-contained HTML file with a <style> block. Declare all tokens as CSS custom properties on :root and build every component from them. No frameworks.

## Acceptance checklist
- Someone who knows the "Bitcoin DeFi" style recognises it at a glance from the signature details.
- Every colour, radius, border and shadow comes from the tokens above.
- Thai and English text both render in their intended fonts with comfortable line-height.
- Text contrast meets WCAG AA (4.5:1 body, 3:1 large text) unless the style explicitly trades this off.
- Interactive elements have hover, focus-visible and pressed states in the style's language.
```