Bitcoin DeFi (Mobile)

ui-ux-pro-maxMITFinance · financeMobile app · mobile-appGlassmorphism · glassmorphismGradient · gradientProfessional · professionalLuxury · luxuryDark · darkHigh (data-dense) · highOrange · orangeVivid · vividSerif · serif

Bitcoin DeFi (Mobile). Best for DeFi dashboards, wallets, NFT marketplaces, Web3 social, metaverse utilities, high-tech fintech brands.

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"Bitcoin DeFi (Mobile)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#bitcoin-defi-mobile @ 28b3b8dee8c9.

https://github.com/nextlevelbuilder/ui-ux-pro-max-skill · src/ui-ux-pro-max/data/styles.csv#bitcoin-defi-mobile · 28b3b8dee8c9 · © Next Level Builder

Do

Void/dark-matter palette applied
☐ Bitcoin orange/gold gradient buttons
☐ BlurView nav implemented
☐ Monospace for numeric data
☐ Hairline borders on blocks
☐ Gradient text on balances

Don't

Playful casual apps
low-tech brands
ultra-minimal editorial apps

Prompt

Design a Bitcoin DeFi (Mobile) mobile interface using web3, bitcoin, defi, digital gold, fintech, wallet, orange, glassmorphism. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.

---
"Bitcoin DeFi (Mobile)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#bitcoin-defi-mobile @ 28b3b8dee8c9.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Bitcoin DeFi (Mobile). \"Bitcoin DeFi (Mobile)\" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#bitcoin-defi-mobile @ 28b3b8dee8c9.",
  "$extensions": {
    "dev.styledex": {
      "id": "uupm-bitcoin-defi-mobile",
      "license": "MIT",
      "attribution": "\"Bitcoin DeFi (Mobile)\" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#bitcoin-defi-mobile @ 28b3b8dee8c9.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "foreground": {
      "$type": "color",
      "$value": "#030304"
    },
    "card": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#030304"
    },
    "primary": {
      "$type": "color",
      "$value": "#f7931a"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#ea580c"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#030304"
    },
    "accent": {
      "$type": "color",
      "$value": "#ea580c"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#f0f0f0"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#5b5b5c"
    },
    "border": {
      "$type": "color",
      "$value": "#dbdbdb"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#f7931a"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Bitcoin DeFi (Mobile)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#bitcoin-defi-mobile @ 28b3b8dee8c9. */
:root {
  --background: #ffffff;
  --foreground: #030304;
  --card: #ffffff;
  --card-foreground: #030304;
  --primary: #f7931a;
  --primary-foreground: #fafaf9;
  --secondary: #ea580c;
  --secondary-foreground: #030304;
  --accent: #ea580c;
  --accent-foreground: #fafaf9;
  --muted: #f0f0f0;
  --muted-foreground: #5b5b5c;
  --border: #dbdbdb;
  --destructive: #dc2626;
  --ring: #f7931a;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Bitcoin DeFi (Mobile)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#bitcoin-defi-mobile @ 28b3b8dee8c9. */
/** Tailwind theme extend for Bitcoin DeFi (Mobile) (uupm-bitcoin-defi-mobile) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#ffffff",
        "foreground": "#030304",
        "card": "#ffffff",
        "primary": "#f7931a",
        "primary-foreground": "#fafaf9",
        "secondary": "#ea580c",
        "accent": "#ea580c",
        "muted": "#f0f0f0",
        "border": "#dbdbdb",
        "destructive": "#dc2626",
        "ring": "#f7931a"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Bitcoin DeFi (Mobile)" from https://github.com/nextlevelbuilder/ui-ux-pro-max-skill (MIT). © Next Level Builder. src/ui-ux-pro-max/data/styles.csv#bitcoin-defi-mobile @ 28b3b8dee8c9. */
@layer base {
:root {
  --background: #ffffff;
  --foreground: #030304;
  --card: #ffffff;
  --card-foreground: #030304;
  --primary: #f7931a;
  --primary-foreground: #fafaf9;
  --secondary: #ea580c;
  --secondary-foreground: #030304;
  --accent: #ea580c;
  --accent-foreground: #fafaf9;
  --muted: #f0f0f0;
  --muted-foreground: #5b5b5c;
  --border: #dbdbdb;
  --destructive: #dc2626;
  --ring: #f7931a;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}