Skip to content
DesignMunkDesignMunk Submit a site

Runey

runey.app
Run your business in one place.
Finance Productivity Homepage Poppins
Share Visit site
runey.app DESKTOP · 1440
Runey

AI Breakdown

Design export

---
version: alpha
name: Runey
description: Run your business in one place.
colors:
  primary: "#1a1a1a"
  secondary: "#757575"
  tertiary: "#000000"
  neutral: "#fafafa"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Poppins
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -0.03em
  headline-md:
    fontFamily: Poppins
    fontSize: 47px
    fontWeight: 600
    lineHeight: 1.19
    letterSpacing: -0.017em
  headline-sm:
    fontFamily: Poppins
    fontSize: 34px
    fontWeight: 600
    lineHeight: 1.21
    letterSpacing: -0.018em
  headline-xs:
    fontFamily: Poppins
    fontSize: 25px
    fontWeight: 600
    lineHeight: 1.2
  body-md:
    fontFamily: Poppins
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
rounded:
  sm: 16px
  full: 9999px
spacing:
  xs: 6px
  sm: 16px
  md: 28px
  lg: 40px
  xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 0px 16px
    height: 44px
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 0px 16px
    height: 44px
  button-link:
    textColor: "{colors.secondary}"
    rounded: 0px
  card:
    backgroundColor: "#ffffff"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 20px
---

# Runey: Monochrome Pill Buttons and 64px Poppins Headlines

## Overview

Runey's interface is minimal, product-first, and monochrome. It speaks to freelancers and small teams who value clarity over decoration. Spacing is generous, copy is concise, and components rely on rounded pills and light elevation. The mood is practical and modern rather than playful, with dense information set on spacious surfaces.

## Colors

