Skip to content
DesignMunkDesignMunk Submit a site

Crescent Cares

crescentcares.com
Banking that gives as much as you.
Finance Fintech Webflow Homepage twk Lausanne
Share Visit site
crescentcares.com DESKTOP · 1440
Crescent Cares

AI Breakdown

Design export

---
version: alpha
name: Crescent Cares
description: Banking that gives as much as you.
colors:
  primary: "#fefefe"
  secondary: "#546c6c"
  tertiary: "#d2b4fe"
  neutral: "#121212"
  border: "#374151"
  brand-boredom: "#8c9c9c"
  brand-freinacht-black: "#1d2d34"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: TWK Lausanne
    fontSize: 75.9px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.015em
  headline-md:
    fontFamily: TWK Lausanne
    fontSize: 66.4px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.015em
  headline-sm:
    fontFamily: Twklausanne 250
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.35
  headline-xs:
    fontFamily: Twklausanne 250
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.22
  body-md:
    fontFamily: TWK Lausanne
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 7.6px
  lg: 8px
spacing:
  xs: 10px
  sm: 18px
  md: 26px
  lg: 38px
  xl: 90px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#1a2b32"
    rounded: "{rounded.md}"
    padding: 10.4327px 13.278px
    height: 41px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 10.4327px 13.278px
    height: 41px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.lg}"
    padding: 16px
---

# Crescent Cares: Dark Banking UI with Lavender CTAs

## Overview

Crescent Cares targets nonprofit finance leaders. The interface is dark, calm, and low-glare, aiming for trust and focus rather than splash. Spacing is generous and modular, with big typographic headlines balanced by compact body copy. Lavender accents signal action and progress, while most content stays neutral for clarity.

## Colors

