Clipdrop. Photo studio on bone paper.
- AI
- Light theme
- 13 colors
- 4 typefaces
Clipdrop reads like a contemporary art-book spread rendered as a working tool: bone-white canvas, oversized editorial serif headlines, a single vivid cobalt for actions, and generous negative space that lets the image-heavy content breathe. Surfaces are flat and borderless, with the visual system doing its work through typography, a 16px card radius, and pill-shaped controls rather than shadows or gradients. The checkerboard transparency pattern in the hero establishes the brand's image-tool DNA without competing with the photography. Color is rationed — almost the entire interface lives in three near-blacks and an off-white, with cobalt blue and a single warm orange used as precise functional punctuation for primary actions and brand marks.
Clipdrop design system
Brand1
Violet action color for filled buttons, selected navigation states, and focused conversion moments
Accent3
Brand mark accent, the Jasper wordmark stem, and the rare warm fill. Used sparingly so it never dilutes the cobalt's primacy as the action color
Deep navy-violet for icon fills and emphasis body copy. Sits between black and cobalt in the chromatic hierarchy — a quieter alternative to pure black when an element needs a hint of brand color
Soft lavender-blue used as a ghost/secondary button surface. Reads as a desaturated echo of Cobalt Signal — the same hue at low saturation, signaling a non-primary action without going neutral
Neutrals9
Maximum-emphasis headings, primary text, and icon strokes. Reserved for the loudest moments; never used for body copy where 2d2d/404040 take over
Deep alternative to Ink Black for links and emphasis icons when the element needs to feel slightly warmer or paired with cobalt
Headings and button text — slightly softer than pure black for elements that need weight but not the harshest contrast
Body copy, secondary headings, and icon fills. The workhorse neutral — used wherever readability matters but Ink Black feels too heavy
Muted helper text, captions, and low-emphasis labels. The lightest text color that still passes on bone canvas
Card and tag backgrounds in compact density zones. Mid-gray surface that lifts content off the bone canvas without introducing color
Subtle dividers and elevated surface tone, one step darker than the canvas bone. Used when a section needs a quiet visual break
Page canvas, hairline borders, and the dominant surface tone. With 1000+ occurrences it is the structural backbone of the system — everything else sits on it or is carved out of it
Button text on cobalt fills, and the second surface tier for cards/elevated content layered over bone canvas
Try a pairing
Pick any two colors from the palette to check whether text stays readable on top.
Aa
Paper White on Cobalt Signal
5.18 : 1 contrast
- Body textPasses AA 4.5
- Large textPasses AA 3
- StrictFails AAA 7
