Wordmark, symbol, app icon
Three marks, and these files are the only versions. The wordmark is the logo,
in a dark and a light cut. The symbol is its w and g, taken from
the same outlines, for places too small or too square for the full name. The app icon
is the symbol with a margin on gray.800.
Which one to use
| Context | Use | Why |
|---|---|---|
| Headers, covers, signatures, backgrounds, social avatars | wordmark | The default. Wherever there is room for 120px of width. |
| Favicon, Slack, small UI | symbol | Square or tiny contexts where the wordmark drops below its minimum. |
| Home screen, PWA, app stores | app-icon | The symbol with a margin on gray.800. Survives every platform mask. |
Clear space and size
Rules
- Set a width and let the height follow. Wordmark viewBox
0 0 1102.46 188.02. - Dark cut on dark grounds, light cut on light grounds. The dark cut's teal is
#66DBC9; the light cut usesprimaryInk. There is no third. - Do not set the symbol next to the wordmark. It repeats the w and g; use one or the other.
- The app icon carries its own margin. Platforms crop it to their own shape; nothing important sits near the edge.
Twelve ways to break the mark
Every tile below is the real wordmark with the mistake applied. If something you are making looks
like one of these, use the file from packages/brand/logo/ as it is.
- Recolour the teal half, or sample a third teal for an in-between ground.
- Scale non-uniformly, rotate, outline, or add glows, shadows or gradients.
- Put it in a box, a pill or a badge.
- Carry the dark cut onto a light ground.
- Retype it in Kanit or any other face, or use it as a repeating pattern.
Charcoal ground, one teal
Teal is a dark-surface colour. On light grounds, text is gray.900 and anything teal
that has to be read is primaryInk.
| Token | Hex | Role | |
|---|---|---|---|
| primary | #64DBCA | The teal. Accents only, on dark surfaces only. | |
| primaryLight | #86ECDC | Hover or raised state of the teal. | |
| primaryDeep | #4BC7B4 | Pressed state; the teal on lighter dark surfaces. | |
| primaryInk | #34786F | The teal on light grounds, where the others fail contrast. | |
| gray.900 | #18181B | Darkest surface. Page ground. | |
| gray.800 | #27282F | Raised dark surface. Cards. App icon ground. | |
| gray.700 | #363A45 | Borders and dividers on dark. | |
| gray.600 | #585966 | Muted text on light surfaces. | |
| gray.400 | #9D9FA4 | Muted text on dark surfaces. | |
| gray.300 | #D8D8D8 | Dividers on light. | |
| gray.200 | #E9E9E9 | Light surface tint. | |
| yellow | #FABB05 | Rare highlight. Once per page, or not at all. | |
| white | #FFFFFF | Primary text on dark. |
Teal on white is 1.68:1.
It fails every text standard. Use primaryInk
(5.17:1 on white) instead.
Contrast
Computed from the tokens with the WCAG 2 formula. AA needs 4.5:1 for body text, 3:1 for large text (24px, or 19px at 500).
| on gray.900 | on gray.800 | on gray.200 | on white | |
|---|---|---|---|---|
| white | Aa 17.72AAA | Aa 14.68AAA | Aa 1.21Fail | · |
| primary | Aa 10.57AAA | Aa 8.76AAA | Aa 1.38Fail | Aa 1.68Fail |
| primaryDeep | Aa 8.54AAA | Aa 7.08AAA | Aa 1.71Fail | Aa 2.07Fail |
| primaryInk | Aa 3.43Large | Aa 2.84Fail | Aa 4.26Large | Aa 5.17AA |
| yellow | Aa 10.27AAA | Aa 8.51AAA | Aa 1.42Fail | Aa 1.72Fail |
| gray.400 | Aa 6.69AA | Aa 5.54AA | Aa 2.18Fail | Aa 2.65Fail |
| gray.600 | Aa 2.56Fail | Aa 2.12Fail | Aa 5.70AA | Aa 6.92AA |
| gray.900 | · | Aa 1.21Fail | Aa 14.59AAA | Aa 17.72AAA |
Kanit and Space Mono
Kanit 300 is the default for headings and body. 400 for small text that would go thin, 500 for rare emphasis. 700 only for a short display line (a banner headline, a slide title) at 40px or larger. Never 600, nothing above 700. Space Mono labels things: timestamps, tags, code, eyebrows. Keep it out of body text.
- Both faces are vendored in
packages/brand/fonts/and self-hosted. Never hotlink Google Fonts. - Sentence case for headings and UI. Uppercase only for Space Mono eyebrows, tracked out.
- Fallbacks:
system-uifor Kanit,ui-monospacefor Space Mono. In email, Arial.
Lead with outcomes
- Lead with outcomes. Say what the client gets.
- Numbers over adjectives. 2017. 8 to 16 weeks. 9+ products.
- Name the awkward part: fixed scope, named price, no handoffs to juniors.
- Sentence case in headings and UI.
- "Wingravity" is one word, capital W. Lowercase only inside the wordmark.
- Mark the first prominent use in marketing as Wingravity®. It is a registered EU trade mark.
We ship your MVP in 8 to 16 weeks, for a fixed price you see before we start.
We supercharge your vision with cutting-edge, world-class solutions.
Words to avoid: revolutionary, cutting-edge, world-class, synergy, unlock, supercharge.
Real product, quiet space
Real UI, in its real state, on a charcoal ground. Crop tight; don't fake devices around it.
The team and clients, photographed plainly. Never stock.
Moon, astronaut and laptop on a teal ring, with “Innovation from the ground up.” The one illustration. Don’t redraw it or add to it.
New clip-art space beyond the key visual, purple-to-blue gradients, glowing grids, abstract 3D blobs.
Generated from the tokens
Every asset is rendered from the tokens by a package in this repo, through the Chrome already on
your machine. Re-running produces identical bytes. Run npm run generate:all from the root.
| Package | Path | Makes |
|---|---|---|
| @wingravity/brand | packages/brand | Tokens, logo, typefaces. The source of truth. Published for the landing site. |
| @wingravity/virtual-backgrounds | packages/virtual-backgrounds | Backgrounds for Meet, Zoom and Teams. |
| @wingravity/social | packages/social | Covers, link preview, posts, highlights, avatar, icons. |
| @wingravity/email-signature | packages/email-signature | Gmail signature HTML and its hosted images. |
| @wingravity/guidelines | packages/guidelines | This document and the README imagery. |
The name and the mark are reserved
Wingravity® is a registered EU trade mark. The code and tokens in this repository are licensed separately; that licence grants no trademark rights.
Naming Wingravity in prose. Using the unmodified files in an article, deck or "built with" list. Linking to wingravity.com.
Wingravity in a product, company, domain or handle. Modified marks. Merchandise. Anything implying endorsement.
Full policy: TRADEMARK.md at the repository root.