Skip to content
DesignMunkDesignMunk Submit a site

Hiline

hiline.co
From financial chaos to a foundation for growth.
Business Finance Webflow Homepage Kalice Ppneuemontreal
Share Visit site
hiline.co DESKTOP · 1440
Hiline

AI Breakdown

Design export

---
version: alpha
name: Hiline
description: From financial chaos to a foundation for growth.
colors:
  primary: "#002e36"
  secondary: "#064c55"
  tertiary: "#bb582d"
  neutral: "#f9f5ea"
  border: "#e5e7eb"
  brand-green-turquoise: "#689494"
  brand-jocular-green: "#cbe2cb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Kalice Trial
    fontSize: 49.6px
    fontWeight: 500
    lineHeight: 1.2
  headline-md:
    fontFamily: Kalice Trial
    fontSize: 42px
    fontWeight: 500
    lineHeight: 1.2
  headline-sm:
    fontFamily: Kalice Trial
    fontSize: 30.5px
    fontWeight: 500
    lineHeight: 1.2
  headline-xs:
    fontFamily: system-ui
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.22
  body-md:
    fontFamily: Ppneuemontreal
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 16px
  sm: 24px
  md: 46px
  lg: 62px
  xl: 92px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#ffffff"
    rounded: "{rounded.full}"
    padding: 17.2385px 19.0692px
    height: 52px
  button-secondary:
    textColor: "#004854"
    rounded: "{rounded.full}"
    padding: 17.2385px 19.0692px
    height: 52px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Hiline: Botanical Hero, Dark Teal Type, Burnt-Orange CTAs

## Overview

Hiline's UI aims to feel steady, human, and approachable for nonprofits, agencies, startups, and small businesses. A warm cream surface reduces glare while deep teal text carries authority. Headlines are expressive and serifed; body copy is compact and utilitarian. Spacing is generous but not airy, supporting long-form explanations, service menus, and proof blocks without clutter.

## Colors

