Skip to content
DesignMunkDesignMunk Submit a site

Cowrywise

cowrywise.com
Start building wealth
Finance Fintech Nuxt Tailwind Homepage Rency
Share Visit site
cowrywise.com DESKTOP · 1440
Cowrywise

AI Breakdown

Design export

---
version: alpha
name: Cowrywise
description: Start building wealth
colors:
  primary: "#082552"
  secondary: "#7cb4fc"
  tertiary: "#0067f5"
  neutral: "#ffffff"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Rency
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.072em
  headline-md:
    fontFamily: Rency
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.058em
  headline-sm:
    fontFamily: Rency
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.058em
  headline-xs:
    fontFamily: Rency
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.058em
  body-md:
    fontFamily: Rency
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: -0.006em
rounded:
  sm: 8px
  md: 16px
spacing:
  xs: 8px
  sm: 16px
  md: 24px
  lg: 32px
  xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.md}"
    padding: 17px 28px
    height: 62px
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 17px 28px
    height: 62px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Cowrywise: Navy Headlines and Tall Electric-Blue CTAs

## Overview

Cowrywise presents a confident, approachable fintech voice: deep navy text on white, one strong blue for actions, and generous whitespace. The UI should feel trustworthy, precise, and easy to scan. Layouts skew spacious; content stacks in clear sections with compact, rounded headlines and minimal ornament aside from soft illustrations. When tokens don't specify, favor calm contrast, ample breathing room, and a single primary action per section.

## Colors

