Skip to content
DesignMunkDesignMunk Submit a site

Retirable

retirable.com
A confident retirement with a dedicated fiduciary advisor and reliable income.
Finance Fintech Gatsby Homepage Manrope
Share Visit site
retirable.com DESKTOP · 1440
Retirable

AI Breakdown

Design export

---
version: alpha
name: Retirable
description: A confident retirement with a dedicated fiduciary advisor and reliable income.
colors:
  primary: "#26313b"
  secondary: "#788c8c"
  tertiary: "#ffcfad"
  neutral: "#dbf0e7"
  brand-slow-dance: "#d9dac4"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: system-ui
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.21
  headline-md:
    fontFamily: Cooper
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.33
  headline-sm:
    fontFamily: system-ui
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.21
  headline-xs:
    fontFamily: Cooper
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.62
  body-md:
    fontFamily: Manrope
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.75
rounded:
  sm: 24px
  full: 9999px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 60px
  xl: 72px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 19px 39px
    height: 64px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 19px 39px
    height: 64px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "#ffffff"
    textColor: "#000000"
    rounded: "{rounded.sm}"
    padding: 23px 26px
---

# Retirable: Mint Pastels and Peach Pill CTAs for Trust

## Overview

Retirable serves pre-retirees and retirees seeking clear, fiduciary guidance. The interface should feel calm, trustworthy, and warm rather than clinical. Spacing is generous and copy-first. Visual energy comes from a soft mint canvas and a single peach accent reserved for decisive CTAs.

## Colors

