Rezolv

---
version: alpha
name: Rezolv
description: The AI platform for lending and debt collection
colors:
  primary: "#ffffff"
  secondary: "#b0c8fc"
  tertiary: "#4c83fc"
  neutral: "#03242a"
  border: "#cdac75"
  brand-silent-tide: "#7c9498"
  brand-where-there-is-smoke: "#c8cecf"
  brand-armor-wash: "#040404"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Tt hoves
    fontSize: 50px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.022em
  headline-md:
    fontFamily: Tt hoves
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: -0.015em
  headline-sm:
    fontFamily: Manrope
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: -0.016em
  headline-xs:
    fontFamily: Manrope
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.19
  body-md:
    fontFamily: Manrope
    fontSize: 20.4px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 9.1px
  md: 18.1px
spacing:
  xs: 10px
  sm: 22px
  md: 36px
  lg: 54px
  xl: 72px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 52px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 52px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "#f4eee4"
    textColor: "{colors.neutral}"
    rounded: "{rounded.md}"
    padding: 31.7242px 36.2562px
---

# Rezolv: Dark-teal canvas with periwinkle action accents

## Overview

Rezolv is a dark-mode fintech UI aimed at banks and lending teams. The tone is professional and calm: high contrast text on a deep-teal surface, generous vertical rhythm, and rounded cards for approachability. Typography is modern and measured; CTAs are obvious but not loud. The layout favors centered hero content, a 3-up media row, and modular sections that scale to long-form storytelling.

## Colors

