Beany Design System v0.1

The system behind the portal.
Clean, confident, approachable.

A complete, documented UI foundation for Beany's client portal: colour with defined roles, a type scale, spacing rules and a full component library. Every value is a design token, so the whole thing hands straight to Claude code for a React and Tailwind build.

Built to be handed to Claude.

This is not a flat picture of a UI. It is the working UI, expressed as semantic HTML and CSS custom properties that map one to one onto a Tailwind theme. The token table at the bottom is the contract: change a value once, the portal and every component update together.

01Principles

Beany sits at the intersection of human warmth and tech precision. The system encodes that in three rules.

Warm, not soft

A serif for the human moments, a grotesque for the data. Warm off-white surfaces instead of cold grey. One apricot accent for the human touch.

Precise with numbers

Money is the product. Every figure uses tabular lining numerals so columns align to the pixel. Status colour is never decorative, it always means something.

Calm by default

Generous spacing, hairline borders, one primary action per view. Nothing shouts. This is the opposite of the busy, blue, typical accounting dashboard.

02Colour system

Each colour has a defined role. Primary green carries actions and positive states, apricot is the single warm accent used sparingly, and the four status colours each map to one meaning. Surfaces and text run on a warm neutral ramp, never pure grey.

Brand

PrimaryActions, links, positive#0F6B4F

Primary 700Hover, pressed#0B533D

Primary 50Tint surface, active nav#E4F0EA

AccentThe human touch, sparing#E07A43

Surface & text

BoneApp background#F7F4EE

PaperCards, surfaces#FFFFFF

InkPrimary text#1B1A17

Ink 2Secondary text#5C574E

Status

SuccessPaid, reconciled#2F8F5B

WarningAwaiting, due soon#B27D17

DangerOverdue, needs review#C24A39

InfoSent, neutral notice#2E6F8E

03Typography

Two families. Fraunces, a warm optical serif, for display and key figures. Hanken Grotesk, a clean humanist sans, for all UI and body. Spline Sans Mono for token labels and code. The scale is a 1.2 ratio on a 16px base.

DisplayFraunces 500 · 48 / 1.05 · --t-3xl

Page headingFraunces 500 · 36 / 1.1 · --t-2xl

Section titleFraunces 500 · 28 · --t-xl

Card headingHanken 600 · 22 · --t-lg

Body, the default reading size for the portalHanken 400 · 16 / 1.55 · --t-base

Secondary & table textHanken 400 · 14 · --t-sm

Label / overlineSpline Mono · 12 · --t-xs

$48,920.00Figures: tabular lining numerals

04Spacing & layout

One 4px base unit drives the whole layout. Components, padding and gaps all snap to the scale below, so rhythm stays consistent across every screen. The portal uses a 12-column fluid grid with a 260px fixed sidebar.

Spacing scale (4px base)

--s-1 · 4

--s-2 · 8

--s-3 · 12

--s-4 · 16

--s-5 · 24

--s-6 · 32

--s-7 · 48

--s-8 · 64

Radius & elevation

pill

sh-1 raised · sh-2 floating · sh-3 modal

05Component library

Every component the portal needs, in its real states. These are the exact elements rendered live on the dashboard, not redrawn for the docs.

Buttons

Form inputs

Business name

Amount

EmailPlease enter a valid email address.

Email me before each filing

Status badges

Paid Awaiting Overdue Sent Draft

Avatars

Progress

Alerts

Filed on time.

Your May GST return is in.

GST due soon.

$4,210 is due on 28 July.

Invoice overdue.

#1039 is 9 days past due.

New document.

Hana shared your cashflow forecast.

Data table

Invoice	Client	Amount	Status
#1042	The Corner Cafe	$3,200.00	Paid
#1041	Harbourside Bistro	$2,640.00	Awaiting
#1039	Ponsonby Deli	$1,200.00	Overdue

Cards, segmented control & KPI

Cash on hand

$48,920

8.2%

06Tokens, ready for Claude

This is what makes the handoff fast. The design lives as CSS custom properties that map directly onto a Tailwind theme and a tokens.json. Hand this section plus the markup to Claude code and it can scaffold the React component library without guessing a single value.

Core tokens

--color-primary	#0F6B4F	Actions, links, positive amounts
--color-accent	#E07A43	Single warm highlight
--color-bg	#F7F4EE	App background
--color-ink	#1B1A17	Primary text
--font-display	Fraunces	Headings, figures
--font-ui	Hanken Grotesk	UI and body
--radius	12px	Default corner
--space-unit	4px	Spacing base, scale 1–8

tailwind.config.js

// drop straight into theme.extend
colors: {
  primary: '#0F6B4F',
  accent: '#E07A43',
  bone:   '#F7F4EE',
  ink:    '#1B1A17',
},
fontFamily: {
  display: ['Fraunces'],
  sans:    ['Hanken Grotesk'],
},
borderRadius: { DEFAULT: '12px' },

Button, as Claude would build it

// React + Tailwind, from the token set
function Button({ children }) {
  return (
    <button className="inline-flex
      items-center gap-2 rounded
      bg-primary px-[18px] py-[10px]
      font-semibold text-white
      hover:bg-[#0B533D]">
      {children}
    </button>
  );
}