- **primary (#fefefe):** Core text on dark surfaces; use for headlines, body, and icons on surface.
- **secondary (#546c6c):** Muted supporting text; use for captions, disclaimers, and subdued links.
- **tertiary (#d2b4fe):** Accent and primary CTA; use sparingly for buttons, key metrics, and charts.
- **neutral (#121212):** Main surface color for sections, cards, and the page background.
- **border (#374151):** Dividers, table rules, input strokes, and subtle outlines on dark surfaces.
- **brand-boredom (#8c9c9c):** Mid-gray utility text and iconography when secondary is too dim.
- **brand-freinacht-black (#1d2d34):** Deep brand tint for headers, nav, or banners needing separation from the main surface.
- **surface ({colors.neutral}):** Alias of neutral; use interchangeably for surfaces.
- **on-surface ({colors.primary}):** Alias of primary; default text color on dark backgrounds.

## Typography

- Headline LG — TWK Lausanne 400 at 75.9px, line-height 1, letter-spacing -0.015em. Used for the hero statement.
- Headline MD — TWK Lausanne 400 at 66.4px, line-height 1, letter-spacing -0.015em. Section intros on larger breakpoints.
- Headline SM — Twklausanne 250 400 at 19px, line-height 1.35. Subheads, metric labels, testimonial intros.
- Headline XS — Twklausanne 250 400 at 18px, line-height 1.22. Eyebrows, table headers, small callouts.
- Body MD — TWK Lausanne 400 at 16px, line-height 1.5. Default paragraph, disclaimers, nav.
Availability and substitutes: TWK Lausanne and Twklausanne 250 are custom/self-hosted, not freely licensed. When unavailable, substitute with Inter (Google), Plus Jakarta Sans (Google), or Work Sans (Google) — use regular for body, tight tracking for big headings to mimic the Swiss grotesk feel.

## Layout

Spacing follows a compact modular scale: 10, 18, 26, 38, 90px. Use xl (90px) for section paddings on large screens, lg (38px) for inner blocks, md (26px) for card gutters, and sm/xs for dense UI like tables and captions. Content reads in generous horizontal containers with clear vertical bands separating sections. Keep copy lines short on wide displays and anchor key CTAs near section starts and ends.

## Elevation & Depth

Depth is mostly tonal. Only the small shadow token is used, a multi-layer 0–16px blur for soft lift on key cards or screenshots. Larger elevations are none; rely on the border color (#374151), contrast shifts between neutral and Deep Harbor, and whitespace to separate regions. Avoid heavy glows or high-contrast outlines on dark surfaces.

## Shapes

Corners are minimally softened: sm 4px for utility elements, md 7.6px for primary buttons, and lg 8px for cards. The language is functional and modern — use tighter radii for controls and the largest radius for containers or media frames. Links remain square (0px) to read as textual, not buttoned.

## Components

Buttons
- Primary: background #d2b4fe, text #1a2b32, radius 7.6px, 41px height, padding 10.4327px 13.278px. Use for main CTAs only.
- Secondary: no fill (on dark), text #fefefe, radius 4px, 41px height, same padding; add a 1px #374151 stroke when needed for affordance.
- Link: text #fefefe, radius 0px; inline actions and nav.
Cards
- Background #121212, text #fefefe, radius 8px, padding 16px. Apply the small shadow for hero screenshots or highlighted testimonials.

Distinctive components
### Top Promotion Bar
Single-line banner for time-bound offers. Use Deep Harbor (#1d2d34) to distinguish from the hero, body at 16px, and a Primary button.
### Navbar with Dual CTAs
Left: product anchors; right: Login (link) and Book a demo (Primary). Keep 18–26px vertical padding and a subtle bottom divider (#374151).
### Partner Logo Rail
Monochrome logos on neutral background with 26px vertical padding and 1px top/bottom borders. Use secondary text for captions like "Proud Member of".
### App Screenshot Frame
A wide card (8px radius) wrapping the product image; apply the small shadow token and 16px internal padding. Accent chart lines may use #d2b4fe.
### Problem Comparison Table
Two-column checklist comparing "Big Banks" vs "Crescent". Use 1px #374151 rules, 18–19px subheads (headline-xs/sm), and 16px cells with xs–sm spacing.
### Feature Grid
A grid of brief feature cards using the card token. Headline-sm for titles, body-md for descriptions, and tertiary highlights for key phrases sparingly.
### Testimonial Stack
Quote cards with name/title blocks. Card background #121212, 8px radius, 16px padding; author line in secondary.
### Security Checklist
Dense bullet list with locks/shields in brand-boredom (#8c9c9c). Use 18px subheads and 16px body with md spacing between items.
### Footer Columns
Three to four link columns. Use secondary for link color, 1px #374151 top border, and 38–90px vertical padding depending on viewport.

## Do's and Don'ts

Do
- Use #d2b4fe only for primary CTAs, key metrics, and active states.
- Keep big headings at 75.9/66.4px with tight -0.015em tracking; don't add extra letter-spacing.
- Separate sections with 90px vertical rhythm on desktop and 38–26px on mobile.
- Prefer borders (#374151) and tone shifts over heavy shadows.
Don't
- Introduce additional accent colors or bright blues that break the monochrome + lavender palette.
- Round controls beyond 8px; radii larger than lg don't match the system.
- Use secondary (#546c6c) for body copy on dark; it's for supporting text only.
- Stack multiple shadows or glows on buttons; stick to flat or the small card shadow only.

## Agent Prompt Guide

Quick reference
- Text: #fefefe
- Background: #121212
- Border: #374151
- Accent: #d2b4fe

1) Build a hero
- Container background #121212 with 90px top/bottom padding.
- H1: "TWK Lausanne", fallback "Inter", size 75.9px, weight 400, line-height 1, letter-spacing -0.015em, color #fefefe.
- Body: 16px/1.5, color #fefefe at 80–90% opacity if needed.
- Primary button: background #d2b4fe, text #1a2b32, height 41px, padding 10.4327px 13.278px, radius 7.6px, no border.

2) Partner logo rail
- Section background #121212, 26px vertical padding, 1px top and bottom borders in #374151.
- Eyebrow: "Twklausanne 250" 18px/1.22, color #546c6c.
- Logos in monochrome on-surface.

3) Comparison table
- Two columns within a card (background #121212, radius 8px, padding 16px), 1px grid lines in #374151.
- Column headers: "TWK Lausanne" 66.4px/1 for a large section title or 19px for subheads (pick one level consistently), all #fefefe.
- Check/close icons in #d2b4fe for "pros" and #546c6c for neutral items.

4) Testimonial cards
- Use the card token: background #121212, text #fefefe, radius 8px, padding 16px; apply the small shadow token.
- Quote: "Twklausanne 250" 19px/1.35, author line Body 16px/1.5 in #546c6c.
- Keep 26px gaps between cards; section padded 90px top/bottom.

## Similar Brands

- Mercury: Dark fintech with purple accent; Mercury skews greyer and tighter, while Crescent uses softer cards and more generous vertical rhythm.
- Brex: Minimal dark UI and restrained accenting; Brex runs bolder display sizes and heavier imagery than Crescent's understated approach.
- Stripe: High-contrast dark sections and precise Swiss grotesk; Stripe is brighter and more animated, Crescent is calmer and CTA-driven.
- Ramp: Monochrome base with sparing color; Ramp favors green accents and denser tables versus Crescent's lavender CTAs and softer spacing.

More like this

Browse Finance →
privy.io
Privy Developer Tools
Privy
Build products that hold, move, and grow digital assets.
Homepage · 14 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 · 4 days ago
helloaria.eu
Aria Finance
Aria
Aria makes late payment irrelevant in B2B
Homepage · 7 days ago