- **primary (#ffffff):** Primary text, iconography, and primary button background on dark surfaces.
- **secondary (#b0c8fc):** Periwinkle accent for secondary CTAs, badges, and light tiles.
- **tertiary (#4c83fc):** Brighter blue accent for highlights, links, or focused states.
- **neutral (#03242a):** Deep teal background for the global surface.
- **border (#cdac75):** Brass accent line for dividers, rules, or decorative borders.
- **brand-silent-tide (#7c9498):** Muted teal-gray for subdued labels and UI chrome.
- **brand-where-there-is-smoke (#c8cecf):** Soft gray for subtle strokes or secondary text on light cards.
- **brand-armor-wash (#040404):** Near-black for dense overlays or media frames.
- **surface ({colors.neutral} → #03242a):** Canonical page surface in dark mode.
- **on-surface ({colors.primary} → #ffffff):** Default text/icon color on the surface.

## Typography

Display uses Tt Hoves for large headlines: headline-lg at 50px/1.25 with tight –0.022em tracking; headline-md at 40px for section intros. Supporting headlines (sm/xs) and all body copy use Manrope — headline-sm at 32px, headline-xs at 26px, body-md at 20.4px/1.5 for comfortable reading on dark backgrounds.
- Availability: Manrope is Google-hosted and can be loaded directly. Tt Hoves is custom/self-hosted; if it's unavailable, substitute with obtainable geometric/grotesk families: Poppins, Montserrat, or Outfit. Keep weights at regular to medium to match the measured tone.

## Layout

Spacing follows a measured scale: 10, 22, 36, 54, 72px. Use 72px for section breaks, 54px for hero and between major blocks, 36px for in-section grouping, and 22/10px for tight element spacing. Grids tend to 3-up and 2-up patterns on desktop with centered content and generous gutters. Constrain text widths for long copy and align CTAs to the primary content column.

## Elevation & Depth

No shadows are used at any size; depth is conveyed through color steps (dark surface vs. light cards), crisp borders (use #cdac75 when decorative, #c8cecf for utility), and whitespace from the spacing scale. Active states rely on tonal shifts and border treatments rather than drop shadows.

## Shapes

Two radii define the language. Use 9.1px (sm) for buttons, input fields, and small badges. Use 18.1px (md) for cards, media tiles, and large panels. Circles are reserved for icons and play buttons; avoid mixed radii on the same component.

## Components

Buttons
- Primary button: background #ffffff, text #03242a, height 52px, padding 8px 16px, radius 9.1px. Default for main CTA (e.g., "Get in touch").
- Secondary button: background #b0c8fc, text #ffffff, height 52px, padding 8px 16px, radius 9.1px. Use for alternative or tour actions.
- Link button: text #ffffff, radius 0px; pair with an arrow icon for inline actions.

Card
- Card: background #f4eee4, text #03242a, padding 31.7242px 36.2562px, radius 18.1px. Use for feature callouts, press items, or compliance details.

### Header Bar with CTA
- Dark surface #03242a, left-aligned logo, center nav, right-aligned primary button. Links run Manrope 20.4px; CTA uses the Primary button spec.

### Centered Hero with Dual CTA
- Headline uses Tt Hoves 50px/1.25/–0.022em in #ffffff. Supporting paragraph in Manrope 20.4px/1.5 at 70–80ch max. Two buttons: Primary then Secondary with 22–36px gap.

### Hero Media Trio
- Three 18.1px-rounded tiles under the hero: photo/video/app mockup. Use either the Card spec (#f4eee4) or a Secondary tile with #b0c8fc; spacing 36px between tiles.

### Feature Tabs Strip
- Horizontal tab bar introducing "End-to-end solution...Seamless integration." Each tab label in Manrope 20.4px; active tab gets #b0c8fc underline or pill; panel uses Card padding.

### Voice Agent Capability Grid
- 2-column bullet grid listing latency, turn detection, language support. Headline-sm (32px) for section title; bullets in body-md with subtle dividers in #c8cecf.

### Security & Compliance Cards
- Two cards side-by-side: "SOC 2 Type II" and "ISO 27001:2022." Use Card spec (#f4eee4), headline-xs for titles, body-md for bullet lists; optional Brass Edge border #cdac75 for emphasis.

### Founders Row
- Two profile items with circular avatars, names in headline-xs (26px) and role labels in Manrope body-md at reduced opacity.

### Newsletter + Footer Columns
- Email input with 9.1px radius on dark surface; submit uses Primary button. Footer links stacked in 3–4 columns with 22px vertical rhythm and #7c9498 for muted labels.

## Do's and Don'ts

- Do place primary actions on dark surfaces using the white Primary button (#ffffff on #03242a) at 52px height.
- Do keep headings in Tt Hoves for levels lg/md and use Manrope for all other text to avoid style drift.
- Do use 18.1px radius for any tile or media card; reserve 9.1px for controls and inputs.
- Don't add drop shadows; separate layers with color steps (#f4eee4 or #b0c8fc) and clean borders (#c8cecf or #cdac75).
- Don't mix multiple accent blues; prefer secondary #b0c8fc for supportive emphasis and tertiary #4c83fc for focused highlights only.
- Don't tighten copy blocks below 1.5 line height; the system's readability depends on that metric on dark backgrounds.

## Agent Prompt Guide

Quick color reference
- Text: #ffffff
- Background: #03242a
- Border: #c8cecf (utility) or #cdac75 (decorative)
- Accent: #4c83fc (tertiary) and #b0c8fc (secondary)

1) Build a centered hero
- Container on #03242a. H1 in Tt Hoves 50px, line-height 1.25, letter-spacing -0.022em, color #ffffff. Supporting copy Manrope 20.4px/1.5, color #ffffff at 85% opacity. Add two buttons: Primary (bg #ffffff, text #03242a, h=52px, radius 9.1px) and Secondary (bg #b0c8fc, text #ffffff, h=52px, radius 9.1px). Vertical spacing: 36px between elements, 72px section padding.

2) Create a 3-up media row
- Three cards under the hero, each radius 18.1px. Use either bg #f4eee4 (Card spec) or bg #b0c8fc for alternates; inner padding 31.7242px 36.2562px. Gap between cards: 36px. Captions in Manrope 20.4px.

3) Feature tabs component
- Horizontal tabs on #03242a. Tab labels Manrope 20.4px, color #ffffff. Active tab has bottom border 2px in #b0c8fc; inactive tabs 1px in #c8cecf at 50% opacity. Panel content uses Card padding and headline-sm 32px for the panel title.

4) Security & Compliance duo
- Two cards side-by-side using Card spec: bg #f4eee4, text #03242a, padding 31.7242px 36.2562px, radius 18.1px. Titles in Manrope 26px (headline-xs), list items Manrope 20.4px. Optional decorative border 1px #cdac75.

5) Sticky header with CTA
- Row on #03242a with logo left, nav links Manrope 20.4px center, and Primary button right (bg #ffffff, text #03242a, h=52px, radius 9.1px). Horizontal padding 36px; vertical 22px.

## Similar Brands

- Stripe — dark surfaces with cool blue accents; Rezolv runs a warmer card tone (#f4eee4) and rounder radii.
- Brex — premium dark UI and crisp pill CTAs; Rezolv is softer with periwinkle secondary and gentler typography.
- Mercury — finance product with dark backgrounds; Rezolv leans more into rounded tiles and compliance callouts.
- Dialpad — communications SaaS using dark+blue; Rezolv's typography is calmer and its accent is lighter periwinkle rather than saturated neon.

:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-secondary: #b0c8fc;
  --color-tertiary: #4c83fc;
  --color-neutral: #03242a;
  --color-border: #cdac75;
  --color-brand-silent-tide: #7c9498;
  --color-brand-where-there-is-smoke: #c8cecf;
  --color-brand-armor-wash: #040404;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 50px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.25;
  --text-headline-lg-tracking: -0.022em;
  --text-headline-md-size: 40px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.19;
  --text-headline-md-tracking: -0.015em;
  --text-headline-sm-size: 32px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.19;
  --text-headline-sm-tracking: -0.016em;
  --text-headline-xs-size: 26px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.19;
  --text-body-md-size: 20.4px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-tt-hoves: "Tt hoves";
  --font-manrope: "Manrope";

  /* Rounded */
  --radius-sm: 9.1px;
  --radius-md: 18.1px;

  /* Spacing */
  --spacing-xs: 10px;
  --spacing-sm: 22px;
  --spacing-md: 36px;
  --spacing-lg: 54px;
  --spacing-xl: 72px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 8px 16px;
  --button-primary-height: 52px;
  --button-secondary-background-color: var(--color-secondary);
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 8px 16px;
  --button-secondary-height: 52px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: #f4eee4;
  --card-text-color: var(--color-neutral);
  --card-rounded: var(--radius-md);
  --card-padding: 31.7242px 36.2562px;
}

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "The AI platform for lending and debt collection",
  "color": {
    "$type": "color",
    "primary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    },
    "secondary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.69,
          0.784,
          0.988
        ],
        "hex": "#b0c8fc"
      }
    },
    "tertiary": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.298,
          0.514,
          0.988
        ],
        "hex": "#4c83fc"
      }
    },
    "neutral": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.012,
          0.141,
          0.165
        ],
        "hex": "#03242a"
      }
    },
    "border": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.804,
          0.675,
          0.459
        ],
        "hex": "#cdac75"
      }
    },
    "brand-silent-tide": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.486,
          0.58,
          0.596
        ],
        "hex": "#7c9498"
      }
    },
    "brand-where-there-is-smoke": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.784,
          0.808,
          0.812
        ],
        "hex": "#c8cecf"
      }
    },
    "brand-armor-wash": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.016,
          0.016,
          0.016
        ],
        "hex": "#040404"
      }
    },
    "surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.012,
          0.141,
          0.165
        ],
        "hex": "#03242a"
      }
    },
    "on-surface": {
      "$value": {
        "colorSpace": "srgb",
        "components": [
          1,
          1,
          1
        ],
        "hex": "#ffffff"
      }
    }
  },
  "spacing": {
    "$type": "dimension",
    "xs": {
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "sm": {
      "$value": {
        "value": 22,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 36,
        "unit": "px"
      }
    },
    "lg": {
      "$value": {
        "value": 54,
        "unit": "px"
      }
    },
    "xl": {
      "$value": {
        "value": 72,
        "unit": "px"
      }
    }
  },
  "rounded": {
    "$type": "dimension",
    "sm": {
      "$value": {
        "value": 9.1,
        "unit": "px"
      }
    },
    "md": {
      "$value": {
        "value": 18.1,
        "unit": "px"
      }
    }
  },
  "typography": {
    "headline-lg": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Tt hoves",
        "fontSize": {
          "value": 50,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.022,
          "unit": "em"
        }
      }
    },
    "headline-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Tt hoves",
        "fontSize": {
          "value": 40,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.015,
          "unit": "em"
        }
      }
    },
    "headline-sm": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Manrope",
        "fontSize": {
          "value": 32,
          "unit": "px"
        },
        "fontWeight": 400,
        "letterSpacing": {
          "value": -0.016,
          "unit": "em"
        }
      }
    },
    "headline-xs": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Manrope",
        "fontSize": {
          "value": 26,
          "unit": "px"
        },
        "fontWeight": 400
      }
    },
    "body-md": {
      "$type": "typography",
      "$value": {
        "fontFamily": "Manrope",
        "fontSize": {
          "value": 20.4,
          "unit": "px"
        },
        "fontWeight": 400
      }
    }
  }
}