Tax and Finance Website Design SystemDESIGN.md alpha

Calm, precise design system for tax and finance tools: company lookup, VAT status checks, financial statement viewers and calculators. Navy on white, with green, amber and red reserved strictly for statuses.

primary#1b2f6b
neutral#5b616e
surface-soft#f5f7fa
primary-press#13224f
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayInstrument Sans · 44px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

headline-lgInstrument Sans · 32px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

headline-mdInstrument Sans · 20px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

leadInstrument Sans · 20px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body-mdInstrument Sans · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

label-mdInstrument Sans · 15px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

label-smInstrument Sans · 13px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

numberInstrument Sans · 16px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

statInstrument Sans · 26px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Corner Radius

16px
16px
16px
10px
12px
12px
8px
999px

Spacing

Base: 4px
4px
8px
16px
24px
32px
48px
72px
1240px

Calm, precise design system for tax and finance tools: company lookup, VAT status checks, financial statement viewers and calculators. Navy on white, with green, amber and red reserved strictly for statuses.

Components

Buttons

Inputs

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Chips

okwarningerrorneutral

Elevation & Depth

search-field
result-card

Do's & Don'ts

Do

Do put the tool at the top of every page and the result right under it
Do give every status a symbol, a word and a color; give every number tabular figures
Do name the data source next to every registry result

Don't

Don't use green, amber or red outside statuses - not in icons, charts or decoration
Don't use stock photos or banners that push the tool down
Don't imitate a government website: no national emblems or flag colors
Don't use all caps in headings
Responsive Behavior

Desktop first. On phones the search field breaks into two rows (field and date, then a full-width button), the registry table turns into cards (registry and status on the first line, key number on the second), calculator inputs stack into one column and wide tables drop secondary columns.
Download .md
Storm Cube Marketing Agency Storm Cube Marketing Agency @stormcube
License MIT
Uploaded today
Version v1
File size 11.1 KB
Downloads 1
Copies 0
Inspired by Source
dashboard fintech light minimal saas

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/stormcube/tax-and-finance-website-design-system and implement it in my code

Don't have the MCP? Install it here