QueryLayer brand guidelines
Approved identity, voice, color, typography, and asset usage.
QueryLayer's identity combines an offset, ribbon-like Q with the visual language of a search lens and a layered interface. Its stepped upper-left entry, shaped aperture, and integrated diagonal tail are essential parts of the mark.
#Logo system
| Use | Asset |
|---|---|
| Default, light backgrounds | /public/brand/querylayer-logo.svg |
| Dark or photographic backgrounds | /public/brand/querylayer-logo-reversed.svg |
| Compact placements and avatars | /public/brand/querylayer-mark.svg |
| Single-color dark production | /public/brand/querylayer-logo-black.svg |
| Single-color light production | /public/brand/querylayer-logo-white.svg |
| App tiles and favicons | /public/brand/querylayer-app-icon.svg |
| Alternate light app tile | /public/brand/querylayer-app-icon-light.svg |
The master assets are SVG. PNG files are raster derivatives and should not be used when SVG is supported.
#Color
| Token | Hex | Role |
|---|---|---|
| Primary purple | #7B2CF5 |
Brand anchor, primary actions |
| Secondary purple | #A855F7 |
Gradient endpoint, highlight |
| Light lilac | #E9D5FF |
Reversed highlight, soft accents |
| Deep ink | #0D071A |
Wordmark and dark backgrounds |
| White | #FFFFFF |
Reversed wordmark and clear space |
The logo gradient runs at 135 degrees from #A855F7 to #7B2CF5. The broader interface may use the extended #7B2CF5 → #A855F7 → #E9D5FF highlight gradient. Implementation tokens live in /public/brand/querylayer-tokens.css.
#Clear space and sizing
Use the mark's ribbon thickness as the base unit u. Keep at least 1.5u of clear space around every side of the mark or complete logo. Do not let borders, copy, or other marks enter this area.
- Minimum complete-logo width: 120px on screen or 32mm in print.
- Minimum standalone-mark size: 16px on screen or 5mm in print.
- At 16–24px, use the app-icon or mark-only asset; do not force the wordmark into favicon-scale placements.
#Backgrounds
- Use the default logo on white or very light neutral surfaces.
- Use the reversed logo on
#0D071A, deep purple, or sufficiently dark imagery. - Preserve strong contrast and avoid placing the gradient mark over similarly saturated purple detail.
- Use the black or white assets for one-color reproduction only.
#Wordmark typography
The live wordmark uses Inter when available, then the project's system UI stack. No proprietary font file is bundled or required. Keep the QueryLayer spelling and capitalization intact.
#Do not
- Stretch, rotate, outline, bevel, or add effects to the logo.
- Change the relative size or spacing of the mark and wordmark.
- Recolor the gradient outside the approved palette.
- Put the default dark wordmark on a dark background.
- Recreate the logo from a PNG when an SVG is available.
#Raster exports
App-icon exports are provided at 512px, 192px, and 180px. Favicons are provided at 32px and 16px. The Open Graph image is 1200×630px. All are generated from the SVG masters.