Skip to content
DesignMunkDesignMunk Submit a site

Cashbee

cashbee.fr
Votre argent vaut plus
Finance Fintech Webflow Homepage Gt Zirkon Full
Share Visit site
cashbee.fr DESKTOP · 1440
Cashbee

AI Breakdown

Design export

---
version: alpha
name: Cashbee
description: Votre argent vaut plus
colors:
  primary: "#333333"
  secondary: "#040404"
  tertiary: "#e1cb60"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-deep-daishin-yellow: "#efca05"
  brand-spicy-mustard: "#7c6416"
  brand-night-brown-black: "#322f23"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Gt Zirkon Full
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.047em
  headline-md:
    fontFamily: Gt Zirkon Full
    fontSize: 45px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.022em
  headline-sm:
    fontFamily: Arial
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.2
  headline-xs:
    fontFamily: Arial
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.22
  body-md:
    fontFamily: Gt Zirkon Full
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.46
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 24px
  lg: 40px
  xl: 72px
components:
  button-primary:
    backgroundColor: "#000003"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    height: 57px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    height: 57px
  button-link:
    textColor: "#000003"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Cashbee: Mustard CTAs and calm, bookish finance layout

## Overview

Cashbee speaks to retail savers and SME operators who value clarity and safety. The tone is serious, efficient, and reassuring rather than playful. Layouts are spacious with generous white surfaces, left-aligned type, and concise copy. Color is restrained; mustard accents flag actions, offers, and alerts.

## Colors

