Skip to content
DesignMunkDesignMunk Submit a site

Arbor

joinarbor.com
Never stress about an electric bill again
Software Technology Webflow Homepage Approach Arbor
Share Visit site
joinarbor.com DESKTOP · 1440
Arbor

AI Breakdown

Design export

---
version: alpha
name: Arbor
description: Never stress about an electric bill again
colors:
  primary: "#123223"
  secondary: "#040404"
  tertiary: "#f2ff67"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-pepper-sprout: "#7c9444"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Approach Arbor
    fontSize: 64px
    fontWeight: 300
    lineHeight: 1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Approach Arbor
    fontSize: 50px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: -0.008em
  headline-sm:
    fontFamily: Approach Arbor
    fontSize: 39px
    fontWeight: 300
    lineHeight: 1.23
    letterSpacing: -0.01em
  headline-xs:
    fontFamily: Approach Arbor
    fontSize: 31px
    fontWeight: 300
    lineHeight: 1.19
  body-md:
    fontFamily: Approach Arbor
    fontSize: 24px
    fontWeight: 300
    lineHeight: 1.5
rounded:
  sm: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 48px
  xl: 80px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 12px 20px
    height: 50px
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 12px 20px
    height: 50px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Arbor: Lime CTAs on Evergreen Type, Split Hero

## Overview

Arbor's UI aims for calm confidence: copy-first, roomy, and utility-grade. The tone is helpful and matter-of-fact, speaking to households comparing electricity supply rates. Expect spacious white layouts, evergreen text, and a single lime accent that draws focus to key actions. When tokens don't specify, choose clarity over ornament and keep the interface light.

## Colors

