Skip to content
DesignMunkDesignMunk Submit a site

Numeric

numeric.io
Accounting AI that turns visibility into action.
AI Finance Webflow Homepage arizona Flare Booton
Share Visit site
numeric.io DESKTOP · 1440
Numeric

AI Breakdown

Design export

---
version: alpha
name: Numeric
description: Accounting AI that turns visibility into action.
colors:
  primary: "#080707"
  secondary: "#ac89fc"
  tertiary: "#7036ff"
  neutral: "#ffffff"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Arizona Flare
    fontSize: 52px
    fontWeight: 300
    lineHeight: 1.19
    letterSpacing: -0.015em
  headline-md:
    fontFamily: Arizona Flare
    fontSize: 39px
    fontWeight: 300
    lineHeight: 1.46
    letterSpacing: -0.026em
  headline-sm:
    fontFamily: Arizona Flare
    fontSize: 29px
    fontWeight: 300
    lineHeight: 1.18
    letterSpacing: -0.02em
  headline-xs:
    fontFamily: Booton
    fontSize: 21px
    fontWeight: 300
    lineHeight: 1.19
  body-md:
    fontFamily: Booton
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.4
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 10px
  sm: 22px
  md: 38px
  lg: 54px
  xl: 76px
components:
  button-primary:
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    height: 62px
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    height: 62px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Numeric: Flared Headlines, Electric Purple Split Hero

## Overview

Numeric's UI is enterprise-clean: dense information set in black on white, punctuated by a saturated purple accent. The voice is confident and direct—proof first, flourish second. Layouts are spacious with long vertical rhythm; content clusters into split heroes, tabbed product overviews, and testimonial stacks. When tokens don't cover a case, prefer clarity, high contrast, and restraint with color.

## Colors

