Skip to content
DesignMunkDesignMunk Submit a site

Graphite Financial

graphitefinancial.com
Your financials, finally under control—clean books, confident decisions.
Business Finance Homepage Manrope
Share Visit site
graphitefinancial.com DESKTOP · 1440
Graphite Financial

AI Breakdown

Design export

---
version: alpha
name: Graphite Financial
description: Your financials, finally under control—clean books, confident decisions.
colors:
  primary: "#000000"
  secondary: "#1c445d"
  tertiary: "#eec585"
  neutral: "#ffffff"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Manrope
    fontSize: 50px
    fontWeight: 500
    lineHeight: 1.1
  headline-md:
    fontFamily: Manrope
    fontSize: 38px
    fontWeight: 500
    lineHeight: 1.21
  headline-sm:
    fontFamily: Manrope
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.21
  headline-xs:
    fontFamily: Manrope
    fontSize: 21px
    fontWeight: 500
    lineHeight: 1.2
  body-md:
    fontFamily: Manrope
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 3px
  md: 30px
spacing:
  xs: 6px
  sm: 16px
  md: 46px
  lg: 66px
  xl: 76px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 20px 25px
    height: 55px
  button-secondary:
    backgroundColor: "#1d425d"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 20px 25px
    height: 55px
  button-link:
    textColor: "#397b88"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 10px 0px
---

# Graphite Financial: Navy Bands, Gold CTAs, Relentless Contact

## Overview

Graphite targets venture-backed and fast-growing companies that need board-ready accounting, tax, payroll, finance, and HR. The interface is confident and orderly: high-contrast text on white, navy emphasis bands, and a single warm gold accent for actions. Spacing is generous and predictable to keep dense topics readable. The tone is professional and steady rather than playful.

## Colors

