AskAnyone brand kit
An OpenMined diamond, speaking through a DM bubble. One composition, three variants, every asset you need — sized, exported, ready to drop in.
Grab and go.
The six assets you'll reach for most. SVG is the source of truth — use it wherever vectors are accepted. PNG is rasterized at 512–1024 px for slides, docs, and anywhere SVG isn't supported.
The icon.
The OpenMined diamond filled with the research-lab gradient, surrounded by a chat-bubble silhouette. The diamond's left vertex aligns to the bubble's interior knockout, and its right tip extends past the bubble's right edge — the gradient is also revealed through the bubble's center knockout, creating one continuous composition that reads as a single mark.
Variants
Scale
The mark holds from 192 px down to 16 px. Below 32 px the primitive automatically falls back to the mono variant (the gradient mesh becomes mud at small sizes) and the bubble outline thickens by 50% to compensate for sub-pixel rendering.
32 48 64 96 128 192 32 48 64 96 128 192 Download
All four variants, vector + raster. SVGs are self-contained (gradient is embedded); use them wherever you can. PNGs are transparent-background rasters at common sizes.
The wordmark.
Rubik, set with hand-tuned kerning. The brand name is always AskAnyone — one word, no space — across the wordmark, prose, page titles, copy, and tab titles. Don't substitute another font for the wordmark.
Specimen
Weight ramps with size
Rubik is loaded as a variable font ([email protected]). Wordmark weight interpolates continuously — ~400 at type ≥ 50 px, ramping to ~500 at type ≤ 14 px. Compensates for anti-aliasing thinning at small sizes; the wordmark reads at the same perceived weight from 18 to 66 px.
type 18→ weight ~489type 24→ weight ~472type 30→ weight ~456type 42→ weight ~422type 66→ weight 400
Per-pair kerning
Eight pairs in "AskAnyone" carry hand-tuned corrections on top of Rubik's OT kern table — closing the diagonal-A wedges, the y-descender wedges, and the o-curve gaps. Applied as negative margin-left on the trailing glyph, plus -0.008em uniform tracking.
| Pair | Value | Why |
|---|---|---|
As | -0.022em | Close A's right-diagonal wedge over s |
sk | -0.008em | Micro tighten — natural gap between s curve and k stem |
kA | -0.050em | Vertical k → diagonal A — largest wedge in word |
An | -0.030em | A's right diagonal leans away from n |
ny | -0.042em | y's left arm converges at baseline, n's stem stays vertical |
yo | -0.038em | y's right convergence vs o's left curve |
on | -0.018em | Close o's right curve to n's stem |
ne | -0.015em | Final stem-to-curve |
Download
SVG wordmarks use font-family: Rubik with kerning baked in as per-glyph dx offsets. Recipients need Rubik installed for correct SVG rendering — or use the PNG, which is pre-rendered.
The lockup.
Mark + wordmark, locked at proportional sizing — wordmark font-size equals mark-height, gap is mark-h × 0.4, with a -0.05em optical nudge so the wordmark's cap-mid aligns with the mark's vertical center. Don't hand-roll a lockup; always use the AskAnyoneLockup primitive.
Sizes
Below mark 32 px, the gradient automatically falls back to mono — the gradient mesh becomes unreadable at icon scales and mono stays crisp.
Animated variants.
The gradient inside the diamond rotates clockwise. Three motion modes — opt in via the animated prop, choose feel via animation. Off by default. Honors prefers-reduced-motion.
spin · 14s · ambient loading · 1.8s · busy state settle · 8s · attention beat How to use it.
Three primitives, composable: AskAnyoneMark · AskAnyoneWordmark · AskAnyoneLockup. The lockup composer is what you reach for 90% of the time. Pass animated for working-logo surfaces (LP header, app chrome). Leave it off for documentation, print, or screenshot contexts.
Astro · in this project
---
import AskAnyoneLockup from '../components/AskAnyoneLockup.astro';
// or with a tsconfig alias: from '~/components/AskAnyoneLockup.astro'
---
<!-- LP / app header — animated, follows theme -->
<AskAnyoneLockup size={28} href="/" animated />
<!-- Footer / specimen — static, follows theme -->
<AskAnyoneLockup size={40} />
<!-- Forced variant on a specific surface -->
<AskAnyoneLockup size={56} variant="dark" />HTML · plain <img> from the SVG
<!-- Mark only -->
<img src="https://askanyone.ai/brand/assets/mark-light.svg"
alt="AskAnyone" width="48" height="36" />
<!-- Full lockup -->
<img src="https://askanyone.ai/brand/assets/lockup-light.svg"
alt="AskAnyone" height="40" />Favicon · HTML head
<link rel="icon" type="image/svg+xml" href="/brand/assets/favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="/brand/assets/favicon-32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/brand/assets/favicon-16.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/brand/assets/favicon-180.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/brand/assets/maskable-512.png" />In the chrome.
Always use the mono variant for browser tabs and OS icons — the gradient becomes mush at 16/32 px. The favicon includes a square-fit version (favicon.svg) plus pre-rasterized PNGs at every common size. The Maskable card below is the PWA install-icon version.
For browser tabs, bookmark bars, and OS bookmark icons. Use the SVG everywhere modern, then provide PNGs as fallbacks.
Used when a user installs the site to their phone's home screen. The OS clips the icon to its own shape — rounded square on iOS, circle on Android, hexagon on Samsung — so we keep the full gradient mark inside the central 80% safe zone with light padding around it. The padding will be hidden by the OS clip.
Clearspace & rules.
Clearspace
Keep at least one bubble-height of padding around the mark. On dense backgrounds, add more.
Minimum size
16 px for mono · 32 px above which the gradient variants kick in. Below 16 px the silhouette stops reading.
Don't recolor the gradient
The OM rainbow is the family-recognition signal. If you need a single-color version, use the mono variant.
Don't flip or rotate the mark
The bubble's tail position carries the message-direction reading. Tail stays bottom-left.
Don't drop the diamond
Without it the bubble loses the OpenMined credibility transfer. Even at small sizes, the mono fallback preserves the diamond.
Don't substitute the wordmark font
The wordmark uses Rubik with hand-tuned kerning. Other fonts (or default Rubik tracking) won't match.
Palette.
The gradient is the OpenMined family signal — don't decompose it into individual colors for primary brand use. Pair the rainbow with grayscale neutrals; reach for Gold as the AskAnyone accent (CTAs, links, ring/focus).
#FFC847#E0A523#23202C#FCFCFD