era.app website design: fonts, colors and UI patterns

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.