- **primary (#000000):** Core text and headline ink on light surfaces.
- **secondary (#1c445d):** Navy emphasis backgrounds, dark buttons, and strong dividers.
- **tertiary (#eec585):** Primary action and highlight color for key CTAs and icons.
- **neutral (#ffffff):** Base page background and card interiors.
- **surface (#ffffff):** Container backgrounds where content needs separation without color.
- **on-surface (#000000):** Text and icon color placed on white or light surfaces.

## Typography

All typographic levels use Manrope. Headline-lg (50px/1.1, 500) is for the hero H1; headline-md (38px/1.21, 500) introduces major sections; headline-sm (28px/1.21, 500) labels features and FAQs; headline-xs (21px/1.2, 500) works for card titles and eyebrow headings; body-md (16px/1.5, 400) is the default paragraph. Manrope is freely available from Google Fonts. If unavailable, use Inter, Plus Jakarta Sans, or IBM Plex Sans for a similar modern, low-contrast sans profile and x-height. Keep headings at weight 500 to match the measured design; reserve 400 for body copy.

## Layout

Spacing favors clear vertical rhythm: xs 6px for micro-gaps, sm 16px for inline spacing and small grid gutters, md 46px for inner section padding and card spacing, lg 66px for section top/bottom on desktop, and xl 76px for hero or major breaks. Use a standard multi-column grid with wide margins; align CTAs and form fields to the same column edges. On mobile, collapse lg/xl section paddings toward md while preserving 16px interior gaps. Content bands alternate white and secondary navy to segment long reads without extra decoration.

## Elevation & Depth

Depth is restrained. Use shadow sm (rgba(0,0,0,0.05) 0 0 4px 4px) for floating CTAs or small cards. Use shadow md (rgba(0,0,0,0.3) 0 0 10px 0) sparingly for focus states or sticky nav, and lg for modals. Many sections rely on tonal contrast instead of shadows—white cards on white pages use spacing; navy bands provide hierarchy by background change.

## Shapes

Two radii set the language: sm 3px for buttons and inputs—technical and precise; md 30px for cards and large containers—friendly without becoming pill-shaped. Do not mix additional radii; the contrast between 3px controls and 30px containers is the cue for component role.

## Components

Buttons and card are foundational and should match token values.

- Button—Primary: background #eec585, text #000000, 3px radius, 55px height, 20px×25px padding. Use for the main CTA in any group.
- Button—Secondary: background #1d425d, text #ffffff, 3px radius, 55px height, 20px×25px padding. Pair with the primary in button groups.
- Button—Link: text #397b88, radius 0. For inline actions only; never a substitute for primary/secondary.
- Card: white background, black text, 30px radius, 10px top/bottom padding; rely on md (46px) padding from the container for readable content.

### Global Navigation
- Background: #ffffff. Text: #000000. Right-aligned CTA uses the secondary button (#1d425d). Horizontal gaps at sm (16px). Drop shadow sm only when sticky.

### Hero Header
- H1 uses headline-lg (50px/1.1, 500). Subhead uses body-md. Two-button group: primary (#eec585) then secondary (#1d425d). Vertical spacing: xl (76px) above and below content.

### Service Tag Row
- Inline list of small items with checkmarks. Use body-md (16px) with sm (16px) gaps. Icons may pick up #eec585 to echo the primary CTA.

### Dark Value Proposition Band
- Background: secondary navy (#1c445d). Headings set in headline-md (38px) and headline-sm (28px). Body text #ffffff. Vertical padding: lg (66px).

### Lead Capture Form
- White card container (30px radius) on white or navy band. Field corners 3px. Button: secondary or primary depending on context. Section margin: md (46px) between groups.

### Testimonial Strip
- Quotes in white cards (30px radius) on a neutral or navy band. Star icons may use #eec585. Use headline-xs (21px) for names, body-md for quotes.

### FAQ Accordion
- Each item is a surface card with 3px control corners. Question set in headline-xs (21px); answer in body-md. Divider lines can use secondary (#1c445d).

### Footer Mega-menu
- Background #ffffff. Multi-column lists using body-md with sm (16px) vertical rhythm. CTA uses secondary button; social links use the link color #397b88.

## Do's and Don'ts

- Do reserve #eec585 for the primary action or key highlights; overuse weakens its signal.
- Do keep all headings at weight 500 and body at 400 to match the measured hierarchy.
- Do space sections with lg (66px) or xl (76px) on desktop; use md (46px) inside containers.
- Don't swap the button text colors—primary buttons must be #000000 on #eec585; secondary must be #ffffff on #1d425d.
- Don't introduce new corner radii; use 3px for controls and 30px for containers only.
- Don't rely on heavy shadows; prefer tonal bands and whitespace for separation.

## Agent Prompt Guide

Quick reference — Text: #000000. Background: #ffffff. Border/Dividers: #1c445d. Accent/Primary action: #eec585.

1) Build a hero with dual CTAs: white background (#ffffff); H1 set in Manrope 50px/1.1, weight 500; subhead Manrope 16px/1.5, weight 400; spacing top/bottom 76px; place two buttons—Primary: #eec585 text #000000, 55px height, 20px×25px, 3px radius; Secondary: #1d425d text #ffffff, same sizing; gap 16px.

2) Create a navy emphasis band: section background #1c445d; heading Manrope 38px/1.21, 500; supporting copy 16px/1.5, 400 in #ffffff; vertical padding 66px; optional white card (30px radius) centered with md (46px) inner padding.

3) Build a testimonial card: container background #ffffff, text #000000, radius 30px; quote set in 16px/1.5; name/title in 21px/1.2, 500; apply shadow sm (rgba(0,0,0,0.05) 0 0 4px 4px); accent stars in #eec585; outer margins 46px.

4) Assemble an FAQ accordion: questions in Manrope 21px/1.2, 500; answers in 16px/1.5, 400; borders/dividers #1c445d; item corners 3px; section margin 66px.

5) Footer layout: white background; column headings 21px/1.2, 500; links 16px/1.5, 400 in #000000 or link color #397b88; column and row gaps 16px; include a secondary button (#1d425d) for "Book a meeting."

## Similar Brands

- Pilot.com — Also targets venture-backed startups with sober typography; Graphite adds a warmer gold accent where Pilot stays strictly blue.
- Kruze Consulting — Startup accounting with case-led copy; Graphite is more spacious and uses navy bands for hierarchy.
- Bench — Bookkeeping at scale; Bench is friendlier with illustration and green, while Graphite aims for boardroom clarity with navy and gold.
- Carta — Finance infrastructure with an enterprise tone; Carta leans grayscale and product UI, Graphite leans service narratives and CTAs.

More like this

Browse Business →
finera.com
Finera Finance
Finera
The Art of Payments.
Homepage · 5 days ago
livetheresidency.com
The Residency Business
The Residency
Live and grow with ambitious builders through 3-month residencies.
Homepage · 6 days ago
helloaria.eu
Aria Finance
Aria
Aria makes late payment irrelevant in B2B
Homepage · 7 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 · 1 week ago