Design guidelines
Best practices for logos, color, type, and motion
Our design system helps us create a memorable, coherent, and consistent brand.
Logo usage
The mark is a single gesture — a brushstroke that resolves into a checkmark. Give it room; never crowd it.
Clearspace
Keep padding equal to at least a quarter of the mark's width on every side.
The don'ts
The mark is one solid form in brand blue, black, or white. Each modification below weakens it.
Typography
Two typefaces. Onest carries every heading — geometric, confident at semibold. Geist handles body copy. Hierarchy from size, not weight.
Try it live
Switch between our two faces, then push the size, weight, and tracking.
Heading scale
All headings are Onest Semibold. Each step lists its exact size, line height, and tracking — tracking tightens as size grows.
Visuvate
Design in details
Build with intent
Premium websites for considered brands
Every detail contributes to the whole
A brand is the sum of its details — or it is nothing
Paragraph scale
Body copy is Geist Regular, set in sentence case. The eyebrow and caption styles close out the scale.
Visuvate builds premium websites for considered brands — designed in details, shipped with intent.
Every spacing decision, every transition, every word contributes to the whole.
We are a small studio. We work with a handful of clients a year, and we give each the discipline it deserves.
Supporting copy and captions use the smaller body size — set in Geist Regular for sustained, comfortable reading.
Image caption · Aurelia identity system, 2025
More than a studio
AaBbCc123#$%&→%
AaBbCc123#$%&→%
AaBbCc123#$%&→%
Color
Lead with blue, black, and white. Color is used with intent, never abundance — secondaries rotate one at a time.
Main palette
Tap any color to copy its hex. One blue, one black, one white — the center of the blue ramp is the canonical brand value.
Grayscale
Ten steps from near-black to near-white. Used semantically — backgrounds, surfaces, borders, text.
Secondary palette
Five accents plus rose, used one at a time — never combined. The rotation itself becomes the brand.
The system in one rule
Every asset uses black, white, and one color. Choose the color that fits — but only choose one.
Designing for restraint
Aurelia, end to end
Color don'ts
Three rules keep the palette disciplined.
Layout & grid
Every edge respects the grid. Structure is invisible, but always present.
12-column grid
A 12-column grid with consistent gutters governs every page.
Spacing scale
All spacing steps from an 8px base.
Motion
Movement carries narrative. Motion is a tool for clarity, never decoration.
Standard ease
cubic-bezier(0.22, 0.61, 0.36, 1) · 280ms. The default for most transitions.
Spring
cubic-bezier(0.34, 1.56, 0.64, 1). For playful, high-emphasis moments.
Fade & scale
opacity + scale, 280ms. For entrances and reveals on scroll.
Principles
Three rules govern every animation.
Fast in, slow out.
Elements enter quickly and settle gently. 180–600ms, never longer.
One thing at a time.
Motion directs attention. Stagger, don't stack.
Respect reduced motion.
Honor prefers-reduced-motion. Accessibility is part of the craft.
The brand in context
The system at work across the surfaces the studio touches most. None feel like the others — all feel like Visuvate.
Premium websites for
considered brands.
Aurelia — a quieter luxury.
16 × 9 · low-key
42 Lavelle Road, Ashok Nagar · Bengaluru 560001
Company No. 14831029
Attn. Anita Krishnan, Brand Director
Indiranagar 100ft Road, Bengaluru 560038
Dear Anita,
Following our review this morning, we have attached the revised system documentation, the Q3 deliverables schedule, and a shorter cover note from the studio for the board.
The visual direction we discussed — a quieter register that places the work, not the machinery, at the centre — is reflected throughout the proposal.
With regard,