Skip to content
DesignMunkDesignMunk Submit a site

Crezco

crezco.com
Embed payables into your platform with Crezco—powered by our API.
Finance Fintech Next.js Tailwind Homepage aeonik Inter Tight
Share Visit site
crezco.com DESKTOP · 1440
Crezco

AI Breakdown

Design export

---
version: alpha
name: Crezco
description: Embed payables into your platform with Crezco—powered by our API.
colors:
  primary: "#193f36"
  secondary: "#2c6454"
  tertiary: "#ec6555"
  neutral: "#ffffff"
  border: "#c1ddd6"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: aeonik
    fontSize: 88px
    fontWeight: 500
    lineHeight: 1
  headline-md:
    fontFamily: IBM Plex Mono
    fontSize: 57px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: 0.006em
  headline-sm:
    fontFamily: aeonik
    fontSize: 38px
    fontWeight: 400
    lineHeight: 1.16
  headline-xs:
    fontFamily: aeonik
    fontSize: 25px
    fontWeight: 400
    lineHeight: 1.06
  body-md:
    fontFamily: Inter Tight
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 12px
spacing:
  xs: 12px
  sm: 20px
  md: 32px
  lg: 56px
  xl: 192px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 21px 20px
    height: 56px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 21px 20px
    height: 56px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 20px
---

# Crezco: Dotted Grid Hero and Coral Build CTA

## Overview

Crezco's UI is technical but approachable: calm greens, clear structure, and copy that speaks to product teams. The system should feel confident, spacious, and engineering-ready rather than glossy. When tokens don't prescribe an answer, prefer neutral surfaces, restrained color, and crisp type with strong contrast. Primary actions are explicit; secondary information stays quiet and orderly.

## Colors

