Ask The W
Ask The W — Brand Package
v1.0 · April 2026

The W Logo & Icon Package

A complete set of logo, icon and lockup files for use across product, web, social, and print. Source mark cleaned and re-rendered as vector and raster at every required size.

3color variants
11raster sizes
15SVG files
5social headers
Ask The W mark
01 / Primary mark

Cream on Black

The default. Use this everywhere unless context requires otherwise.
Square · roundedicon-512.png
On cream+ ✓
On white+ ✓
On black⚠ low contrast bg
02 / Alternate variants

Inverted, transparent & circular

Use when the rounded square is wrong for the surface.
Black on creaminverted
Mark only · creamtransparent
Mark only · blacktransparent
Circle · cream/blackavatars
03 / Size range

Rendered at every size

From 16px favicon to 2048px high-res. Each size is rendered fresh, not scaled.
16
32
48
64
128
180
256
512
04 / Lockups

Wordmark + icon

Horizontal and stacked lockups in SVG. Wordmark set in Cormorant Garamond italic, sized to match the icon.
Horizontal · cream surfacelockup-horizontal-light.svg
Horizontal · dark surfacelockup-horizontal-dark.svg
Horizontal · on whitelockup-horizontal-white.svg
Stacked · on whitelockup-stacked-white.svg
05 / Social headers

Twitter & LinkedIn banners

Drop-in cover images at platform-correct dimensions. SVG so they re-export crisply at any resolution.
Twitter / X · centered lockup 1500 × 500twitter-header-centered.svg
Twitter / X · editorial · sigil right 1500 × 500twitter-header-editorial.svg
Twitter / X · editorial · sigil centered 1500 × 500twitter-header-editorial-v2.svg
LinkedIn · personal profile 1584 × 396linkedin-personal-banner.svg
LinkedIn · company page 1128 × 191linkedin-company-banner.svg
06 / Brand colors

Two-color system

Cream and black do all the heavy lifting. Amber is reserved for accents.
Cream
#F5EDE0
Black
#0A0A0B
Canvas
#FAFAF9
Accent (amber)
#D4763A
07 / Usage

Do and don't

A short list. Keep the mark simple and let it breathe.
DoKeep clear space equal to ¼ icon height
Pad the mark generously. The rounded square should never crowd a headline or sit flush against another element.
DoUse the SVG for any size above 64px
Vector files scale cleanly. Reserve the PNG raster for fixed sizes — favicons, app icons, social previews.
DoPair the mark with cream or off-white surfaces
The brand reads warmest on #F5EDE0 or #FAFAF9. White is fine but feels colder.
Don'tRecolor the W stroke
The W stays cream. The square stays black. No gradients, no brand-color tints, no drop shadows on the mark itself.
Don'tStretch, skew, or rotate the mark
Aspect ratio is fixed at 1:1. Rotation breaks the W's reading axis.
Don'tPlace on busy backgrounds without clear space
If a background image is unavoidable, drop a solid black or cream plate behind the mark first.
08 / Install

Drop into <head>

Favicon + Apple touch + PWA manifest in one snippet.
<!-- Ask The W favicon set --> <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest"> <meta name="theme-color" content="#0A0A0B">
09 / What's in the box

File index

Everything in this package, organized by use.
package/ ├── Brand Sheet.html — this page ├── favicon/ │ ├── favicon-16.png favicon-32.png favicon-48.png │ ├── apple-touch-icon.png (180×180) │ └── icon-192.png icon-512.png (PWA) ├── icon/ │ ├── cream-on-black/ icon-{16…2048}.png (primary) │ ├── black-on-cream/ icon-{16…1024}.png (inverted) │ ├── mark-only-cream/ mark-{128,256,512}.png (transparent) │ ├── mark-only-black/ mark-{128,256,512}.png (transparent) │ ├── circle-cream-on-black/ circle-black-on-cream/ │ └── svg/ vector versions of every variant ├── lockup/ │ ├── lockup-horizontal-{light,dark,white}.svg │ └── lockup-stacked-{light,white}.svg ├── social/ │ ├── og-image.png (1200×630, for OG/Twitter) │ ├── twitter-header-centered.svg (1500×500) │ ├── twitter-header-editorial.svg (1500×500, tagline) │ ├── linkedin-personal-banner.svg (1584×396) │ └── linkedin-company-banner.svg (1128×191) ├── source/ │ └── logo-source-cleaned.png ├── site.webmanifest └── favicon-snippet.html