- **primary (#333333):** Default charcoal for headlines, body text, and icons.
- **secondary (#040404):** Near-black for high-emphasis text or dense navs; use sparingly.
- **tertiary (#e1cb60):** Muted mustard for primary highlights and CTA backgrounds on light surfaces.
- **neutral (#ffffff):** Base canvas for pages, cards, and forms.
- **border (#e5e7eb):** Subtle dividers, card outlines, inputs, and section separators.
- **brand-deep-daishin-yellow (#efca05):** Brighter promotional yellow for ribbons and high-visibility notices.
- **brand-spicy-mustard (#7c6416):** Dark mustard for text on yellow surfaces and hover/pressed states.
- **brand-night-brown-black (#322f23):** Deep earthy accent for illustrations or dark-on-light contrast blocks.
- **surface ({colors.neutral} -> #ffffff):** Surface background alias; match page canvas.
- **on-surface ({colors.primary} -> #333333):** Default text color on surfaces and cards.

## Typography

- Headlines (lg/md) use Gt Zirkon Full at 64px and 45px, weight 500, tight letterspacing for authority. This is a custom, self-hosted font; agents should not load it directly. Close, obtainable substitutes: Inter, Manrope, or Work Sans (Google Fonts).
- Headline-sm (20px) and headline-xs (18px) use Arial at weight 500 for small section titles and overlines; safe system fallback.
- Body text (body-md) is Gt Zirkon Full at 16px/1.46 for readable paragraphs and UI copy. Substitute with Inter/Manrope/Work Sans when Gt Zirkon isn't available.
- Use left alignment, short line lengths, and negative letterspacing only where specified on large headlines.

## Layout

- Spacing scale: 8/16/24/40/72px (xs→xl). Build vertical rhythm with 24px between related items, 40px between blocks, and 72px between sections.
- Cards and feature rows sit on a white surface with 16px internal padding by default.
- A responsive multi-column grid is implied; keep headline blocks wide, with side rails for CTAs or supportive copy.
- Keep navs and ribbons compact; stack content cleanly on small screens while preserving 24–40px gutters.

## Elevation & Depth

- All shadows are none. Hierarchy is built with typography, spacing, and subtle borders (#e5e7eb).
- Use tonal steps between white surfaces and mustard accents for emphasis.
- For focus and hover, rely on border color shifts, underlines, or background fills rather than drop shadows.

## Shapes

- Two radii: 4px (sm) for buttons and inputs; 8px (md) for cards and prominent modules.
- Square link buttons (0px) communicate inline actions and secondary emphasis.
- Rounded language is utilitarian—no pills—supporting a serious, trustworthy tone.

## Components

- Button Primary: 57px height, 12px×24px padding, 4px radius. Background #000003, text #ffffff. Use for the main action per section.
- Button Secondary: 57px height, 12px×24px padding, 4px radius. Text #333333 on white; when emphasis is needed, pair with a 1px border #e5e7eb.
- Button Link: 0px radius, text #000003; use inline within paragraphs or lightweight nav.
- Card: White background, text #333333, 8px radius, 16px padding; add a #e5e7eb border when grouping content.

### Hero rail
- Left: headline-lg (64px). Right: compact card with one paragraph and a primary button. Card uses 8px radius, 16px padding, and #e1cb60 button.

### Promo ribbon (top)
- Short line of copy with the brighter yellow (#efca05) chip/label. Body-md text, compact spacing (8–16px).

### Fraud alert banner
- Full-width card with 8px radius, 16px padding, left-aligned copy and an arrow link. Use #e1cb60 background with #7c6416 text for high visibility; add a #e5e7eb border.

### Solutions tile grid
- 2–3 columns of tiles linking to need-based flows. Each tile: card spec above, headline-sm (20px) title and short body-md copy.

### Advisor CTA block
- Centered card featuring a short paragraph and one primary button. 8px radius; keep 40–72px outer spacing from neighbors.

### Feature tabs (Épargner / Visualiser / Bonus)
- Tablist runs body-md; active tab gains underline or bold plus mustard indicator. Panel content uses cards with 16px padding.

### Investment simulator
- Wide card housing inputs (amount, monthly, duration, product, risk). Use 24px gaps between fields, 40px between groups; results area emphasized with a border and bold deltas.

### FAQ accordion
- Section title in headline-md (45px), items in headline-xs (18px) for triggers, body-md for answers. Dividers use #e5e7eb.

## Do's and Don'ts

- Do reserve #e1cb60 and #efca05 for CTAs, alerts, and promotional chips; keep body backgrounds white.
- Do keep primary buttons at 57px height to maintain tap targets and visual rhythm.
- Do separate dense sections (simulator, FAQs) with 72px top/bottom spacing.
- Don't introduce shadows; use borders and spacing instead.
- Don't color headlines; keep them #333333 to preserve trust and contrast.
- Don't stack multiple mustard accents in the same viewport unless one is a banner-level notice.

## Agent Prompt Guide

Quick color reference:
- Text: #333333
- Background: #ffffff
- Border: #e5e7eb
- Accent (CTA): #e1cb60

1) Build the hero with side CTA rail
- Background #ffffff. Left column: H1 set in Inter (as substitute for Gt Zirkon), 64px, 500, letter-spacing -0.047em, color #333333. Right column: card 8px radius, 16px padding, white background, text #333333; primary button 57px height, 12px×24px, radius 4px, background #e1cb60, text #333333.

2) Create the promo ribbon
- Full-width bar with white background, 16px vertical padding, 24px horizontal. Body text in Inter 16px/1.46 #333333. Add a small chip with background #efca05, text #322f23, 4px radius, 8px horizontal padding.

3) Implement the fraud alert banner
- Card: background #e1cb60, text #322f23, 8px radius, 16px padding, 1px border #e5e7eb. Include a right-arrow link styled as Button Link (text #000003, radius 0px).

4) Build the feature tabs
- Tab labels: Inter 16px, color #333333; active tab gets bottom border 2px #e1cb60. Panels are white cards, 8px radius, 16px padding, with 24px gaps between items.

5) Layout the investment simulator
- Outer card: white, 8px radius, 24px internal gaps, 40px group spacing, 1px border #e5e7eb. Inputs 57px height to align with buttons. Results box uses bold Inter 16px, color #333333, with accent totals highlighted in #e1cb60.

## Similar Brands

- Betterment — Similar restraint and trust-first palette; Cashbee leans warmer with mustard where Betterment uses blue.
- Yomoni — French robo-advisor with sober type; Cashbee's accents skew yellow/brown rather than Yomoni's blue/teal.
- Revolut — Clean white surfaces and sharp UI, but Revolut is more saturated and gradient-heavy; Cashbee stays flat and typographic.
- N26 — Monochrome base and strict grids; Cashbee adds more editorial content and promotional ribbons rather than full-bleed gradients.

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