A brand built around practice.
Practis helps teams get better the way humans actually get better: by doing the thing, getting feedback, and doing it again. The brand should feel the same way — confident, human, optimistic about AI, and never afraid to keep iterating.
This document covers the systems that make Practis recognizable across every surface — from the homepage to a webinar slide to a sales email signature. Each section tells you the rule, shows the example, and explains the reasoning so you can make a good call when this document doesn't have an answer.
The Practis mark.
Two pieces: the symbol (a speech bubble — a representation of the conversations Practis exists for) and the wordmark. Together they form the primary lockup. Apart, they each carry weight.
Symbol
The Practis mark stands on its own at small sizes — favicons, app icons, social avatars.
Lockups
Four approved lockups. Pick the one that gives the mark room to breathe on your surface — never invent a fifth.
Clear space
Keep at least one X of clear space on every side — where X equals the height of the symbol. More is always fine. Less is never fine.
Minimum sizes
Below these sizes, the symbol loses its corners and the wordmark loses its kerning. Don't go smaller.
Do's & don'ts
The mark works because of restraint. These rules aren't arbitrary — each one has been tried and rejected.
Use the approved lockups against backgrounds with enough contrast that the symbol's blue remains legible.
Place the primary lockup on accent surfaces. The symbol disappears into the background. Use the reverse lockup (white) instead.
Use the symbol on its own when the surface is small, square, or already labeled as Practis (favicons, app icons, avatars).
Rotate, recolor, italicize, distort, or add effects to the mark. If you find yourself wanting to, ask — the design system probably already solves it.
A restrained palette, on purpose.
Click any card to copy its hex value.
Type does most of the heavy lifting.
One sans for everything. One mono for code and numerics. A modular 1.250 scale so every size lands somewhere predictable.
Inter — primary typeface
System monospace — supporting
For code, tokens, and tabular figures. We use the OS-native monospace stack instead of shipping a custom mono — fewer fonts to load, perfect rendering everywhere.
Scale
Stepped scale at 10, 12, 14, 16, 18, 20, 24, 30, 36, 48, 60. Zero letter-spacing across the board. Line-heights are paired to each step, not derived from a ratio.
Weights in use
Four weights. Don't introduce a fifth — Inter has eighteen, the system has four.
One icon family, no exceptions.
Lucide. 24×24 viewbox, 2px stroke, rounded line caps and joins. One library so the visual language stays consistent across product and marketing.
Rules
- · Always 24×24 viewBox. Render at 16, 20, 24, or 32. No other sizes.
- · Stroke-only. No filled icons in marketing. Filled is reserved for selected/active product states.
- · 2px stroke at 24px size. Scale stroke proportionally if rendering larger or smaller.
- · Inherit color via currentColor — never hardcode hex on icons.
- · If Lucide doesn't have it, ask before commissioning. Mixing icon libraries breaks the system.
Real people, real product.
Practis is about humans getting better. Imagery should look like the actual humans we serve — not stock photography pretending to be them.
The shared component vocabulary.
The pieces every page and product surface is built from. Use these. Don't fork them.
Buttons
Three variants. Primary for the one thing you want users to do. Ghost for everything else. Link for inline navigation.
Eyebrow + heading pattern
The signature section opener. Use sparingly — one per section, never two.
A heading that earns its scale.
One sentence of supporting copy below. Never two. If you need two sentences, you need a different pattern.
Cards
The default container for grouped content. Hairline border, ~5% lighter background than the surface beneath.
Card title
Short supporting line about what this card represents.
Card title
Short supporting line about what this card represents.
Card title
Short supporting line about what this card represents.