- **primary (#080707):** Core ink for headlines, body text, and icons.
- **secondary (#ac89fc):** Soft lavender highlight for subtle accents and hovers.
- **tertiary (#7036ff):** Electric purple for hero panels, active states, and key accents.
- **neutral (#ffffff):** Base canvas for pages, cards, and inputs.
- **border (#e5e7eb):** Quiet dividers, input outlines, and grid separators.
- **surface (#ffffff):** Card and panel backgrounds on light mode.
- **on-surface (#080707):** Default text color on surfaces for maximum readability.

## Typography

- Headlines (lg/md/sm) use Arizona Flare at 52/39/29px, weight 300, with tight negative letter-spacing. It's self-hosted custom; agents cannot load it directly. Substitutes: Fraunces (Google), Cinzel (Google), or Cormorant Garamond (Google) for a flared/heritage serif feel.
- Eyebrow/section labels use headline-xs at 21px set in Booton. Body copy uses Booton 16px, line-height 1.4. Booton is also custom/self-hosted; substitutes: Inter (Google), Manrope (Google), or Work Sans (Google).
- Apply the serif strictly to major headings and key numerals; keep UI, navigation, and long-form text in the sans for legibility.
- Maintain the light (300) tone for headlines to preserve the calm, high-end feel.

## Layout

- Spacing scale: 10/22/38/54/76px. Use these as vertical rhythm—xs for micro gaps, sm for element padding, md–xl for section spacing and split-layout gutters.
- Grid favors split compositions: two-column hero (copy + product image) and tabbed sections that stack on smaller screens. Keep content blocks grouped by surface with generous white space.
- Cards use internal padding of 16px and sit within sections separated by md–xl spacing to avoid crowding enterprise copy.

## Elevation & Depth

- Shadows are minimal; only a soft small shadow is available (rgba(0,0,0,0.05) 0 4px 20px). Prefer flat surfaces.
- Hierarchy is expressed via whitespace, thin borders (#e5e7eb), and tonal panels (e.g., tertiary purple blocks). Reserve shadows for modals or featured screenshots.

## Shapes

- Two radii: 4px (sm) and 8px (md).
- Use 4px for interactive controls (buttons, inputs) to convey precision. Use 8px on cards and media frames for a slightly softer container.
- Keep shapes consistent within a component family; do not mix radii on a single surface.

## Components

- Button — Primary: 62px height, 4px radius, text #FFFFFF on a #080707 background for maximum contrast. Use for main CTAs like "Schedule a demo."
- Button — Secondary: 62px height, 4px radius, white background with #080707 text; optional border #e5e7eb when on white backgrounds.
- Button — Link: Text-only action in #080707 with zero radius. Use for "View case study →".
- Card: White surface, #080707 text, 8px radius, 16px padding; optional small shadow for emphasis.

### Announcement Banner
- Full-width strip using tertiary #7036FF with white text and small emoji. Vertical padding around xs–sm; place at very top for events and notices.

### Split Hero with Product Screenshot
- Left: headline-lg (52px Arizona Flare), short Booton paragraph (16px), and a CTA row. Right: screenshot framed over a solid #7036FF block. Outer spacing lg–xl.

### Email Capture + Demo Bar
- Inline email input paired with a 62px primary button. Input uses border #e5e7eb, 4px radius, and matches button height for alignment.

### Logo Marquee
- Single row of partner/customer logos on white. Use md–lg vertical spacing around the row; keep logos monochrome to foreground the primary palette.

### Product Tabs (Platform / Close / Cash / Analytics)
- Horizontal tabs set in Booton. Active tab highlights with tertiary #7036FF; panels use bullets with body-md and md spacing between items.

### Case Study Tiles / Testimonial Quotes
- Cards with 8px radius and 16px padding. Use the serif for pull-quotes and Booton for attribution lines; link style is button-link.

### Outcome KPI Tabs
- Short tabbed content with headline-md (39px) numerals and supporting Booton copy. Use tertiary for key numerals or accents sparingly.

### Footer Sitemap
- Multi-column link index on white. Links use button-link styling; sections separated with md–lg spacing and border #e5e7eb at the top.

## Do's and Don'ts

- Do keep text #080707 on #FFFFFF for long reads; reserve #7036FF for panels, actives, and key accents.
- Do use the light (300) serif only for headings; keep UI and paragraphs in the sans.
- Do keep buttons at 62px height and 4px radius for consistency across forms and CTAs.
- Don't introduce new grays; use #e5e7eb for all dividers and input borders.
- Don't overuse shadows; the system is predominantly flat—prefer whitespace and borders.
- Don't mix corner radii on the same surface; 4px for controls, 8px for containers.

## Agent Prompt Guide

Quick color reference
- Text: #080707
- Background: #FFFFFF
- Border: #E5E7EB
- Accents: #7036FF (primary accent), #AC89FC (soft accent)

1) Split hero with screenshot and CTA
"Create a two-column hero. Left column: headline at 52px in 'Arizona Flare', weight 300 (fallback: Fraunces), body copy at 16px in 'Booton' (fallback: Inter). Add an inline email input (height 62px, 4px radius, border #E5E7EB) followed by a primary button (height 62px, 4px radius, background #080707, text #FFFFFF). Right column: place a product screenshot over a solid #7036FF panel. Use 76px outer top/bottom spacing and 38px gutter between columns."

2) Logo marquee band
"Insert a white section with 54px top and bottom padding. Center a single row of grayscale logos with equal spacing (22px between logos). Background #FFFFFF, text #080707. No shadows."

3) Tabbed product overview
"Build a horizontal tab set labeled Platform, Close, Cash, Analytics in 'Booton' 16px. Active tab text color #7036FF. Below, show a content panel with a short list set in Booton 16px, 22px between bullets. Section padding: 54px top and bottom. Keep surfaces #FFFFFF with borders #E5E7EB for separators."

4) Testimonial card
"Create a card (background #FFFFFF, text #080707) with 8px radius and 16px internal padding. Place a pull-quote heading at 29px 'Arizona Flare' weight 300, followed by attribution in Booton 16px. Optionally apply a small shadow rgba(0,0,0,0.05) 0 4px 20px."

5) Closing CTA band
"Add a centered section with headline at 39px 'Arizona Flare' weight 300, a short Booton 16px line, and a primary button (62px height, 4px radius, background #080707, text #FFFFFF). Use 76px section padding and keep background #FFFFFF with subtle border #E5E7EB at the top."

## Similar Brands

- Brex — Monochrome base with strong accent color and enterprise proof; Numeric is more typographically expressive with a flared serif.
- Stripe — Purple accents and clean grids; Stripe leans gradient and motion, Numeric stays flatter and copy-driven.
- Ramp — Minimal black-and-white with spacious layouts; Ramp's green accent replaces Numeric's purple.
- FloQast — Direct competitor in close management; more utilitarian visuals and fewer editorial display headings than Numeric.
- Rippling — Precise UI with strong brand color blocks; Numeric uses a lighter serif and less shadow overall.

More like this

Browse AI →
getfernand.com
Fernand AI
Fernand
Calm customer support for SaaS founders: AI on the front line.
Homepage · 12 hours ago
openlayer.com
Openlayer AI
Openlayer
Control your AI, layer by layer.
Homepage · 16 hours ago
lev8.com
Lev8 AI
Lev8
Turn the live web into people and business intelligence.
Homepage · 22 hours ago
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 23 hours ago