- **primary (#1A1A1A):** Core text, headings, and primary CTAs.
- **secondary (#757575):** Secondary text, helper labels, light borders and dividers.
- **tertiary (#000000):** Deep accents and dark panels (e.g., media frames) when stronger contrast is needed.
- **neutral (#FAFAFA):** Page background and section surfaces.
- **surface (alias of #FAFAFA):** Use wherever a surface token is required; matches Neutral.
- **on-surface (alias of #1A1A1A):** Text and icon color on Neutral/Surface areas.

## Typography

All typography uses Poppins (Google). Load directly via Google Fonts at the specified weights. Roles: Headline-lg 64px/1.05, -0.03em for hero statements; Headline-md 47px/1.19 and Headline-sm 34px/1.21 for major section leads; Headline-xs 25px for sub-section titles; Body-md 18px/1.56 for paragraphs and list items. If Poppins cannot be used, acceptable substitutes with a similar geometric, humanist tone are Inter, Manrope, or SF Pro (system on macOS). Keep tracking values from tokens for the headlines to retain the tight, confident look.

## Layout

Spacing scale drives rhythm: use xl (64px) for section padding, lg (40px) for large intra-section gaps, md (28px) for heading-to-body spacing, sm (16px) for control groups and card padding, xs (6px) for micro-gaps. A standard content column with generous side padding keeps the page spacious; stack sections vertically with clear breathing room. Grids are simple: 2–3 column feature rows on desktop, collapsing to a single column on mobile with the same spacing increments.

## Elevation & Depth

Depth is subtle. Most components sit flat on #FAFAFA or white with small, soft shadows. Use measured_shadows.sm for cards and floating panels. The measured inner shadow creates a tactile pill effect on buttons or dark panels when needed. Where shadows are absent, rely on contrast between #FFFFFF cards and #FAFAFA background plus crisp text color (#1A1A1A).

## Shapes

Two radii define the language. Cards and panels use rounded.sm at 16px for approachable blocks. Interactive controls and CTAs use rounded.full at 9999px for distinctly pill-shaped buttons and chips. Avoid mixing additional radii to keep the system coherent.

## Components

Buttons and card variants are tokenized and should be used as defined.

- Button Primary: #1A1A1A background, #FAFAFA text, 44px height, 0 16px padding, rounded.full. Use for the main action.
- Button Secondary: #FAFAFA background, #1A1A1A text, 44px height, 0 16px padding, rounded.full. Use for secondary actions on light backgrounds.
- Button Link: #757575 text, no background, rounded 0. Use for tertiary navigation.
- Card: #FFFFFF background, #1A1A1A text, 20px padding, 16px radius, small shadow optional.

Distinctive components on this page:

### Top Navigation Bar
- Height ~ lg spacing; brand at left, simple link set plus a primary "Start for free" pill at right. Background #FAFAFA with no heavy shadow; use measured_shadows.sm only on scroll if needed.

### Hero Stack
- Headline uses Headline-lg (64px/600/-0.03em). Supporting body copy is Body-md 18px. CTA group: Primary, Secondary, and Link buttons spaced with sm (16px).

### Video Showcase Panel
- Wide dark panel using tertiary (#000000) for background inside a 16px-radius card. Place within a card frame on #FAFAFA; apply measured inner shadow for depth.

### Workflow Rail
- A vertical stack of steps: each uses Headline-xs (25px) as the step title with Body-md detail. Use md (28px) gap between steps and lg (40px) between groups.

### Feature Grid
- 2–3 column grid of features with Headline-sm/Headline-xs titles and Body-md. Cards or rows use #FFFFFF on #FAFAFA with 16px radii and sm shadow.

### Pricing Tier Cards
- Three cards using #FFFFFF, 16px radius, 20px padding. Heading in Headline-sm or md, price emphasized with Headline-md, features in Body-md. Billing toggle chips use rounded.full.

### Testimonial Quote Block
- Quotes set in Body-md with emphasized names below; use secondary (#757575) for roles. Card layout with 16px radius and sm shadow.

### Cookie Consent Bar
- Full-width strip over #FFFFFF with secondary text, primary and secondary pill buttons; use sm (16px) gaps and 16px radius on actions.

## Do's and Don'ts

Do
- Use Poppins at the exact sizes and tracking values provided; keep hero at 64px/600.
- Keep CTAs as 44px-high pills with 16px horizontal padding and clear hierarchy (primary first).
- Build sections on #FAFAFA with white (#FFFFFF) cards and light shadows only.
- Space sections with xl (64px) and inner content with lg (40px) or md (28px).

Don't
- Introduce new radii or square corners where pills or 16px rounds are expected.
- Add colored buttons or brand tints; the system is intentionally monochrome.
- Stack promotional badges or duplicate headings that compete with hierarchy.
- Use heavy drop shadows; prefer the sm shadow or none.

## Agent Prompt Guide

Quick color reference
- Text: #1A1A1A
- Background: #FAFAFA
- Border/Divider: #757575
- Accent/Dark Panel: #000000

1) Build the hero
- Container on #FAFAFA with 64px top/bottom padding.
- H1 in Poppins 64px, weight 600, line-height 1.05, letter-spacing -0.03em, color #1A1A1A.
- Paragraph in Poppins 18px/1.56, color #1A1A1A at 80% opacity or #757575.
- CTA row: Primary button (#1A1A1A bg, #FAFAFA text, height 44px, padding 0 16px, radius 9999px), Secondary button (#FAFAFA bg, #1A1A1A text, same size), Link button (#757575 text).
- Gaps: 28px between H1 and paragraph, 16px between buttons.

2) Create a three-card feature grid
- Section background #FAFAFA with 64px padding.
- Each card: #FFFFFF, radius 16px, padding 20px, small shadow (rgba(0,0,0,0.05) 0 1px 2px).
- Title in Poppins 25px/600; body in 18px/1.56.
- Grid gap 28px; use 40px between title and grid.

3) Workflow rail
- Stack 9–12 steps vertically.
- Step title: Poppins 25px/600, color #1A1A1A.
- Description: Poppins 18px/1.56, color #757575.
- Use 28px gap between steps, 40px between clusters; bullets or icons optional.

4) Pricing section
- Background #FAFAFA; section padding 64px.
- Three cards (#FFFFFF, radius 16px, padding 20px, small shadow) in a responsive grid.
- Plan name in Poppins 34px/600; price in 47px/600.
- Feature list in 18px/1.56; CTA is primary pill button (44px height, 0 16px padding).

## Similar Brands

- Notion: Similar black-on-white restraint and single-family typography; Runey uses rounder pills and stronger CTAs.
- FreshBooks: Shares the invoicing focus; FreshBooks leans on brand color while Runey stays monochrome.
- Bonsai: Also targets freelancers with end-to-end workflow; Runey's type is tighter and its spacing more modular.
- Basecamp: Plainspoken layout and big type; Runey uses smoother radii and lighter shadows.

More like this

Browse Finance →
strata.ws
Strata Productivity
Strata
The all-in-one real-time platform for your knowledge archive
Homepage · 2 hours ago
kitchen.co
Kitchen Blog Communication
Kitchen Blog
Kitchen.co’s blog uses a clean white canvas with a bold, oversized headline and brief subheading that establish strong hierarchy. A two-column grid…
Blog · 16 hours ago
daybridge.com
Daybridge Apps & Mobile
Daybridge
Bring work and life together in one fast, beautiful calendar
Homepage · 1 day ago
quickpick.space
QuickPick Design Tools
QuickPick
Keep your entire creative world organized in one space.
Homepage · 3 days ago