- **primary (#26313b):** Core ink for headlines, body text, and icons.
- **secondary (#788c8c):** Muted utility tone for dividers, meta text, and subdued icons.
- **tertiary (#ffcfad):** Peach accent used for primary CTAs and key highlights.
- **neutral (#dbf0e7):** Mint wash used as the primary page background.
- **brand-slow-dance (#d9dac4):** Desaturated sand tone for alternating sections and press bands.
- **surface (#dbf0e7):** Default surface for large panels and hero backplates.
- **on-surface (#26313b):** Text color on light surfaces for consistent contrast.

## Typography

- Headline LG — system-ui, 48px, 700, 1.21: Large numeric or statement heads (e.g., APY). System default keeps big figures authoritative and accessible.
- Headline MD — Cooper, 36px, 400, 1.33: Primary marketing headlines and hero greetings. Cooper is custom/self-hosted; agents cannot load it. Suggested substitutes: Shrikhand (Google), DM Serif Display (Google), Gloock (Google) — all friendly, display-leaning serifs.
- Headline SM — system-ui, 28px, 400, 1.21: Section subheads and smaller feature titles.
- Headline XS — Cooper, 21px, 400, 1.62: Minor callouts and card titles. If Cooper isn't available, use Shrikhand at 21px or DM Serif Display as a fallback.
- Body MD — Manrope, 16px, 400, 1.75: All paragraphs, disclaimers, and UI labels. Manrope is available on Google Fonts in multiple weights for emphasis.
Use Cooper styles sparingly for warmth; keep most explanatory text in Manrope for readability.

## Layout

- Spacing follows an 8px base: xs 8, sm 16, md 32, lg 60, xl 72.
- Apply lg/xl for section padding, md for gaps between major blocks, sm for in-card spacing, xs for micro-gaps.
- A responsive 12-column grid is recommended; use 16–32px gutters and md (32px) vertical rhythm inside cards.
- Hero and feature bands should alternate neutral (#dbf0e7) and brand-slow-dance (#d9dac4) to segment content without heavy rules.

## Elevation & Depth

Shadows are not used. Depth is communicated through:
- Tonal panels (neutral and brand-slow-dance) against white cards.
- Clear type hierarchy and ample whitespace (md–xl).
- 1:1 contrast pairings: on-surface (#26313b) over light backgrounds.
- Soft radii to imply affordance instead of drop shadows.

## Shapes

Two radii define the language:
- 24px (rounded.sm) for cards, hero frames, and large tiles — friendly yet structured.
- 9999px (rounded.full) for CTAs, chips, and inputs — unmistakable tap targets.
Avoid mixing sharp corners with these; consistency reinforces brand calmness.

## Components

Buttons
- Primary: background #ffcfad, text #26313b, pill radius 9999px, 19px×39px padding, 64px height. Reserve for the single most important action.
- Secondary: text #26313b, pill radius 9999px, 19px×39px padding, 64px height; light or transparent background.
- Link: text #26313b, no radius; inline usage only.
Card
- Background #ffffff, text #000000, 24px radius, 23×26px padding. Use for features, testimonials, and stat blocks.
Distinctive components on this page
- ### Referral Hero (GMA)
  - 36px Cooper headline (Headline MD) over a darkened broadcast photo, body in Manrope 16px. Primary CTA uses the peach button spec above.
- ### Press Strip
  - A band with "Featured In" and grayscale logos on brand-slow-dance (#d9dac4). Spacing: md between logos; use 24px radius if contained.
- ### Benefits Checklist
  - White card, 24px radius; headline 36px; four bullet items set in Manrope 16px with secondary (#788c8c) icons. Gaps: sm between items.
- ### Advisor/Plan/Income Trio
  - Three adjacent feature blocks each with a 28px subhead, paragraph copy, and a link-style CTA. Use md gaps; stack to single column on mobile.
- ### Six-Pillar Capability Grid
  - Plan, Invest, Spend, Advice, Save, Protect. 2×3 white cards, 24px radius; each title at 21px Cooper, body in Manrope 16px.
- ### APY Stat Card
  - Label in Manrope 16px, value in 48px system-ui 700. White card, 24px radius, centered content.
- ### Debit Card Feature
  - Two-column layout: image panel and text panel with 28px subhead and link CTA. Section background alternates to neutral (#dbf0e7).

## Do's and Don'ts

- Do reserve #ffcfad for the primary CTA; multiple peach buttons per view dilute hierarchy.
- Do use #26313b for all headings and body on light surfaces to maintain contrast.
- Do keep cards at 24px radius and section padding at lg–xl for the brand's airy feel.
- Don't introduce drop shadows; separate sections with tonal backgrounds instead.
- Don't set long paragraphs in Cooper; keep dense copy in Manrope 16px, 1.75 line height.
- Don't mix additional accent colors beyond the defined palette.

## Agent Prompt Guide

Quick reference
- Text: #26313b (primary)
- Background: #dbf0e7 (neutral) or #d9dac4 (brand-slow-dance)
- Border/Meta: #788c8c (secondary)
- Accent/Primary CTA: #ffcfad (tertiary)

1) Build a referral hero with peach CTA
- Container: background image with a 60% overlay of #26313b; padding: xl (72px) top/bottom.
- Heading: 36px Shrikhand (Cooper substitute), line-height 1.33, color #ffffff if on dark; else #26313b.
- Body: Manrope 16px/1.75, color #ffffff on dark.
- Button: 64px height, padding 19px 39px, radius 9999px, background #ffcfad, text #26313b.

2) Press strip band
- Section background: #d9dac4; padding lg (60px).
- "Featured In" label: Manrope 16px bold, color #26313b.
- Logo row: evenly spaced grid with md (32px) gaps; keep logos monochrome.

3) Benefits checklist card
- Card: background #ffffff, radius 24px, padding 23px 26px.
- Title: 36px Shrikhand, color #26313b.
- List: Manrope 16px, line-height 1.75, bullet icons in #788c8c; sm (16px) gap between items.
- Optional CTA: link style in #26313b.

4) APY stat block
- Card: white, radius 24px, padding md (32px).
- Label: Manrope 16px, color #788c8c.
- Value: 48px system-ui 700, color #26313b.
- Supporting copy: Manrope 16px; section background #dbf0e7 for contrast.

## Similar Brands

- Betterment — Soft blues and friendly typography; Retirable diverges with warmer mint/peach and rounder display headings.
- Wealthfront — Minimal, data-forward with cool neutrals; Retirable is warmer and uses display serif accents.
- Ellevest — Pastel accents and inclusive imagery; Retirable is more card-driven with larger pill CTAs.
- SoFi — Rounded shapes and approachable tone; Retirable swaps SoFi's bright blue for subdued mint and sand tones.

More like this

Browse Finance →
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 2 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 · 6 days ago
quinngtl.com
Quinn Global Tax Law Finance
Quinn Global Tax Law
Protect what’s yours with integrated global tax and legal strategy
Homepage · 7 days ago