- **primary (#123223):** Evergreen ink for headlines, body text, and key icons.
- **secondary (#040404):** Near-black for small utility text, timestamps, or contrast-critical labels.
- **tertiary (#f2ff67):** Lime accent for primary CTAs and highlight tags only.
- **neutral (#ffffff):** Paper-white background for pages, cards, and modals.
- **border (#e5e7eb):** Subtle gray for dividers, card outlines, inputs, and tables.
- **brand-pepper-sprout (#7c9444):** Muted olive accent for secondary highlights or success states.
- **surface ({colors.neutral}):** Default surface, same as white background.
- **on-surface ({colors.primary}):** Text color on surfaces; pair with neutral backgrounds.

## Typography

All text uses Approach Arbor, a custom sans with light default weights and tight tracking at display sizes. Roles: headline-lg 64px/300/1.0/-0.02em for hero; headline-md 50px/300 for section intros; headline-sm 39px/300 and headline-xs 31px/300 for subheads; body-md 24px/300/1.5 for paragraphs and FAQs.
Availability: Approach Arbor is self-hosted (type: custom) and may not be usable in every environment. Practical substitutes from Google Fonts: Inter (300–600), Work Sans (300–600), or Public Sans (300–600). Match weights and letter-spacing to maintain the light, approachable feel. Keep headings light (300) unless emphasis is required.

## Layout

Spacing follows an 8px base: xs 8, sm 16, md 32, lg 48, xl 80. Use a two-column split for hero and key sections (copy left, media right) with generous gutters. Compose long-form sections as stacked blocks with xl (80px) section breaks and md–lg (32–48px) intra-section spacing. Keep line lengths moderate; allow wide white margins on large screens to maintain the airy feel.

## Elevation & Depth

Shadows are disabled at all sizes. Hierarchy is conveyed with whitespace, the border color #e5e7eb for separators and card outlines, and tonal contrast between white surfaces and evergreen text. Avoid glow or drop-shadow effects on CTAs; rely on color and placement to signal priority.

## Shapes

The language is soft-rectangular. Components default to an 8px radius (rounded.sm) on buttons and cards. Link buttons are square-edged (0px) to read as textual actions. Use the radius to distinguish interactive elements from plain containers and to keep overlaid proof cards feeling friendly.

## Components

Button variants and cards are the building blocks:
- Primary Button: background #f2ff67, text #123223, 8px radius, 12x20 padding, 50px fixed height.
- Secondary Button: white background, text #123223, 8px radius, 12x20 padding, 50px height.
- Link Button: text #123223, 0px radius; pair with an inline icon only when needed.
- Card: white background, text #123223, 8px radius, 16px padding; optionally add a 1px #e5e7eb border for definition.

### Top Navigation
Single row with brand at left and links at right. Text in #123223; the "Get started" action uses the primary button at 50px height. Spacing sm–md between items; no shadows.

### Hero Split
Left column: headline-lg 64px/300 in #123223, followed by body-md 24px. Right column: lifestyle photo. Section padding xl (80px).

### Ratings Badge
Compact proof row under the hero copy showing rating text in #123223 on a white micro-card with 8px radius and a #e5e7eb border.

### Dual CTA Row
Primary "Check my availability" (#f2ff67 on white) paired with a white secondary. Maintain md (32px) gap; stack on mobile.

### Savings Overlay Card
A small card over the hero image using the Card spec: white surface, 8px radius, optional #e5e7eb border. Amounts in #123223; use brand-pepper-sprout #7c9444 sparingly for positive callouts.

### Steps Timeline (1-2-3)
Three columns or stacked on mobile. Each step title in headline-xs (31px), body at 24px, with md spacing and optional borders to separate steps.

### Testimonials List
Quotes in body-md (24px) with names/locations as small utility text in #040404. Use card or simple dividers; maintain lg (48px) vertical rhythm.

### Press Logo Strip
A horizontal row of grayscale marks separated by the border color. Keep heights consistent and reserve color for CTAs.

## Do's and Don'ts

- Do reserve #f2ff67 for primary CTAs and monetary highlights; one lime per viewport is ideal.
- Do keep headings at weight 300 and apply the provided negative tracking only to display sizes.
- Do use #e5e7eb borders and xl spacing instead of shadows to separate sections.
- Don't mix new corner radii; stick to 8px or 0px for link-style actions.
- Don't reduce body copy below 24px in major sections; legibility is a core trait.
- Don't place lime text on white or evergreen; use lime strictly as a background color with #123223 text.

## Agent Prompt Guide

Quick color reference:
- Text: #123223
- Background: #ffffff
- Border: #e5e7eb
- Accent (CTA): #f2ff67; Secondary accent: #7c9444

1) Build a split hero
"Create a two-column hero on a #ffffff background. Left column: heading using Approach Arbor (or Inter) at 64px, weight 300, line-height 1.0, letter-spacing -0.02em, color #123223. Add a 24px paragraph in #123223. Below, place a primary button 50px tall, 12px 20px padding, 8px radius, background #f2ff67, text #123223; add a secondary white button beside it with the same size. Right column: image. Section padding: 80px top/bottom."

2) Add a ratings proof row
"Under the hero copy, insert a compact badge card: background #ffffff, 1px border #e5e7eb, 8px radius, 12px padding. Text in #123223 using 24px. Align left of the CTAs."

3) Steps (1-2-3) section
"Create three equal columns on #ffffff with 32px gaps. Each step title set in 31px/300 #123223; body at 24px/1.5 #123223. Use 1px #e5e7eb dividers between columns on desktop, stack on mobile, and keep 48px outer padding."

4) Testimonials list
"Make a vertical list of testimonial cards: each card #ffffff with optional 1px #e5e7eb border, 8px radius, 16px padding. Quote in 24px #123223; name/location in #040404. 32px gap between cards."

5) Final CTA band
"Full-width section on #ffffff with a 39px heading (weight 300) and 24px body in #123223. Center a primary button (50px height, 8px radius, background #f2ff67, text #123223). Use 80px vertical spacing."

## Similar Brands

- Arcadia: similar white canvas and eco-green emphasis; Arcadia uses more photography and softer accents where Arbor's lime CTA is bolder.
- Lemonade: single-accent minimalism and friendly copy; Lemonade leans pink and heavier iconography, while Arbor stays textual and lime.
- Wise: crisp type and disciplined use of green; Wise employs deeper gradients and more motion than Arbor's flat, border-driven approach.
- Rocket Money: savings proof and carded UI patterns; Rocket Money uses blues and more charts, Arbor sticks to evergreen text and simple proof cards.

More like this

Browse Software →
thelevel.ai
Level AI About AI
Level AI About
A minimalist hero uses extreme whitespace, centering attention on a large, high-contrast headline with an orange eyebrow tag for context. The top…
About · 18 minutes ago
every.to
Every AI
Every
Build Faster With AI
Blog · 18 minutes ago
strata.ws
Strata Productivity
Strata
The all-in-one real-time platform for your knowledge archive
Homepage · 2 hours ago
prismic.io
Prismic Blog Developer Tools
Prismic Blog
Move faster from brief to live pages
Blog · 3 hours ago