Skip to content
DesignMunkDesignMunk Submit a site

TakeControl

gettakecontrol.app
Chega de fazer conta de cabeça. Dividir despesas ficou fácil.
Apps & Mobile Finance Astro Homepage Figtree
Share Visit site
gettakecontrol.app DESKTOP · 1440
TakeControl

AI Breakdown

Design export

---
version: alpha
name: TakeControl
description: Chega de fazer conta de cabeça. Dividir despesas ficou fácil.
colors:
  primary: "#121211"
  secondary: "#fa8559"
  neutral: "#eaeae7"
  brand-crimson-velvet-sunset: "#b32c04"
  brand-island-girl: "#fcb499"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Figtree
    fontSize: 62px
    fontWeight: 500
    lineHeight: 1.06
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Figtree
    fontSize: 46px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.004em
  headline-sm:
    fontFamily: Figtree
    fontSize: 33px
    fontWeight: 500
    lineHeight: 1.21
    letterSpacing: -0.005em
  headline-xs:
    fontFamily: Figtree
    fontSize: 25px
    fontWeight: 500
    lineHeight: 1.2
  body-md:
    fontFamily: Figtree
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: -0.01em
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 2px
  sm: 6px
  md: 16px
  lg: 24px
  xl: 32px
components:
  button-primary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 12px 12px
    height: 38px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 12px 12px
    height: 38px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# TakeControl: Oversized Figtree Headlines on Warm Neutral Canvas

## Overview

TakeControl targets consumers managing shared expenses across trips, households and friend groups. The tone is straightforward and friendly, prioritizing legibility and low-friction actions. The interface should feel calm and trustworthy: large type, sparse color, and plenty of air on a warm neutral surface. When no token dictates a choice, prefer minimal contrast jumps and rounded, approachable shapes.

## Colors

