# How era.app is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/era.app-design)

Last updated: 2026-07-28

# How era.app is designed

## Design character

Era is a soft fintech/consumer app system: warm paper grays, mint-teal accents, and calm rounded cards. Marketing pricing and signed-in app shells share the same quiet vocabulary—approachable wealth tooling rather than loud crypto flash.

## Foundations

### Color

Measured:

- **App paper:** `#f8faf9`, `#f3f3f1`
- **Accent teal/mint:** `#54ac9a`
- **Ink:** near-black on light surfaces
- **Cards:** white on warm gray canvas
- **Borders:** very light warm gray hairlines

The brand feeling is spa-calm finance: desaturated greens, no neon.

### Typography

- Body ~16px with weights 380–400 (slightly light) and 500 for titles
- Titles ~25–35px weight 500 with tight-comfortable line-heights (~27–40px)
- UI remains legible and soft, not ultra-bold

### Spacing and layout

- 24px padding common; 16px gaps in grids
- Large side margins (~268px) on some centered app widths
- Radii primarily **8px** (cards/controls) with 4px on smaller chips
- App: left nav + main content cards
- Pricing: simple plan cards on warm paper

## Visual language

- Warm off-white environments
- Soft white cards with 8px corners
- Teal for primary buttons and key marks
- Minimal illustration; clarity via spacing
- Sign-in and empty states stay airy

## Components and states

- Marketing pricing table/cards
- Sign-in screen
- App home / get started
- Transactions list
- MCP setup, support, referrals utility pages
- Primary teal buttons and secondary quiet actions

## Responsive behavior

Captures include very wide (2048) and mid (1261) widths. Cards reflow within a centered shell; mobile not directly captured.

## Practical guidance

**Preserve**

- Warm paper grays `#f3f3f1` / `#f8faf9` with teal `#54ac9a`
- 8px card radius and 16–24px spacing
- Medium (500) titles, lighter body weights
- Quiet utility pages that match marketing calm

**Avoid**

- Cold pure-white SaaS sterility or dark neo-banking skins
- Hard 0px tables and loud gradient heroes
- Secondary saturated colors fighting the mint accent

## Scope note

Eight captures across pricing, sign-in, and in-app routes. Solid measured neutrals/accent; font families not declared.

## Captured pages

[![Pricing](https://pin.fontofweb.com/9753?format=jpg)](https://design.withfudge.com/share/pin-9753)

[Pricing](https://design.withfudge.com/share/pin-9753)

[![App get started](https://pin.fontofweb.com/9755?format=jpg)](https://design.withfudge.com/share/pin-9755)

[App get started](https://design.withfudge.com/share/pin-9755)

[![Transactions](https://pin.fontofweb.com/9757?format=jpg)](https://design.withfudge.com/share/pin-9757)

[Transactions](https://design.withfudge.com/share/pin-9757)

[![Sign in](https://pin.fontofweb.com/9754?format=jpg)](https://design.withfudge.com/share/pin-9754)

[Sign in](https://design.withfudge.com/share/pin-9754)

[![MCP setup](https://pin.fontofweb.com/9758?format=jpg)](https://design.withfudge.com/share/pin-9758)

[MCP setup](https://design.withfudge.com/share/pin-9758)

## Colors

- `#f8faf9`
- `#f3f3f1`
- `#54ac9a`
- `#ffffff`
- `#1a1a1a`