Solva design system
Design system.
Every color, text style, surface, spacing value and component Solva is built from, bound to the live styles so this page always shows the current system.
One system. Every new page.
How to use
Type /design-system in the Agent panel with your prompt to create a new page based on this design system. The skill reads this page, the color and text styles, and the component catalog below, and builds the page with instances of the existing components.
Recommended model: GPT 5.6 Sol or above.
Solva · Generated from the live project on September 26, 2026
01 · Colors
Eight tokens. No accent.
Solva 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.
Light/background
rgb(251, 250, 246)
Page background on every breakpoint.
Light/surface
rgb(244, 242, 236)
Alternate section fill and large panels. One per run of sections.
Light/surface-raised
rgb(236, 233, 224)
Elements that sit on a surface: chips, nested panels.
Light/border
rgb(231, 227, 217)
The hairline. Card edges and dividers.
Light/border-strong
rgb(214, 208, 194)
Emphasis edges, hover and active states.
Dark/muted
rgb(140, 136, 126)
Captions, metadata, secondary info.
Dark/body
rgb(86, 82, 74)
Paragraphs and descriptions.
Dark/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 support copilot that never sleeps.
Headings/Heading 2 · Section title · Sentient Light 48px, −0.05em, 1.05
Three ways Solva runs your support.
Headings/Heading 3 · Sub-page title, large statement · Sentient Light 40px, −0.05em, 1.15
Every question, handled.
Headings/Heading 4 · Quotes, statements · Sentient Light 30px, −0.05em, 1.25
Now most questions resolve themselves.
Headings/Heading 5 · Card title · Onest Regular 20px, −0.02em, 1.35
Resolve in seconds
Headings/Heading 6 · Hero subtitle · Onest Regular 18px, 1.4
An AI support copilot that resolves customer questions instantly.
Body/Body Large · Lead paragraph · Onest Regular 18px, 1.4
Solva keeps resolving routine tickets while your team sleeps.
Body/Body Medium · Body copy, section intros · Onest Regular 16px, 1.45
Solva handles sensitive customer data with the rigor your security team expects.
Body/Body Small · Names, roles, captions · Onest Regular 14px, 1.5
Head of Support at Corebit
Other/Button Text · Buttons and links · Onest Medium 14px, 1.5
Try Solva Free
Other/Tag · Other/Tag 2 · Badges and pills · Onest 16px and Onest Medium 12px
Auto-resolution is now live
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.
Solva'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 Solva look.
06 · Voice
Short sentences. Calm confidence.
Solva sounds like a support lead 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 Solva does, Why Solva, Use cases, Security.
Card titles
Two to four words, verb first, no period: Resolve in seconds, Learn from your docs, Know when to escalate. One sentence of body below.
Metrics
A number with a suffix and a two to three word label: 62% Tickets auto-resolved, 4.8/5 Average CSAT score.
Buttons
Two or three words, action first: Try Solva 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 · gwBpnI4UQ · The primary action. One per section, usually in the hero and CTA.
Small Button · AENUeriD0 · Secondary actions and compact spots like the navbar.
Text Button · P0OE3nv80 · Low-emphasis actions inside cards and blocks.
Read more
Link · WWTjVO40e · Inline and footer links.
Form Button · LfcphVkGA · Submit buttons inside forms only.
Back Button · XXSEcjViU · Top of CMS detail pages.
Switch · j6Y8zmc_O and Tab Button · uuGuzvayb · Toggles and tabs, like monthly or yearly pricing.
Cards
Feature Card
mJ0uUHDTC · Three in a row, 24px gap. A verb-first title and one sentence.
Benefits Card
HsqRGy779 · Four in a row, 16px gap. Short proof points like security.
uqgREwDuc · Three columns, 12px gap, middle column 48px lower.
Testimonial Card
Customer quotes
Feature Block Card · WnC0ZPnGi · Large sticky feature blocks, one per sticky container.
Pricing Card · PH1QV7ntJ · Inside the Pricing module only. Don't place alone.
Blog Card · p1aHyMvYG · Blog lists, connected to the Blog CMS.
Case Study Card · WNQrB2d4F · Customer stories, connected to the Customers CMS.
Integration Card · YtyVIDgxw · Integrations grid.
Team Card · Ab2XmfLFS and Career Card · RzenxrzDK · About and Careers pages.
Labels and data
Eyebrow · YhiUOrCGG · Above every section title.
Hero Eyebrow · foPUryN0Q · Announcement pill in the hero only, linked to an update.
Metrics · ag0Zjd6ve · Animated number with prefix, suffix and a short label.
Notice · QAF7rK00V and Tooltip · AhAtt67t5 · Small inline messages and hints.
Section modules
CTA Section · dW7Ar1sN1 · The closing block of every page. Place it full width after the last section.
Accordion · SO1U8JGIc · The FAQ list. Edit questions inside the component, not by drawing new rows.
Pricing · gtVdSmxyt · Plans with the monthly and yearly switch. Gap 48px under its section head.
Use Cases · tSVNbW5_Z · Tabbed use case showcase.
Logo Ticker · jgwssP1T2 · Customer logos under the hero or pricing, max width 600px when inline.
Video Preview · G5KGR6Frj · Video inside a Panel, 0.4fr next to 0.6fr content.
Owned by the layout
Navbar · rUCTsNyt1 and Footer · wjXjpGyuV · 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.
Solva · Design system
Pairs with the Welcome page and the design-system skill