A K that folds.
Two planes meeting at an angle, like a page being turned. This guide covers how Khef looks, moves and speaks across the site, the tools and the Figma plugin.
The mark is a page mid-turn.
The violet spine is the document. The red and coral planes fold out of it, like a corner being turned. The wordmark sits to its right in soft lilac-white. Always use the supplied artwork; never redraw it.
Clear space: keep at least the width of the K's spine free on every side. Minimum size: the mark at 16px tall, the full lockup at 24px tall.
On light backgrounds, use the on-light lockup: the wordmark switches to deep ink, the mark stays the same.
Don't
Stretch or squash it (outside the squish animation).
Recolour the planes.
Rotate it at rest.
Place it on busy or warm backgrounds.
Violet comes first. Coral marks action.
A deep night-violet base keeps tools calm and lets files be the brightest thing on screen. The three logo colours are reserved for the brand and for moments of action. Click a swatch to copy its hex.
Gradients
Used for progress, selection and hero art, never behind body text.
Tool families
Seven families, seven colours, so people can spot the right tool before they read it. Family colours appear as small dots, borders and icons, never as large fills.
The system font, set tight.
Khef uses each device's own interface font: San Francisco on Apple, Segoe UI on Windows, Roboto on Android. Nothing to download, so pages open instantly and feel native. Headlines are bold and tightly tracked; body text is relaxed and quiet.
ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial
Monospace is for numbers that change: file sizes, hex codes, dimensions. It stops figures jumping while they count.
ui-monospace, "SF Mono", Menlo, Consolas
Glass windows on a night sky.
Illustrations show the product, not metaphors. Small frosted app windows float over soft violet and coral glows, with real file names and real numbers inside.
Frosted windows
14px radius, violet rim at 28%, blur behind, deep soft shadow. Three dots: red, amber, violet.
Selection & dusk
Dashed lilac outlines with white square handles say "editable". The dusk mountain stands in for any photo.
Glow
Large blurred violet and coral lights drift slowly behind content. Keep them under 60% opacity and off-centre.
Icons
1.75px rounded strokes on a 24px grid, no fills. Lilac at rest, coral on hover.
Soft, quick, a little bouncy.
Motion explains what happened to your file. Things slide in from where they came from, settle quickly, and the logo gets the only real personality. Every animation switches off when the system asks for reduced motion.
Buttons lift 2px on hover, press to 97%, ripple on click.
Logo motion
- Load: the K falls in, lands flat and wide, springs tall and settles (900ms). The word slides in 280ms later.
- Hover: the K lifts and leans back 7°, on the spring curve.
- Click: pressed flat like a page through the compressor, then jellies back. The word squeezes with it.
- Never loop the logo. It moves only in reply to the page or the person.
Plain words. Short sentences.
Say what the tool does and what happens to the file. Lead with the benefit, skip the hype, and always be clear that files stay on the person's computer.
Compress PDF, make PDFs smaller in your browser.
Your files never leave your computer.
2.1 MB · 83% smaller
Leverage our AI-powered cloud compression suite!
We take your privacy very seriously.
Optimization successfully completed.