CounselbookLegacy format

A design system for law firms, contract review platforms, and legal research tools with warm cream paper surfaces, deep navy ink, and brass accents for precision interactions.

Background#F5EFE2
Surface#FBF7EC
Surface Elevated#FFFFFF
Surface Sunken#EDE5D3
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplaySource Serif 4, Charter, Georgia, serif · 44px · SemiBold

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

H1Source Serif 4, Charter, Georgia, serif · 32px · SemiBold

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

H2Source Serif 4, Charter, Georgia, serif · 24px · SemiBold

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

H3Source Serif 4, Charter, Georgia, serif · 19px · SemiBold

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

Body Large (Document)Source Serif 4, Charter, Georgia, serif · 17px · Regular

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

Body (UI)Inter, Söhne, system-ui, sans-serif · 15px · Regular

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

SmallInter, Söhne, system-ui, sans-serif · 13px · Regular

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

CaptionInter, Söhne, system-ui, sans-serif · 12px · Regular

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

CitationSource Serif 4, Charter, Georgia, serif · 13px · italic

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

CodeJetBrains Mono, IBM Plex Mono, monospace · 13px · Regular

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

Spacing

Base: 4px
4px
8px
12px
16px
24px
32px
48px
64px
96px
128px

A design system for law firms, contract review platforms, and legal research tools with warm cream paper surfaces, deep navy ink, and brass accents for precision interactions.

Components

Buttons

Elevation & Depth

Base
Section Divider
Paper Drop
Document Lift

Do's & Don'ts

Do

Reserve brass for interactive elements and active accents
Use serif for text conveying authority (headings, citations)

Don't

Use pure black ink (#000000), always use #0C1B2A
Introduce glassmorphism or blurred backgrounds — use paper elements instead

Icons

Font Awesome
?
friendly

Library: Font Awesome · Style: outline

Motion

Documents don't bounce. Motion is restrained and functional. Standard duration is 200ms with cubic-bezier(0.4, 0, 0.2, 1) easing. Fast interactions use 120ms; slower panel reveals use 320ms. No bouncy spring physics. Panel transitions are slides only — no scale or rotation entrances. The single exception: annotation pins pulse for 320ms ease-out on creation to draw the eye.

Voice and Tone

Declarative, never exclamatory. No exclamation marks.

Active voice. Prefer "Reviewed contract" over "The contract was reviewed."

No emoji anywhere — not in copy, not in toast notifications, not in empty states.

Empty states cite the section in legal idiom: "No filings under §12(b)(6)." rather than "Nothing here yet!"

Toasts and confirmations use the language of action: "Motion filed," "Brief saved to docket."

Download .md

License MIT
Uploaded 1 weeks ago
Version v1
File size 8.6 KB
Downloads 5
Copies 0

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/duanhdan/counselbook and implement it in my code

Don't have the MCP? Install it here