DESIGN SYSTEM · V1
Zaivit wireframe design system
IBM Plex Sans for interface text, IBM Plex Mono for labels and data. One accent. Status always pairs color with an icon and words.
Typography
Display · 60/1.04 · 700Technology, built
H1 · 46/1.08 · 700Page title
H2 · 36/1.15 · 700Section title
H3 · 22/1.3 · 600Card or block title
Body L · 19/1.6Lead paragraph text
Body · 16/1.6Default reading text
Small · 14/1.5Supporting text and metadata
Label · Mono 12 · 0.1emEYEBROW LABEL
Color tokens
Ink#121417Text, dark sections
Muted#4B5160Secondary text · 7.5:1
Line#D9DCE1Borders, dividers
Soft#F3F4F6Alternate sections
Accent#2047C8Primary actions · 7.3:1 with white
Success#166534✓ Available / met
Warning#92400E▲ At risk
Error#B91C1C✕ Breach / error
Buttons and states
DefaultHoverFocusDisabled / loadingPrimaryGet free adviceGet free adviceGet free adviceSending…SecondaryExplore ServicesExplore ServicesExplore ServicesExplore Services
Inputs and states
DefaultPlaceholder textHelper text
FocusTyping…Visible focus ring
Errorname@company✕ Enter a valid work email
DisabledNot editableExplains why
Cards
SERVICEService cardName, one-line outcome, link.View →SOLUTIONSolution cardOutcome in human language.Explore →PRODUCTProduct cardImage, spec line, price by quote.Add to quoteINDUSTRYIndustry cardIndustry and top need.View →CASE STUDYCase study cardIndustry, region, challenge, verified outcome.Read →
Availability and status badges
✓ Available in your region▲ Partner on-site only○ Remote only✕ Not available here● Coming soon
Alerts
ℹ InfoPrices shown in USD. Change region to see local pricing.
✓ SuccessYour quote request was sent.
▲ WarningSome items need on-site installation in your region.
✕ ErrorWe couldn't send this. Check your connection and try again.
Empty, loading and error states
EmptyNo results for this filter.Ask an expert instead →
LoadingSkeleton rows keep the layout stable.
ErrorPlain language, what happened and what to do.✕ Couldn't load. Retry
Navigation and patterns
BreadcrumbsOn every page below level 1. Last item is plain text.
Tabs / filter pillsPills with aria-pressed; selected = filled ink. Never color alone.
AccordionNative details/summary; used for FAQs and technical detail.
Global selectorGlobe icon + "Region · Language · Currency"; opens a dialog, never a dropdown in the nav.
Mega menuFamilies on the left, 4 top services, "Also in…" list, help card.
Progressive disclosureLevel 1 human → Level 2 business → Level 3 technical (collapsed).