01
LOGO 100xLab
100xLab
WORDMARK · DEPARTURE MONO
100xLab
CLEAR SPACE
2× the x-height on every side
MINIMUM
80px wide on screen
THE X
Carries the brand colour: tangerine, ube or blueberry. Never lime
BACKGROUND
Neutral only: paper, oat, white or ink
NEVER
Recolour, outline, rotate, stretch or add effects
01.1
LOGO IN MOTION RIPPLE · DOT · BLUEBERRY X
02
COLOUR
LIGHT #FEFDFB DARK #1B1A18
Page
LIGHT #F4F3F0 DARK #232220
Plain cells
LIGHT #FFFFFF DARK #2A2926
Raised cells, inputs
LIGHT #D1CDC7 DARK #3A3835
Hairlines
LIGHT #55534E DARK #A8A49C
Secondary text
LIGHT #1B1A18 DARK #FEFDFB
Primary text
ACTION · SIGNAL
Lime means act.
SIGNAL #E2FA1C HOVER #C4DC00 ON SIGNAL #1B1A18
BRAND
Brand
TILE #A78BFF INK #160546
PRODUCT MARKETING
Product marketing
TILE #FF9F66 INK #3A1000
GROWTH & ANALYTICS
Growth & analytics
TILE #4FE08A INK #032A14
SEO & GEO
SEO & GEO
TILE #6FB8FF INK #001433
CONTENT & SOCIAL
Content & social
TILE #FF7ACB INK #46022F
03
TYPE SCALE
Type scale TOKEN VALUE USE type-display96 / 88 Page titles type-h164 / 64 Section titles type-h240 / 44 Subsections type-h324 / 32 Card titles type-lead20 / 32 Lead paragraphs label12 / 16 Mono uppercase labels micro11 / 16 Serials, footnotes
04
ILLUSTRATION BRAND
A puffy mascot with a glow inside. It watches your cursor and changes mood.
PRODUCT MARKETING
A rocket on its pad. Hover to launch.
GROWTH & ANALYTICS
A robot at a desk moving each new lead from the inbox to the done pile. Hover to put it to work.
SEO & GEO
A search bar over Google, ChatGPT and Claude. Hover to search.
CONTENT & SOCIAL
A retro TV with the launch video paused. Hover to play.
05
MOTION Motion tokens TOKEN VALUE USE instant100ms Hover, toggles quick200ms Buttons, tags base320ms Cells, panels slow600ms Page transitions, headline reveals standardcubic-bezier(0.2, 0, 0, 1) Most movement mechanicalcubic-bezier(0.65, 0, 0.35, 1) Slides and masks snapcubic-bezier(0.3, 1.4, 0.5, 1) Small confirmations
06
SOCIAL KIT Profile pictures, banners and covers. Banners and covers are pure graphics: no logo, no text, no lime. Every file is plain vector, no fonts, so it looks the same pasted anywhere. Copy it straight to the clipboard or download it.
PROFILE PICTURES
Square, with the mark kept inside a circular crop.
Monogram · ink
800×800 · LinkedIn, X, GitHub, Discord
COPY SVG COPY PNG SVG ↓ PNG ↓ Monogram · paper
800×800 · light profile, ube x
COPY SVG COPY PNG SVG ↓ PNG ↓ Monogram · oat
800×800 · warm light profile, blueberry x
COPY SVG COPY PNG SVG ↓ PNG ↓ Monogram · dots
800×800 · dot-matrix, paper
COPY SVG COPY PNG SVG ↓ PNG ↓ The x · ink
800×800 · small avatars, tangerine
COPY SVG COPY PNG SVG ↓ PNG ↓ The x · paper
800×800 · small avatars, blueberry
COPY SVG COPY PNG SVG ↓ PNG ↓ BANNERS
Wide, graphics only. The avatar covers the left 30% and bottom 65% on LinkedIn, so the focal graphic sits right of centre. Toggle the avatar zone on a preview to check.
LinkedIn cover · ink · pixel x
1584×396 · graphic, no text
COPY SVG COPY PNG SVG ↓ PNG ↓ LinkedIn cover · paper · skyline
1584×396 · graphic, no text
COPY SVG COPY PNG SVG ↓ PNG ↓ X header · ink · pixel x
1500×500 · graphic, no text
COPY SVG COPY PNG SVG ↓ PNG ↓ X header · paper · skyline
1500×500 · graphic, no text
COPY SVG COPY PNG SVG ↓ PNG ↓ COVERS AND SHARE CARDS
16:9 and share-card sizes, built from tiles: a giant pixel x, a rising 1x to 100x skyline, five service bars stepping up.
Cover 16:9 · ink · pixel x
1920×1080 · YouTube, Notion, slides, blog
COPY SVG COPY PNG SVG ↓ PNG ↓ Cover 16:9 · paper · skyline
1920×1080 · YouTube, Notion, slides, blog
COPY SVG COPY PNG SVG ↓ PNG ↓ Five fronts · ink
1920×1080 · the service colours, stepping up
COPY SVG COPY PNG SVG ↓ PNG ↓ Five fronts · paper
1920×1080 · the service colours, stepping up
COPY SVG COPY PNG SVG ↓ PNG ↓ Share card · ink · skyline
1200×630 · GitHub, Product Hunt, link previews
COPY SVG COPY PNG SVG ↓ PNG ↓ Share card · paper · pixel x
1200×630 · GitHub, Product Hunt, link previews
COPY SVG COPY PNG SVG ↓ PNG ↓ GRAPHIC BANNERS AND COVERS
Dithered imagery, not tied to the grid: six concepts, each at LinkedIn size and as a 16:9 cover. On the LinkedIn versions the focal subject sits right of the avatar zone; only ambient texture runs behind it.
Horizon · LinkedIn
1584×396 · dithered launch sunrise, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ Horizon · Cover 16:9
1920×1080 · dithered launch sunrise, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ Growth · LinkedIn
1584×396 · 1x to 100x curve, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ Growth · Cover 16:9
1920×1080 · 1x to 100x curve, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ Ripple · LinkedIn
1584×396 · rings from the x, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ Ripple · Cover 16:9
1920×1080 · rings from the x, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ Bloom · LinkedIn
1584×396 · the mascot with a dithered glow, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ Bloom · Cover 16:9
1920×1080 · the mascot with a dithered glow, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ Big x · LinkedIn
1584×396 · the multiply sign, bleeding off, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ Big x · Cover 16:9
1920×1080 · the multiply sign, bleeding off, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ Five fronts · LinkedIn
1584×396 · five dithered pictograms, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ Five fronts · Cover 16:9
1920×1080 · five dithered pictograms, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ VIOLET COVERS
The Branding violet as a full theme: deep and light grounds, in tile and dithered versions, at LinkedIn and 16:9. Same rules: graphics only.
LinkedIn cover · violet deep · pixel x
1584×396 · graphic, no text
COPY SVG COPY PNG SVG ↓ PNG ↓ LinkedIn cover · violet light · skyline
1584×396 · graphic, no text
COPY SVG COPY PNG SVG ↓ PNG ↓ Cover 16:9 · violet deep · skyline
1920×1080 · graphic, no text
COPY SVG COPY PNG SVG ↓ PNG ↓ Cover 16:9 · violet light · pixel x
1920×1080 · graphic, no text
COPY SVG COPY PNG SVG ↓ PNG ↓ Horizon · violet · LinkedIn
1584×396 · dithered launch sunrise, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ Horizon · violet · Cover 16:9
1920×1080 · dithered launch sunrise, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ Growth · violet · LinkedIn
1584×396 · 1x to 100x curve, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ Growth · violet · Cover 16:9
1920×1080 · 1x to 100x curve, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ Ripple · violet · LinkedIn
1584×396 · rings from the x, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ Ripple · violet · Cover 16:9
1920×1080 · rings from the x, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ Bloom · violet · LinkedIn
1584×396 · the mascot with a dithered glow, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ Bloom · violet · Cover 16:9
1920×1080 · the mascot with a dithered glow, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ Big x · violet · LinkedIn
1584×396 · the multiply sign, bleeding off, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ Big x · violet · Cover 16:9
1920×1080 · the multiply sign, bleeding off, graphic only
COPY SVG COPY PNG SVG ↓ PNG ↓ 07
DOWNLOADS MARK
Pixel · ink
Transparent, for light backgrounds
COPY SVG COPY PNG SVG ↓ PNG ↓ Pixel · paper
Transparent, for dark backgrounds
COPY SVG COPY PNG SVG ↓ PNG ↓ Dot · ink
Transparent, for light backgrounds
COPY SVG COPY PNG SVG ↓ PNG ↓ Dot · paper
Transparent, for dark backgrounds
COPY SVG COPY PNG SVG ↓ PNG ↓ COLOURED X
Pixel · ink · tangerine x
x #FF6A00, for light backgrounds
COPY SVG COPY PNG SVG ↓ PNG ↓ Pixel · paper · tangerine x
x #FF6A00, for dark backgrounds
COPY SVG COPY PNG SVG ↓ PNG ↓ Dot · ink · tangerine x
x #FF6A00, for light backgrounds
COPY SVG COPY PNG SVG ↓ PNG ↓ Pixel · ink · ube x
x #6D4CD6, for light backgrounds
COPY SVG COPY PNG SVG ↓ PNG ↓ Pixel · paper · ube x
x #6D4CD6, for dark backgrounds
COPY SVG COPY PNG SVG ↓ PNG ↓ Dot · ink · ube x
x #6D4CD6, for light backgrounds
COPY SVG COPY PNG SVG ↓ PNG ↓ Pixel · ink · blueberry x
x #2F4FF5, for light backgrounds
COPY SVG COPY PNG SVG ↓ PNG ↓ Pixel · paper · blueberry x
x #2F4FF5, for dark backgrounds
COPY SVG COPY PNG SVG ↓ PNG ↓ Dot · ink · blueberry x
x #2F4FF5, for light backgrounds
COPY SVG COPY PNG SVG ↓ PNG ↓ ANIMATED SVG
x cycle · ink
The x steps tangerine → ube → blueberry
COPY SVG COPY PNG (STILL) SVG ↓ PNG ↓ x cycle · paper
The x steps tangerine → ube → blueberry
COPY SVG COPY PNG (STILL) SVG ↓ PNG ↓ Ripple · ink · tangerine x
Lights up from the x, loops
COPY SVG COPY PNG (STILL) SVG ↓ PNG ↓ Ripple · paper · ube x
Lights up from the x, loops
COPY SVG COPY PNG (STILL) SVG ↓ PNG ↓ Scan · dot · blueberry x
Scans in left to right, loops
COPY SVG COPY PNG (STILL) SVG ↓ PNG ↓ 