- Primary (#193f36): Deep ink for headlines, navigation text, and key labels.
- Secondary (#2c6454): Supporting greens for diagrams, section backdrops, and subdued accents.
- Tertiary (#ec6555): Coral signal for primary CTAs and important status accents. Use sparingly.
- Neutral (#ffffff): Default surface and card background.
- Border (#c1ddd6): Hairlines, input outlines, and card separators.
- Surface ({colors.neutral}): Base page background for content areas.
- On-surface ({colors.primary}): Default text color on neutral surfaces.

## Typography

- Headlines (Aeonik): Used for hero and major headings via headline-lg (88px/500/1), headline-sm (38px/400/1.16), and headline-xs (25px/400/1.06). Source type: custom/self-hosted; agents should substitute a similar geometric sans. Recommended free substitutes: Manrope, Outfit, or Plus Jakarta Sans.
- Alternate Headline (IBM Plex Mono): headline-md (57px/400/1.19, +0.006em) for technical subheads and callouts. Freely available from Google Fonts.
- Body (Inter Tight): body-md (16px/400/1.5) for paragraphs, lists, and UI copy. Freely available from Google Fonts.
- Practice: keep hero at 88px on desktop, step down to 57/38 for section leads, and reserve mono for developer-facing lines or labels to avoid overuse.

## Layout

Spacing uses a roomy step pattern: 12, 20, 32, 56, and 192px. Build vertical rhythm with lg (56px) between sections and md (32px) inside components. Use xl (192px) to create generous hero paddings and breathing room around illustrations. A simple 12-column grid with md gutters pairs well with the wide spacing; cards and feature blocks snap to multiples of 32px internally.

## Elevation & Depth

No shadows are used; hierarchy is handled with borders (#c1ddd6), tonal contrast between neutral and green fields, and ample whitespace. Dividers and subtle grid/dot textures separate zones instead of elevation. Reserve strong outlines for interactive controls and the secondary button style.

## Shapes

Two radii define the language: 4px (sm) for buttons and controls, 12px (md) for cards and larger containers. Use md to form pill-like tabs and section tiles; keep inputs and compact chips at sm for visual crispness. Avoid mixing radii within a single component.

## Components

Buttons
- Primary button: background #ec6555, text #ffffff, 56px height, 21px x 20px padding, 4px radius. Use for the main action per view.
- Secondary button: text #193f36, 56px height, 21px x 20px padding, 4px radius; pair with a 1px border in #c1ddd6 on neutral.
- Link button: text #193f36, no radius, inline spacing only.

Card
- Neutral background, primary text, 12px radius, 20px padding. Use for testimonials, features, and dense content.

Distinctive on this page

### Navigation Bar
- Left-aligned logotype; right-aligned links with a coral "Let's build" CTA. Keep link text in #193f36 and the CTA in #ec6555 for immediate affordance.

### Hero with Dotted Grid Illustration
- Large h1 (88px) in #193f36 over a dotted field; supporting line in body-md. Primary CTA (coral) plus outlined "Watch demo." Top and bottom paddings approach xl (192px).

### Testimonial Quote
- Card container (12px radius) with a short pull quote, author line, and a small kicker label ("Your UI, our API"). Maintain 20–32px internal spacing.

### Benefits Grid
- Six items in 2–3 columns depending on width. Short headings and one-line descriptions; use mono sparingly for developer-leaning points. Equal icon/text spacing using md (32px).

### Product Tabs
- Three pill-style tabs ("Bill Payments", "Payroll", "Expenses") using md radius (12px). Active tab uses primary text on neutral with a subtle border; content area sits in a card container.

### Feature Card
- Title, paragraph, and compact bullet list. Card token with 20px padding; bottom CTA as link button. Maintain consistent 32px spacing between blocks.

### Build with Crezco CTA Band
- Contrasting green field using the secondary hue with two actions: primary coral CTA and secondary outline. Centered content and generous 56px vertical spacing.

### Footer Columns
- Four columns: Discover, Developers, Company, Legal. Use body-md; links in primary. Separate legal disclaimers with border lines to control density.

## Do's and Don'ts

- Do reserve #ec6555 for the primary CTA and critical accents; limit to one dominant instance per view.
- Do keep headlines in #193f36 on neutral backgrounds; avoid colored text on colored panels unless contrast is AAA.
- Do use md (32px) spacing inside cards and lg (56px) between sections for consistent rhythm.
- Don't mix Aeonik substitutes within a page—pick one (e.g., Manrope) and pair it with IBM Plex Mono and Inter Tight.
- Don't apply shadows; use #c1ddd6 borders and whitespace for separation instead.
- Don't overuse mono for long text; reserve it for subheads, code-adjacent labels, and metrics.

## Agent Prompt Guide

Quick color reference
- Text: #193f36
- Background: #ffffff
- Border: #c1ddd6
- Accent (primary action): #ec6555

1) Build the hero
- Fonts: Manrope (as Aeonik substitute) for headings, IBM Plex Mono for alt subheads, Inter Tight for body.
- H1: 88px / 500 / line-height 1, color #193f36; body line 16px / 1.5, color #193f36 at 80%.
- Primary CTA: 56px height; padding 21px 20px; background #ec6555; text #ffffff; border-radius 4px.
- Secondary CTA: 56px height; padding 21px 20px; text #193f36; 1px border #c1ddd6; border-radius 4px.
- Section padding: top/bottom 192px.

2) Benefits grid (3-up)
- Container: max 1200px; grid 3 columns, 32px gaps.
- Item: title 25px Manrope (as Aeonik substitute), body 16px Inter Tight.
- Use card padding 20px when items sit on neutral; no shadows; dividers with #c1ddd6 if needed; corners 12px.

3) Product tabs and feature card
- Tabs: 12px radius; 12px vertical and 20px horizontal padding; active text #193f36 with 1px border #c1ddd6.
- Panel: card background #ffffff, text #193f36, padding 20px, radius 12px.
- Inside panel: section lead 38px Manrope, bullets set in 16px Inter Tight with 32px spacing.

4) Testimonial block
- Card: background #ffffff; text #193f36; padding 20–32px; radius 12px; border 1px #c1ddd6 optional.
- Quote: 38px Manrope for a short line, 16px Inter Tight for details; keep max width 560px.

## Similar Brands

- Stripe: Engineering-first layout with disciplined spacing; uses blues and gradients where Crezco opts for greens and a coral action.
- Plaid: Calm fintech with developer emphasis and mono moments; Plaid leans darker and denser in its docs-driven pages.
- GoCardless: Clean, conversion-minded fintech; favors blue accents and more conventional sans pairings versus Crezco's coral CTA and mono subheads.
- Wise Platform: Green-led palette and clear developer routes; typography is broader and more commercial than Crezco's restrained, technical tone.
- Adyen: Enterprise payments with green primary; heavier use of dark surfaces and motion compared to Crezco's light, gridded calm.

More like this

Browse Finance →
kota.io
Kota Blog Fintech
Kota Blog
The platform that runs employee benefits on autopilot.
Blog · 2 hours 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 · 15 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