- **primary (#082552):** Deep navy for headlines, body text, and icons.
- **secondary (#7cb4fc):** Light blue accent for subtle highlights, charts, and illustrations; rarely used for CTAs.
- **tertiary (#0067f5):** Primary action blue for buttons, active states, and key links.
- **neutral (#ffffff):** Base page background and card surfaces.
- **border (#e5e7eb):** Dividers, card outlines, table rules, and input borders.
- **surface (#ffffff):** Default surface alias; use for panels and cards.
- **on-surface (#082552):** Default text color on neutral surfaces.

## Typography

- Rency (custom, self-hosted). Not freely available via Google Fonts; agents should not rely on it directly. Roles: all headlines (72/48/36/30) and body (16) with the supplied negative letter-spacing. Use weight 400 as the default per tokens.
- Practical substitutes (free): Manrope (Google) as the closest everyday UI match; Outfit (Google) for rounded geometry; Plus Jakarta Sans (Google) for clean counters and good tracking control. When substituting, keep the token sizes and letter-spacing to preserve rhythm.
- Headline levels: headline-lg 72px for hero; headline-md 48px for primary section titles; headline-sm 36px and headline-xs 30px for sub-sections and feature blocks. Body-md 16px for paragraphs and small UI text at line-height 1.5.
- Tracking is integral: retain the negative letter-spacing values from tokens to keep headlines compact and recognizably "Cowrywise."

## Layout

- Spacing scale is 8px-based: xs 8, sm 16, md 24, lg 32, xl 64. Build vertical rhythm in whole steps; default section paddings at xl, inner block gaps at md or lg.
- Content grids are straightforward: one-column stacks on mobile; two- to three-up cards at desktop with md (24px) gaps. Maintain generous white margins around primary headlines.
- Use card padding at 16px per token; pair with border #e5e7eb for quiet separation when shadows are unnecessary.
- Keep one primary action per section to match the page's disciplined hierarchy.

## Elevation & Depth

- Shadows are subtle and functional: sm (rgba(0, 103, 245, 0.18) 0 4px 6px 1px) for lightly lifted interactive elements and CTAs; md (two-layer neutral) for dropdowns, overlays, or hover-elevated cards; lg (very light) for persistent surfaces that need a hint of separation.
- xl and inner are none. When not using shadows, rely on border #e5e7eb and white space to separate groups. Avoid heavy depth; this system reads flat and calm.

## Shapes

- Rounded language: sm 8px for cards and containers; md 16px for primary interactive elements (buttons, inputs, chips). Link buttons and inline links stay square (0px) to read as textual.
- Use larger radius to signal clickability; keep structural containers at 8px to remain quiet. Consistency of radius is part of brand recognition.

## Components

Buttons and cards
- Primary Button: background #0067f5, text #ffffff, radius 16px, padding 17px 28px, height 62px. Default CTA across the site.
- Secondary Button: background #ffffff, text #082552, radius 16px, padding 17px 28px, height 62px. Use on light surfaces where a quieter action is needed.
- Link Button: text #082552, radius 0px. For inline navigational calls.
- Card: background #ffffff, text #082552, radius 8px, padding 16px. Pair with border #e5e7eb; add md shadow on hover when interactive.

### Top Navigation
- Sticky white bar on surface #ffffff with on-surface text #082552. Primary CTA uses the button-secondary style; a smaller tertiary #0067f5 button can appear for sign-up. Spacing lg (32px) horizontally between major groups.

### Hero Band
- Headline uses headline-lg 72px; supporting copy body-md 16px at max 60–70ch. One prominent primary button (height 62px, radius 16px) centered or left-aligned. Background remains #ffffff; illustrations stay decorative.

### Product Trio (Savings, Mutual Funds, Stocks)
- Three cards in a md-gapped grid. Titles in headline-xs 30px, descriptions in body-md 16px. Cards use radius 8px, padding 16px, border #e5e7eb; add md shadow on hover.

### Trust & Regulation Strip
- Section heading in headline-md 48px with bold key terms in body copy. Use border top #e5e7eb or extra xl spacing to separate from previous content. Secondary or primary button for "Start investing."

### ROI Simulator ("Time really is money")
- Title in headline-md 48px. Segmented controls (frequency and currency) styled as 16px-radius pills; selected state uses #0067f5 with #ffffff text; unselected use #ffffff with border #e5e7eb. Key numbers can use headline-sm 36px.

### Testimonials Grid
- Quotes presented in 2–4 columns depending on width. Each quote sits on a card (#ffffff, 8px radius, 16px padding) with sm shadow and small attribution in body-md.

### Footer Mega-menu
- Multi-column lists on #ffffff with #082552 text. Use border top #e5e7eb and xl vertical padding. Social icons match on-surface color; no heavy shadows.

## Do's and Don'ts

- Do use #082552 for all primary text and headings; avoid introducing extra text colors.
- Do keep one dominant CTA per section and style it with #0067f5, 62px height, and 16px radius.
- Do space sections with xl (64px) paddings and keep card gaps to md (24px) by default.
- Don't mix new accent colors; limit emphasis to the supplied blues and neutral.
- Don't round containers beyond 16px; reserve 8px for cards and 16px for interactive controls.
- Don't apply heavy drop shadows; prefer borders (#e5e7eb) and whitespace for separation.

## Agent Prompt Guide

Quick color reference
- Text: #082552
- Background: #ffffff
- Border: #e5e7eb
- Accent/CTA: #0067f5 (light accent: #7cb4fc)

1) Hero with primary CTA
- Container: background #ffffff; padding: 64px top/bottom.
- Headline: font-family Manrope, sans-serif (substitute for Rency); size 72px; weight 400; line-height 1.2; letter-spacing -0.072em; color #082552.
- Body: size 16px; line-height 1.5; letter-spacing -0.006em; color #082552; max-width 720px.
- Button: height 62px; padding 17px 28px; radius 16px; background #0067f5; text #ffffff.

2) Three product cards
- Grid: 3 columns; gap 24px; section padding 64px.
- Card: background #ffffff; border 1px solid #e5e7eb; radius 8px; padding 16px; hover shadow: rgba(0,0,0,0.08) 0 8px 46px 0, rgba(0,0,0,0.03) 0 2px 6px 0.
- Card title: Manrope 30px, 400, -0.058em, color #082552.
- Copy: 16px, 1.5, color #082552.

3) Trust section with secondary CTA
- Heading: Manrope 48px, 400, -0.058em, color #082552; body 16px.
- Layout: max-width container; padding 64px; subtle divider above: 1px solid #e5e7eb.
- Button (secondary): background #ffffff; text #082552; border 1px solid #e5e7eb (optional); height 62px; radius 16px.

4) ROI simulator controls
- Title: Manrope 48px, 400.
- Segmented toggle: wrapper border 1px solid #e5e7eb; radius 16px; inner options padding 8px 16px.
- Selected option: background #0067f5; text #ffffff; radius 16px.
- Unselected option: background #ffffff; text #082552.
- Result number: Manrope 36px, 400, color #082552.

5) Testimonials grid
- Grid: 3 columns; gap 24px; padding 64px.
- Quote card: #ffffff; radius 8px; padding 16px; shadow rgba(0,103,245,0.18) 0 4px 6px 1px.
- Quote text: 16px; author line: 16px, color #082552 at 80% opacity.

## Similar Brands

- Betterment — similar navy/blue discipline and spacious sections; Cowrywise leans friendlier with rounded headlines and taller CTAs.
- Wealthfront — clean white layouts and trust-first messaging; Cowrywise uses brighter action blue and more playful illustrations.
- Paystack — Nigerian fintech with precise navy type and blue accents; Cowrywise is more consumer-friendly with rounded display headlines.
- Coinbase — blue-accented finance UI with strict whitespace; Cowrywise is less stark and uses softer illustrations to reduce intimidation.

More like this

Browse Finance →
kota.io
Kota Blog Fintech
Kota Blog
The platform that runs employee benefits on autopilot.
Blog · 1 hour ago
privy.io
Privy About Developer Tools
Privy About
The page opens with a centered hero that screams careers: a small “CAREERS” eyebrow over a huge headline, tight blurb, and twin…
About · 14 hours ago
privy.io
Privy Developer Tools
Privy
Build products that hold, move, and grow digital assets.
Homepage · 2 days ago
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 4 days ago