Skip to content
DesignMunkDesignMunk Submit a site

Fiber

fiber.so
The private wallet for your stablecoins.
Finance Fintech Next.js Homepage Geist
Share Visit site
fiber.so DESKTOP · 1440
Fiber

AI Breakdown

Design export

---
version: alpha
name: Fiber
description: The private wallet for your stablecoins.
colors:
  primary: "#000000"
  tertiary: "#3f315d"
  neutral: "#ffffff"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Geist
    fontSize: 64px
    fontWeight: 620
    lineHeight: 1.2
    letterSpacing: -0.04em
  headline-md:
    fontFamily: Geist
    fontSize: 49.1px
    fontWeight: 620
    lineHeight: 1.2
    letterSpacing: -0.04em
  headline-sm:
    fontFamily: Geist
    fontSize: 28.4px
    fontWeight: 620
    lineHeight: 1.05
    letterSpacing: -0.03em
  headline-xs:
    fontFamily: Geist
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.22
  body-md:
    fontFamily: Geist
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.009em
rounded:
  full: 9999px
spacing:
  xs: 10px
  sm: 20px
  md: 28px
  lg: 38px
  xl: 96px
components:
  button-primary:
    backgroundColor: "#53575c"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 13.6px 22.4px
    height: 54px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 13.6px 22.4px
    height: 54px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    padding: 5.12px 6.08px 9.92px
---

# Fiber: Privacy-First Wallet With Dot-Grid Hero and Pill CTAs

## Overview

Fiber's UI is direct, technical, and trustworthy: high-contrast black on white, restrained accents, and generous negative space. It speaks to crypto-literate users and fintech newcomers by leaning on plain language, large headlines, and minimal chrome. The page should feel fast, private, and calm—playful elements are avoided in favor of clarity and credibility.

## Colors

