Brand
Identity, typography, color, voice, motion, and assets.
Logo
Wordmark
The Proper wordmark is set in Newsreader italic. Lowercase, single word, with a slight negative tracking. It is the only official logotype.
On dark
On light
Icon only
Clear space
Always leave at least one “P” of clear space on every side of the wordmark. Nothing may cross this boundary — not text, not imagery, not a button.
Minimum size
Do not render the wordmark below 14px on screen or below 6mm in print.
14px20px32px48px72pxIncorrect usage
The wordmark must remain unmodified. No color shifts, no warping, no outlines, no drop shadows.
Don't — stretched
Don't — recolored
Don't — drop shadow
Don't — rotated
Typography
Typefaces
Typeface 01 — Editorial voice
Newsreader
font-headingThe quick brown fox jumps over the lazy dog.
- Use
- Headlines, hero statements, the wordmark. Always italic, always negative tracking.
- Weights
- Italic 400, 500
- License
- SIL Open Font License — free for all use
Typeface 02 — Signal
Inter
font-bodyThe quick brown fox jumps over the lazy dog.
- Use
- Body copy, UI labels, buttons, long-form reading. Neutral and legible at every size.
- Weights
- 400, 500, 700
- License
- SIL Open Font License — free for all use
Scale
The scale is deliberately small. Hierarchy comes from italic vs. roman, font family, and tracking — not size.
72pxHeroThe quick brown fox48pxSectionThe quick brown fox28pxCard titleThe quick brown fox20pxSubsectionThe quick brown fox14pxBodyThe quick brown fox12pxMetaThe quick brown foxEditorial patterns
Eyebrow + headline
Section 01 — Overview
Everything in one place.
Headline + lede
Quiet surfaces, loud content.
Strip the chrome. Let the work do the talking.
Color
Color is a system of tokens, not hex values. Every surface references these CSS variables — never a raw color.
Surfaces
Near-black backgrounds. The product lives on --bg-base; cards and menus lift one or two steps.
Base
--bg-base#0e0e0eSurface 1
--bg-surface-1#141414Surface 2
--bg-surface-2#1e2020Surface 3
--bg-surface-3#1f2020Accents
Lavender is the primary accent — focus rings, active nav, linkable text. Gold is secondary — used sparingly.
Lavender
--accent-lavender#c3c3efLavender muted
--accent-lavender-muted#b5b5e1Gold
--accent-gold#c0a67cGold secondary
--accent-gold-secondary#b49a71Text
Four levels of hierarchy plus text-on-accent for content placed on a lavender or gold fill.
Primary
--text-primary#ffffffSecondary
--text-secondary#9d9e9eMuted
--text-muted#737373Dimmed
--text-dimmed#525252On accent
--text-on-accent#1e2021Borders
Borders are always quiet — 3–10% alpha. They imply separation; they never shout it.
Subtle
--border-subtle#48484803Default
--border-default#4848480aStrong
--border-strong#48484817Semantic
Reserve these for state, not decoration. Success on completion. Warning on risk. Error on failure.
Success
--success#22c55eWarning
--warning#f59e0bError
--error#ef4444Info
--info#3b82f6Voice & tone
Principles
01
Be decisive
Say what it is. Cut the hedges. “It might be worth considering” becomes “Do it.”
02
Use plain words
No jargon when a plain word works. “Leverage” is “use.” “Utilize” is always wrong.
03
One sentence at a time
Short sentences hit harder. Long ones earn their length or get cut.
04
Respect the reader
No hype. No all-caps urgency. Assume the reader is smart, busy, and fair.
Do / don't
Empty state
Don't
Oops! It looks like you don't have any invoices yet. Let's change that!
Do
No invoices yet. Add one to start a ledger.
Error message
Don't
Something went wrong. Please try again later or contact support.
Do
Save failed — network timeout. Retry or check your connection.
Marketing lede
Don't
Proper is a revolutionary AI-powered platform that empowers accountants to unlock unprecedented efficiency.
Do
Proper is bookkeeping, automated. Your ledger, closed in minutes.
Confirmation
Don't
Are you sure you really want to delete this? This action cannot be undone!!!
Do
Delete invoice INV-042? This can't be undone.
Glossary
Words we use consistently, and words we avoid.
ledgerPrimary noun. Always "a ledger," never "the books."closeThe month is closed, not "finalized."tenantInternal only. Customer-facing: "workspace."AILowercase-capital, no hype. "Proper uses AI," not "powered by A.I."ProperThe company. Always capitalized, no ".ai" suffix in copy.
Motion
Principles
Fade and slight blur. No movement. Everything that enters the viewport fades opacity 0 → 1 and de-blurs 6px → 0. Nothing translates, scales, or rotates.
01
One primitive
Fade + deblur only. No translate, scale, or rotate. Consistency beats variety.
02
Appearance only
Motion is for mounting and revealing content. Hover and focus states are discrete — never animated.
03
Respect reduced motion
All animations honor prefers-reduced-motion. Duration drops to 0.01ms; content still transitions discretely.
Tokens
Three CSS custom properties define the entire animation system.
--duration-fade240ms--ease-fadecubic-bezier(0.2, 0, 0, 1)--blur-enter6pxComponents
Three primitives cover every animation use case. All exported from @proper/ds. Planned in Plan 6.
<Fade>Always-on mount animation. Wraps any element that should fade + deblur when it first renders. Used on page roots and new content blocks.
<Fade>…content…</Fade><Reveal>IntersectionObserver-gated fade. Triggers once the element enters the viewport (threshold 0.1). Used on sections in long-scroll pages.
<Reveal>…section…</Reveal><Presence>Keeps a child mounted for --duration-fade after visibility flips false, so the reverse fade completes before unmount.
<Presence show={open}>…panel…</Presence>Iconography
Library
Proper uses Google Material Symbols Outlined. Variable font — weight, optical size, and fill are all adjustable via CSS font-variation-settings.
Common icons
searchcloseaddcheckarrow_forwardarrow_backchevron_rightchevron_leftmore_horizmore_vertsettingspersonhomefolderdescriptionuploaddownloadeditdeletevisibilityvisibility_offlocklock_opennotificationswarningUsage
<span className="material-symbols-outlined">search</span>Style guidelines
All icons use the Outlined variant. Four CSS axes control appearance.
opsz (size)20 / 24 / 48wght (weight)300 / 400FILL (fill)0 / 1GRAD (grade)0Set axes via CSS: font-variation-settings: 'wght' 300, 'opsz' 24, 'FILL' 0
Do / don't
Do
Use Outlined consistently
All icons across the product use the Outlined variant. Filled is only used to signal an active or selected state via the FILL axis.
Don't
Don't mix icon families
Never mix Material Symbols with Lucide, Heroicons, or any other set. Consistency matters more than individual icon quality.
Do
Match size to context
20px in dense UI (tables, sidebars), 24px default (buttons, headings), 48px display (empty states, hero).
Don't
Don't use icons without labels in dense UI
Icon-only buttons need a tooltip. Never rely on icon meaning alone in compact interfaces — not everyone shares the same visual vocabulary.
Photography
Brand photography assets. Upload images to the bank for use in marketing, product, and recruiting.
Gallery
Loading...
Upload
Add brand photography to the image bank. Accepted formats: JPEG, PNG, WebP, AVIF.
Downloads
Logo files
Always use the SVG source. PNG at 2× is provided for contexts that don't support SVG.
SVGWordmark — darkComing soonSVGWordmark — lightComing soonSVGIconComing soonPNG @2×Wordmark — darkComing soon
Fonts
All three typefaces are available free under the SIL Open Font License.
- NewsreaderGoogle FontsSIL OFL
- InterGoogle FontsSIL OFL