Experio Guidelines
Make complex intelligence feel simple.
Introduction
Experio turns complex information into connected knowledge. IQ1™ maps contracts, experts, clients and past performance for consulting, GovCon, accounting and AEC firms, and every answer carries its sources.
Purple owns the brand. Neutral space gives it sophistication. The symbol uses structured forms, nodes and relationships to show how information becomes meaningful when it is connected.
Messaging
Click to copyShort declarative sentences that end in periods. In a guideline or campaign headline one phrase takes Purple and the rest stays Charcoal. Use simple language and avoid unnecessary words.
Tone of voice
We sound likeExperio explains complex ideas in a way that feels accessible and useful. It shows intelligence without relying on technical jargon or unnecessary complexity.
Audiences
Same voice. Different emphasis.Depth, terminology, evidence and priorities adapt to the reader. The character stays clear, confident, intelligent and human for every audience.
Logotype construction
The symbol is measured with its own nodes. x is the height of its top two rows and sets the space above and below. y is the width of its second-row bar and sets the space left and right.
Logotype scale
The symbol and wordmark always scale together. Sizes refer to lockup height.
Logo usage
A flexible symbol for every touchpointWith a partner, give both logos appropriate visual presence, align them on a shared baseline with consistent sizing, and keep the layout calm with Experio's grid, type and color.
Color versions
White on Purple, White on Charcoal and Purple on Cool white are the approved pairings. Charcoal on White marks the header of every guideline page.
Never add gradients, shadows, 3D effects, outlines or strokes. Never stretch, compress, rotate, mask or texture the logo, and never place it over busy or low-contrast imagery.
Core palette
Purple owns the brand. Neutral space gives it sophistication. Accent tones provide moments of intelligence and discovery.
Shades
Click to copyDeep Purple and Soft Lavender extend Purple. Black and Charcoal light extend Charcoal. The Tint fills large light panels such as the iconography board.
Product UI
The agent runs light: a white canvas, Cool white panels, 3px corners and 1px borders. Dark surfaces carry the website footer and highlighted cards. Primary actions use the violet gradient from #7857F6 to #9C83F9.
Status
Status pairs a tinted fill with a label in the same hue. Completed steps take a green check, the step waiting on a person takes a violet outline and a yellow label.
Color proportions
ProposedNeutral space carries most of every layout. Purple holds the brand moments and Charcoal anchors type and dark panels.
Accessibility
WCAG 2.2 · normal textPair light backgrounds with Deep Purple, Charcoal or Black for primary text. Use White or Soft Lavender on Deep Purple and Charcoal. Avoid White on Soft Lavender and light purple text on light backgrounds.
Type system
Type to editTypography should feel clear, structured and quietly intelligent. It supports readability, trust and precision without feeling cold or overly technical.
Type scale
Hierarchy comes from scale, weight and role rather than stylistic variation. Stack Sans sets headings and subheadings. Inter Tight sets body and captions.
Icons
40 icons · click to copyIcons are rounded outlines on a 24px grid with a 1.5px stroke. They should feel intelligent, precise and effortless, and support complex ideas through simple, recognizable forms.
Photography
Buildings represent the organizations where knowledge lives. Paper texture represents the documents, research, plans and decisions that hold it. Graded versions run darker with visible grain.
Website and product
Centered Stack Sans headlines with a small label above each section, Cool white panels and 1px borders. Purple appears in the hero field, the product frame and the primary action.
Compositions
Buildings hold the organization, paper holds its knowledge and the UI layer shows Experio connecting it. Headlines sit in Charcoal on white panels, never directly on the photograph.
Export assets
Give DESIGN.md to your coding agent (Claude Code, Cursor, v0, Framer AI) with your UI or website task. It holds every token, type rule, component spec and copy rule in one file.