- **primary (#002e36):** Anchor text color for headlines and dense body copy; also used for strong actions in navigation.
- **secondary (#064c55):** Supporting teal for hover states, icons, and secondary emphasis.
- **tertiary (#bb582d):** Burnt-orange accent reserved for primary CTAs and urgent highlights.
- **neutral (#f9f5ea):** Warm cream page background and section surfaces.
- **border (#e5e7eb):** Hairline dividers, card outlines, and subtle component seams.
- **brand-green-turquoise (#689494):** Cool accent for charts, illustrations, and tertiary badges.
- **brand-jocular-green (#cbe2cb):** Pale green wash for soft backgrounds and success tones.
- **surface ({colors.neutral}):** Alias of neutral; default card and page backdrop.
- **on-surface ({colors.primary}):** Alias of primary; standard readable text over neutral.

## Typography

- Headlines (lg/md/sm): Kalice Trial at 49.6px, 42px, and 30.5px, weight 500, line-height 1.2. This expressive serif is custom/self-hosted; agents should not attempt to load it directly. Substitutes: Fraunces (Google), Playfair Display (Google), or Cormorant Garamond (Google) for a similar elegant serif voice.
- Eyebrow/utility (headline-xs): system-ui at 18px/500/1.22 for compact labels and minor headings; relies on the OS default sans.
- Body (body-md): Ppneuemontreal at 16px/400/1.5 for paragraphs, lists, and UI labels. This is custom/self-hosted; agents should substitute Inter, Work Sans, or Source Sans 3 (all Google) for development and prototypes.
- Pairing guidance: keep headings in the expressive serif and all body/UI copy in the neutral sans to balance warmth with clarity. Avoid mixing weights beyond those specified to preserve rhythm.

## Layout

Spacing follows a stepwise scale: 16px (xs) for tight element gaps, 24px (sm) for intra-component rhythm, 46px (md) and 62px (lg) for section breathing room, and 92px (xl) for major breaks. Content centers in a single column with feature grids breaking into equal cards. Use the scale vertically; horizontally, align to a simple multi-column grid but keep generous inner padding on cards and pills. Long-form sections should stack xs/sm within components and md+ between groups.

## Elevation & Depth

Shadows are disabled. Hierarchy is communicated through tone (neutral surfaces versus rich teals), 1px borders in #e5e7eb, and disciplined whitespace. Decorative illustrations and color blocks add perceived depth without blur effects. Elevation comes from contrast and spacing, not drop shadows.

## Shapes

Two radii define the language: 8px corners for cards and structured containers, and 9999px for fully rounded pills (buttons, nav items, badges). Use 8px to signal content modules; use full pills for primary actions and compact tags. Do not mix intermediate radii to keep the system crisp.

## Components

Buttons
- Primary button: background #bb582d, text #ffffff, height 52px, padding 17.2385px 19.0692px, fully rounded (9999px). Use for the main CTA per view.
- Secondary button: text #004854, fully rounded; use for lower-priority actions or nav. Keep backgrounds light or transparent.
- Link button: text in #002e36 with no radius; apply to inline actions.

Card
- Background #f9f5ea, text #002e36, 8px corners, 16px padding. Use for features, service tiles, and compact summaries.

### Announcement Banner
A slim top bar using #002e36 for the strip and a small pill in #bb582d for "FREE FOR NONPROFITS." Body text in 16px sans; spacing xs vertically.

### Pill Navigation Bar
A rounded container spanning the header with links in #002e36. Right-aligned Get Started appears as a filled pill in #002e36 with white text (visual pattern on the page); height aligns to 52px and radius is 9999px.

### Garden Hero
Center-aligned headline in Kalice Trial, 49.6px/500/1.2, colored #002e36 over #f9f5ea. Subcopy at 16px/1.5, and a primary CTA using the orange pill spec above; vertical spacing lg–xl.

### How-It-Works Trio
Three equal cards labeled People / Process / Tech. Card base uses #f9f5ea with 8px corners and 16px padding; headings in 30.5px serif; body in 16px sans. Use sm gaps between cards and md above/below the set.

### Before / After Columns
Two columns: left lists pain points as short lines; right lists outcomes. Headings in 30.5px serif, lists in 16px sans. Maintain md gutter and lg outer padding.

### Services Feature Grid
Six service tiles (Bookkeeping, CFO, Taxes, HR & Payroll, AP, Spend). Each is a card with 8px corners, 16px padding, a 30.5px heading, and a text link styled as button-link.

### Metrics Strip
Three stats ("400+", "70+ NPS", "4 years") set large using headline-sm for labels and body-md for captions. Use brand greens as subtle accents only; keep text in #002e36 for contrast.

### Testimonial Block
A quote set in 18–30.5px range depending on layout, author line in body-md. Background stays neutral with no shadow; separate from neighbors with md–lg spacing and a border #e5e7eb if needed.

## Do's and Don'ts

- Do reserve #bb582d for the primary CTA and the nonprofit promo pill; overuse dilutes the action signal.
- Do keep cards at 8px radius and actions at 9999px to preserve the two-shape system.
- Do set all long-form copy at 16px/1.5 in the sans; use Kalice Trial only for headings.
- Don't introduce drop shadows; use #e5e7eb borders and spacing for separation.
- Don't place secondary links next to a primary button at the same visual weight; lighten them or use button-link.
- Don't stack more than two headline sizes in a single section; headings should stair-step cleanly.

## Agent Prompt Guide

Quick color reference
- Text: #002e36 (primary)
- Background: #f9f5ea (neutral/surface)
- Border: #e5e7eb (border)
- Accent/CTA: #bb582d (tertiary)

1) Build a hero
Create a full-width section with background #f9f5ea. Center a headline set in "Kalice Trial" 49.6px, weight 500, line-height 1.2, color #002e36 (fallback: Fraunces 700). Add a 16px/1.5 paragraph in "Ppneuemontreal" (fallback: Inter 400) colored #002e36. Place a primary button 52px tall with padding 17.2385px 19.0692px, fully rounded (9999px), background #bb582d, text #ffffff.

2) Make the pill navigation
Place a rounded container (radius 9999px) over a #f9f5ea backdrop with a 1px border #e5e7eb. Nav links use the body style (16px Ppneuemontreal/Inter) in #002e36. Add a right-aligned filled pill action 52px tall in #002e36 with white text for "Get Started."

3) Service cards grid
Output a 3-column grid of cards. Each card: background #f9f5ea, 8px radius, 16px padding. Heading in "Kalice Trial" 30.5px/500/1.2, color #002e36; body in 16px sans. Include a button-link in #002e36.

4) Before/After section
Two equal columns with 30.5px serif subheads and 16px sans bullet lines. Use a central 1px vertical divider in #e5e7eb. Outer spacing lg (62px) and inner column gap md (46px).

5) Metrics strip
Create a three-item stat row on #f9f5ea. Each stat uses headline-sm (30.5px/500) in #002e36 with a body caption at 16px/1.5. Keep gaps sm (24px) inside items and md (46px) between items.

## Similar Brands

- Bench: Similar friendly finance pitch with warm tones; Hiline is less cartoonish and relies more on serif display for authority.
- Pilot: Comparable services grid and proof blocks; Hiline's palette is warmer with cream and orange accents.
- Gusto: Shares pill buttons and human illustrations; Hiline's serif headlines feel more advisory than HR-centric.
- Ramp: Strong dark-on-light contrast like Hiline but uses a cooler, sharper tech aesthetic; Hiline's cream background and serif soften the tone.
- QuickBooks: Grid-heavy information architecture overlaps; Hiline's typography is more characterful and less utilitarian.

More like this

Browse Business →
finera.com
Finera Finance
Finera
The Art of Payments.
Homepage · 4 days ago
livetheresidency.com
The Residency Business
The Residency
Live and grow with ambitious builders through 3-month residencies.
Homepage · 5 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