- **primary (#121211):** Core ink for headings, body text and icons.
- **secondary (#fa8559):** Warm accent for highlights, small badges and emphasis moments.
- **neutral (#eaeae7):** Light warm gray used broadly for backgrounds.
- **brand-crimson-velvet-sunset (#b32c04):** Deep brand accent for critical emphasis or dense UI chips.
- **brand-island-girl (#fcb499):** Soft companion tint for subtle states or data highlights.
- **surface ({colors.neutral}):** Surface color maps to neutral (#eaeae7) for page and card backgrounds.
- **on-surface ({colors.primary}):** Text/icon color on surfaces; maps to primary (#121211).

## Typography

All typography uses Figtree. It is a free Google font and can be loaded directly.
- Headline LG (Figtree 62px/1.06, 500, -0.01em): Use for the hero and major section intros.
- Headline MD (Figtree 46px/1.2, 500, -0.004em): Secondary section headers and prominent claims.
- Headline SM (Figtree 33px/1.21, 500, -0.005em): Feature block titles and mid-page section headings.
- Headline XS (Figtree 25px/1.2, 500): Subsection labels and card headers.
- Body MD (Figtree 18px/1.5, 500, -0.01em): Default paragraph text and list items.
Substitutes if Figtree is unavailable: Inter, Manrope, or Source Sans 3 (all freely obtainable, similar geometric-humanist feel).

## Layout

Spacing follows a compact-to-generous scale: 2, 6, 16, 24, 32px. Use md (16) for default gaps inside cards and lists; lg (24) to separate stacked sections; xl (32) to buffer major transitions like hero-to-content. Keep content centered in a single column at small widths; introduce wider grids by spacing multiples (md/lg) rather than inventing new steps. Vertical rhythm should be driven by 16px base increments.

## Elevation & Depth

Depth is minimal. The only measured shadow is "sm," a two-layer soft drop used for hero device mockups or elevated elements. Other sizes are none; rely on tonal contrast (neutral surface vs. primary text) and whitespace to separate sections. Borders should be light and sparse—prefer spacing over lines.

## Shapes

Two radii define the language: sm = 8px for cards and panels; full = 9999px for controls and chips. Link-style buttons are square (0px) to read as inline text. Pills signal actions and selections; 8px corners group related content without feeling heavy.

## Components

Buttons
- Primary: textColor #121211, 38px height, 12px x 12px padding, full (9999px) radius. Use for main CTAs like platform badges.
- Secondary: same dimensions and radius as primary; reserve for alternate platform or secondary actions.
- Link: textColor #121211, 0px radius; place inline within copy.

Card
- Background #eaeae7, text #121211, 8px radius, 16px padding. Use for grouped content and feature callouts.

### Language Switcher
Pill control in the header using full radius (9999px) and body-md text (18px). Space it from the logo with md (16px) and from adjacent CTAs with sm (6px).

### Platform Download Badges
Two pill buttons at 38px height using button-primary/secondary dimensions. Place side by side with md (16px) gap; use icons aligned to text baseline.

### QR Install Panel
A card container (8px radius, 16px padding) pairing a QR code with a numbered 1–3 list set in body-md. Use lg (24px) vertical spacing between steps.

### Feature Grid
A multi-card stack where each feature title uses headline-xs (25px) and body-md for copy. Gap cards by lg (24px); keep internal padding at md (16px).

### Phone Mockup Stage
Central image elevated with the sm shadow. Surround with xl (32px) top/bottom margins to keep air around the device.

### Comparison Module
Two columns of feature rows. Use headline-sm (33px) for column headings and body-md for items. Contain the block in cards or neutral surface with md (16px) row spacing.

### FAQ Accordion
Each item is a card with 8px corners and 16px padding; questions in headline-xs and answers in body-md. Space items by md (16px).

### Cookie Banner
Low-profile card at the bottom; 8px corners, 16px padding. Buttons adopt 38px height and full radius to match global controls.

## Do's and Don'ts

- Do keep pages on the neutral surface (#eaeae7) with primary text (#121211) for maximum legibility.
- Do use full-radius (9999px) pills for primary actions and platform badges; keep height at 38px.
- Do reserve secondary and brand accent oranges (#fa8559, #b32c04, #fcb499) for highlights and comparison emphasis, not as page backgrounds.
- Don't add heavy shadows; stick to the measured sm shadow when elevation is required.
- Don't mix additional fonts; use Figtree and its given sizes/letter-spacing only.
- Don't introduce square-cornered buttons except for link-style inline actions (0px radius).

## Agent Prompt Guide

Quick color reference
- Text: #121211
- Background: #eaeae7
- Border: #121211
- Accent: #fa8559 (with deeper #b32c04 available)

1) Build a hero section
- Background #eaeae7; center a headline using Figtree 62px/1.06 weight 500, color #121211.
- Subcopy in Figtree 18px/1.5 weight 500, color #121211, max-width comfortable.
- Two pill buttons, 38px height, 12px horizontal padding, radius 9999px; primary text color #121211; gap md (16px).

2) Create a features grid
- Use a neutral #eaeae7 card per feature with 8px radius and 16px padding.
- Title in Figtree 25px/1.2 weight 500; body in 18px/1.5.
- Grid gap lg (24px); section padding xl (32px) top and bottom.

3) QR download panel
- Card container: background #eaeae7, radius 8px, padding 16px.
- Left: image/QR; Right: ordered list set in Figtree 18px/1.5.
- Include a pill button (38px, radius 9999px) beneath with md (16px) top margin.

4) Comparison block
- Two columns with titles in Figtree 33px/1.21, weight 500, color #121211.
- Rows in Figtree 18px/1.5 with md (16px) vertical spacing.
- Use accent #fa8559 to mark "Melhor escolha".

5) FAQ accordion
- Each item is a #eaeae7 card with 8px radius, 16px padding, md (16px) gap between items.
- Questions in Figtree 25px; answers in 18px.
- Keep controls (open/close) as text links with 0px radius.

## Similar Brands

- Splitwise: Also minimal and text-first; TakeControl uses warmer neutrals and larger headlines, while Splitwise leans cooler and flatter.
- Wise: Shares restrained color and clear typography; Wise uses stronger greens where TakeControl prefers warm grays and subtle oranges.
- Revolut: Clean fintech UI with dark ink and rounded controls; Revolut employs higher contrast and busier gradients than TakeControl's calm surface.
- YNAB: Information-heavy but approachable; YNAB's blues and denser layouts contrast with TakeControl's spacious, single-column rhythm.

More like this

Browse Apps & Mobile →
letsjive.io
Letsjive Apps & Mobile
Letsjive
Don’t make connecting awkward—Jive makes it easy to connect and follow up.
Homepage · 19 hours ago
finera.com
Finera Finance
Finera
The Art of Payments.
Homepage · 5 days ago
helloaria.eu
Aria Finance
Aria
Aria makes late payment irrelevant in B2B
Homepage · 7 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 · 1 week ago