VisQuanta design system
Design system.
Every color, text style, surface, spacing value and component VisQuanta is built from, bound to the live styles so this page always shows the current system.
One system. Every new page.
How to use
Build each new page from this design system: the color and text styles and the component catalog below. Compose it from the existing components.
Recommended model: GPT 5.6 Sol or above.
VisQuanta · Generated from the live project on September 26, 2026
01 · Colors
Eight tokens. No accent.
VisQuanta is warm and quiet: an off-white page, two stone surfaces for layering, two borders for edges and three ink tones for type. There is no accent color. Contrast and type carry the hierarchy.
canvas
rgb(251, 250, 246)
Page background on every breakpoint.
surface
rgb(244, 242, 236)
Alternate section fill and large panels. One per run of sections.
stone
rgb(236, 233, 224)
Elements that sit on a surface: chips, nested panels.
control-border
rgb(231, 227, 217)
The hairline. Card edges and dividers.
ash
rgb(177, 172, 160)
Emphasis edges, focus rings, and quiet glyphs.
smoke
rgb(140, 136, 126)
Captions, metadata, secondary info.
graphite
rgb(86, 82, 74)
Paragraphs and descriptions.
ink
rgb(28, 26, 21)
Headings and primary text.
02 · Typography
Sentient for headlines. Onest for everything else.
Two families carry the site. Sentient Light gives headings a calm, editorial voice with tight tracking. Onest handles body copy, labels and buttons. Never mix in a third font.
Headings/Heading 1 · Page hero title · Sentient Light 56px, −0.05em, 1.05
The AI employee who never sleeps.
Headings/Heading 2 · Section title · Sentient Light 48px, −0.05em, 1.05
Three ways Nia runs your store.
Headings/Heading 3 · Sub-page title, large statement · Sentient Light 40px, −0.05em, 1.15
Every call, answered.
Headings/Heading 4 · Quotes, statements · Sentient Light 30px, −0.05em, 1.25
Now every lead gets a reply.
Headings/Heading 5 · Card title · Onest Regular 20px, −0.02em, 1.35
Book in seconds
Headings/Heading 6 · Hero subtitle · Onest Regular 18px, 1.4
An AI employee who answers every call, text, and lead for your store.
Body/Body Large · Lead paragraph · Onest Regular 18px, 1.4
Nia keeps booking service visits while your team sleeps.
Body/Body Medium · Body copy, section intros · Onest Regular 16px, 1.45
Nia handles sensitive customer data with the rigor your security team expects.
Body/Body Small · Names, roles, captions · Onest Regular 14px, 1.5
Service Manager at VisQuanta Motors
Other/Button Text · Buttons and links · Onest Medium 14px, 1.5
Other/Tag · Other/Tag 2 · Badges and pills · Onest 16px and Onest Medium 12px
Service booking is here
NEW
Blog/H2 · Blog/H3 · CMS article headings only · Sentient Light 32px and 24px
How we cut first response time in half
What changed in the first week
03 · Shape and surface
Flat, warm, 16px corners.
Depth comes from stepping between the three light tones and a hairline border. Don't add new shadows, gradients or dark fills. Cards carry their own shape, so use the instance.
Page
Light/background, no radius. The default for every section.
Section fill
Light/surface across the full width, no radius. Separates one section from its neighbours, like Security on the home page. Never two in a row.
Panel
Light/surface, 16px radius, 12px padding. Holds media next to content, like the Real results block. Nested items use 10px radius.
Media
16px radius on standalone images and mockups, 10px on images inside them. Crop with overflow hidden, no border.
04 · Layout
One container. One rhythm.
Every value below is measured from the home page. Copy it instead of inventing new ones.
Section
Width 1fr, vertical stack, centered. Padding 96px top and bottom, 40px sides. The hero uses 96px top and 64px bottom.
Container
Width 1fr, max width 1200px. Gap 64px between the section head and its content, 48px when the content is a pricing table.
Section head
Eyebrow instance, then a Heading 2 capped at 600 to 660px, gap 12px. An optional Body Medium subtitle is capped at 360px. Left-aligned by default, centered on Security and Pricing.
Card rows
Horizontal stack, every card width 1fr. Three Feature Cards use a 24px gap, four Benefits Cards use 16px. Testimonials sit in three columns with a 12px gap and the middle column offset 48px down.
Hero
Two columns, 0.45fr text and 0.55fr media. Hero Eyebrow, Heading 1 capped at 600px, Heading 6 subtitle capped at 400px, gap 24px, then a Large Button 32px below.
Page ending
Every page ends with the CTA Section instance. The Navbar and Footer come from the layout, so don't add them to the page.
Breakpoints
Desktop 1200px, Tablet 810px, Phone 390px. Card rows stack vertically on Phone. Check both smaller breakpoints for clipped text before finishing.
05 · Motion
Motion is built in.
VisQuanta's animations live inside its components. Place an instance and the motion comes with it.
Components
Hover states, the Accordion, the Logo Ticker and the Switch animate on their own. Don't recreate these with new layers.
Sticky feature blocks
Each Feature Block Card sits in its own sticky container, 100vh tall, pinned at top 0. Keep that structure when adding or removing a block.
New pages
Don't add new appear effects, scroll animations or custom transitions. A calm page is part of the VisQuanta look.
06 · Voice
Short sentences. Calm confidence.
VisQuanta sounds like a service manager who has seen it all: clear, warm and specific. It promises relief, not magic.
Headings
Sentence case, ending with a period. Often two short beats: One inbox. Every question, handled. Simple pricing. No surprises.
Eyebrows
One to three words, sentence case, no period: What Nia does, Why Nia, Use cases, Security.
Card titles
Two to four words, verb first, no period: Book in seconds, Answer every call, Know when to hand off. One sentence of body below.
Metrics
A number with a suffix and a two to three word label: 100% Missed calls answered, 5 min Lead reply time.
Buttons
Two or three words, action first: Try Nia Free, Get started.
Testimonials
One or two sentences in quotes, in the customer's words, with a concrete result. Then the name and Role at Company.
07 · Components
Use the instance. Never redraw.
Every element on the site is one of these components. Before drawing a button, card or list, place an instance and set its controls. Keep instances linked.
Buttons and actions
Large Button · The primary action. One per section, usually in the hero and CTA.
Small Button · Secondary actions and compact spots like the navbar.
Text Button · Low-emphasis actions inside cards and blocks.
Link · Inline and footer links.
Form Button · Submit buttons inside forms only.
Back Button · Top of CMS detail pages.
Switch and Tab Button · Toggles and tabs, like monthly or yearly pricing.
Cards
Feature Card
Three in a row, 24px gap. A verb-first title and one sentence.
Benefits Card
Four in a row, 16px gap. Short proof points like security.
Dealer Feature Card
PlannedBento of feature cards in the pricing card look. Planned features carry a Planned badge.
Feature Block Card · Large sticky feature blocks, one per sticky container.
Pricing Card · Inside the Pricing module only. Don't place alone.
Blog Card · Blog and changelog lists.
Integration Card · Integrations grid.
Labels and data
Eyebrow · Above every section title.
Hero Eyebrow · Announcement pill in the hero only, linked to an update.
Metrics · Animated number with prefix, suffix and a short label.
Notice and Tooltip · Small inline messages and hints.
Section modules
CTA Section · The closing block of every page. Place it full width after the last section.
Accordion · The FAQ list. Questions come from each page's data file.
Pricing · Plans with the monthly and yearly switch. Gap 48px under its section head.
Use Cases · Tabbed use case showcase.
Logo Ticker · Customer logos under the hero or pricing, max width 600px when inline.
Video Preview · Video inside a Panel, 0.4fr next to 0.6fr content.
Owned by the layout
Navbar and Footer · Already on every page through the layout. Never add them to a page.
Logo, Social Icon, Dropdown Link, Overlay Link and Overlay Item · Internal parts of the Navbar and Footer. Edit them there.
08 · Imagery
Product first, on soft paint.
Product UI sits on a warm painted background with a 5% noise layer, cropped at 16px. Reuse these before sourcing anything new. No stock photos of people at laptops.