Revasive / Visual standards / 01
Quietly considered.
Consistently made.
A working reference for everyone building Revasive. The examples below use the same styles as the site. Start here before adding a page or a component.
01 / Foundation
Paper and ink.
Warm neutral surfaces. Dark, readable text. A single restrained accent. Status colors carry meaning.
Paper
--paper
#f8f7f3Surface
--surface
#ffffffInk
--ink
#282b26Secondary text
--ink-soft
#65685fAccent
--accent
#754336Rules
--line
#d9dbd202 / Voice
Two type families.
Georgia for editorial headings. Arial for interfaces and reading. Monospace is reserved for references and specimen labels.
Display / 56–92px / Georgia
A personal touch.
Section heading / 32–50px / Georgia
The details matter.
Body / 16px / Arial / 1.6 line height
Each note starts with your words. Share a message and a mailing list, and we’ll take care of the handwriting.
Labels / 14px · Metadata / 12–13px
03 / Interaction
Familiar controls.
48px controls, 3px corners, explicit labels. Tab through these examples to inspect focus. These controls are interactive specimens.
Error example: We couldn’t save your request. Please try again.
04 / Rhythm
Space with purpose.
Use the shared spacing scale. 24–32px inside forms; 48–96px between sections. Use borders to separate content before adding a container.
Content width: 1,200px maximum. Page gutters: 40px desktop, 20–24px mobile.
05 / Editorial rules
Keep the intention.
Each addition should feel like it belongs to a small, careful correspondence service.
Keep
- One clear primary action per task or section.
- Warm paper, dark ink, genuine photography.
- Short, practical labels and honest service details.
- Shared controls and clear keyboard focus.
- Calm rows for history; boxes for selectable options.
- Readable body text and generous line spacing.
Avoid
- Gradients, glow, floating decorations, and ornamental icons.
- Rounded pill buttons and shadows on every panel.
- Arbitrary accent colors or custom values per page.
- Oversized marketing headings above working forms.
- Fabricated prices, turnaround times, or success metrics.
- Fake working controls, $0 invoice placeholders, or automatic mailing promises.