- **Primary (#000000):** Deep ink for headlines and core text.
- **Tertiary (#3f315d):** Subtle violet accent for icons, emphasis, and rare link highlights.
- **Neutral (#ffffff):** Base canvas for pages and cards.
- **Surface (#ffffff):** Interchangeable with Neutral for panels and sections.
- **On-surface (#000000):** Default text and icon color on white surfaces.

## Typography

Geist is the sole family across headings and body, available on Google Fonts and safe to load directly. If Geist cannot be used, substitute Inter, Outfit, or Manrope for similar x-height and geometric softness.
- Headline-lg (Geist 64px/1.2, 620, -0.04em): Primary hero statements and marquee numbers.
- Headline-md (Geist 49.1px/1.2, 620, -0.04em): Section intros and promotional callouts.
- Headline-sm (Geist 28.4px/1.05, 620, -0.03em): Feature titles and card headings.
- Headline-xs (Geist 18px/1.22, 600): Minor headings, FAQ triggers.
- Body-md (Geist 17px/1.55, 400, -0.009em): All descriptive copy, bullets, legal, and captions.

## Layout

Spacing is tight-to-generous in a 10/20/28/38/96 rhythm. Use xl (96px) for section boundaries, lg (38px) for stack gaps within sections, md (28px) for card padding groups, sm (20px) for item spacing, and xs (10px) for micro separations. Desktop sections read on a conventional 12-column grid with three-up feature rows; on mobile, stack vertically with lg (38px) gaps.

## Elevation & Depth

Hierarchy is mostly tonal and typographic, with light, realistic shadows when elements need focus. Use sm (rgba(24,26,31,0.18) 0 6.4px 13.6px) for floating controls or sticky CTAs, md (rgb(247,245,251) 0 0 0 4px) as a soft halo/outline on hover or focus, and lg (rgba(20,22,24,0.14) 0 18px 52px) for modals or hero mockups. The inner shadow (rgba(0,0,0,0.14) 0 0 0 1px inset) substitutes for borders on cards and inputs.

## Shapes

Corners are mostly square, with action elements expressed as full pills. The rounded.full value (9999px) is mandatory for primary and secondary CTAs and any segmented controls that should read as tappable chips. Content containers and cards remain rectangular to keep the tone professional.

## Components

Buttons
- Primary: 54px height, #53575c background, #ffffff text, rounded.full (9999px), padding 13.6px 22.4px. Use for the main CTA only.
- Secondary: 54px height, transparent background, #000000 text, rounded.full (9999px), padding 13.6px 22.4px. Use where a supporting action sits beside the primary.
- Link: Text-only, #000000, 0px radius. For inline or muted navigational calls.

Card
- White background (#ffffff), #000000 text, padding 5.12px 6.08px 9.92px. Add inner shadow for subtle separation instead of borders.

### Global App Bar
Sticky top navigation with left-aligned logo, compact links, and a right-aligned primary pill (54px height). Body-md for links; preserve sm (20px) spacing between items.

### Hero Billboard
H1 set in Headline-lg (64px/620/-0.04em) over a dotted field with device mockups. Under the headline, a three-item benefit row uses Body-md and simple check icons. Primary pill CTA centered below, followed by a small metrics line.

### Feature Trio
Three columns highlighting Throwaway addresses, Invisible balances, and Multi-chain support. Each tile uses Headline-sm for the title and Body-md for copy with lg (38px) column gaps.

### Rewards Readout
A white card showing the stablecoin reward with numerical emphasis using Headline-md. Use sm shadow and md (28px) internal spacing.

### Tokenized Stocks Banner
A bold wordmark row (e.g., "SpaceX.Tesla.Nvidia") paired with a short paragraph and a primary or secondary CTA. Keep generous xl (96px) vertical breathing room.

### FAQ Accordion
Triggers in Headline-xs (18px/600). Answers in Body-md. No hard borders; rely on spacing and the inner shadow for section delineation.

### Closing CTA + Store Badges
A final persuasion block with a count-based headline and the recurring primary pill, followed by Android badge and iOS status text.

## Do's and Don'ts

- Do use #000000 for all primary text and headings on #ffffff; reserve #3f315d for subtle accents only.
- Do keep CTAs as full pills at 54px height; pair primary and secondary only when two adjacent actions are required.
- Do separate sections with xl (96px) vertical space and avoid heavy borders—use the provided shadows.
- Don't introduce new brand colors or gradients; the palette is intentionally minimal.
- Don't round corners on content cards; rounded.full is for interactive elements.
- Don't over-style numbers—use the headline tokens and consistent letter-spacing for large numerals and counters.

## Agent Prompt Guide

Quick reference
- Text: #000000
- Background: #ffffff
- Border/separator: use inner shadow rgba(0,0,0,0.14) 0 0 0 1px inset in place of a solid border
- Accent: #3f315d

1) Build the hero
"Create a full-width hero on #ffffff with a subtle dotted background image. Center an H1 set in Geist, 64px, weight 620, line-height 1.2, letter-spacing -0.04em, color #000000. Below it, add a three-item bullet row in Geist 17px/1.55, color #000000. Place a primary pill button 54px tall with background #53575c and text #ffffff; padding 13.6px 22.4px; radius 9999px. Add a light sm shadow (rgba(24,26,31,0.18) 0 6.4px 13.6px). Vertical spacing: 96px top and bottom."

2) Three-up features
"Insert a section on #ffffff with an intro line in Geist 49.1px, 620. Below, render three equal columns. Each card: title in Geist 28.4px, 620; copy in Geist 17px/1.55; internal spacing 28px; gap between columns 38px. Use inner shadow rgba(0,0,0,0.14) 0 0 0 1px inset for separation; no borders."

3) Rewards readout module
"Add a white card (#ffffff) with lg (38px) outer margin and md (28px) internal padding. Show a large number in Geist 49.1px, 620, color #000000 with the label in Geist 17px. Apply sm shadow rgba(24,26,31,0.18) 0 6.4px 13.6px; keep corners square."

4) FAQ accordion
"Create an FAQ list on #ffffff. Each question: Geist 18px, 600; answer: Geist 17px/1.55. Use 20px gaps between items, 38px between groups. No solid borders; use inner shadow inset for the container. Add a concluding primary pill button 54px tall (background #53575c, text #ffffff, radius 9999px)."

## Similar Brands

- Coinbase: similarly high-contrast and type-forward; Coinbase leans into blue gradients and heavier illustration where Fiber stays stark and minimal.
- Mercury: black-and-white fintech with pill CTAs; Mercury uses more photographic texture and brand orange accents.
- Brex: crisp monochrome base and bold type; Brex adds warm gradients and denser shadows for drama.
- Circle: clean finance UI with restrained geometry; Circle's green brand color is more present throughout flows than Fiber's tertiary accent.

More like this

Browse Finance →
privy.io
Privy Developer Tools
Privy
Build products that hold, move, and grow digital assets.
Homepage · 15 hours ago
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 3 days ago
finera.com
Finera Finance
Finera
The Art of Payments.
Homepage · 5 days ago
helloaria.eu
Aria Finance
Aria
Aria makes late payment irrelevant in B2B
Homepage · 7 days ago