Twinfig blue
The accent. One primary action or highlight per view.
- HEX
- RGB
- HSL
- CMYK
- Pantone
- Token
Press kit
Logos, colours, type and templates.Everything you need to show Twinfig.
Every file here follows the same 48-unit grid as the mark. Download the whole kit, or take just what you need.
Logos
Every lockup, in every colour.
SVG for anything that scales, transparent PNG at 2048 px for everything else. The text is outlined, so no fonts are needed.
Usage
Built on a 48-unit grid.
Two equal tiles, offset by a quarter of the mark. Where they overlap is the lens, whose curves share the grid’s centre. Every lockup rule comes from those numbers.
- Tiles
- 28u, radius 8u
- Offset
- 12u = x
- Lens
- 16u, arcs on (24, 24)
Minimum sizesMark · 16px
Horizontal · 20px mark
Stacked · 48px mark
Mark · 16pxHorizontal · 20px markStacked · 48px markThe name
Twinfig, one word, capital T. Not TwinFig, Twin Fig or TWINFIG. Twinfig is not affiliated with Figma, so please don’t describe it as a Figma product.
Don’t rotate or skew it.
Don’t recolour the tiles or the gradient.
Don’t stretch or squash it.
Don’t add shadows, glows or outlines.
Don’t put the colour logo on busy or mid-tone colour. Use white.
- Twinfig
Don’t set the name in live type next to the mark.
Colours
Blue is the brand. Navy holds it up.
Click any value to copy it. CMYK is a straight conversion and Pantone is the nearest match, so proof both on press.
Core
Navy
Dark surfaces, the top of the sky.
- HEX
- RGB
- HSL
- CMYK
- Pantone
- Token
Ink
Text and the mono logo.
- HEX
- RGB
- HSL
- CMYK
- Pantone
- Token
Paper
Page ground.
- HEX
- RGB
- HSL
- CMYK
- Pantone
- —
- Token
Blues
Lens
The lens on light. Tinted fills.
- HEX
- RGB
- HSL
- CMYK
- Pantone
- —
- Token
Ice
Gradient highlight.
- HEX
- RGB
- HSL
- CMYK
- Pantone
- —
- Token
Bright
Accent on dark.
- HEX
- RGB
- HSL
- CMYK
- Pantone
- —
- Token
Indigo
Gradient shadow.
- HEX
- RGB
- HSL
- CMYK
- Pantone
- Token
Deep
Accent text on light.
- HEX
- RGB
- HSL
- CMYK
- Pantone
- Token
Soft
Selected and hover fills.
- HEX
- RGB
- HSL
- CMYK
- Pantone
- —
- Token
Depth
Slate
Back tile, top-left.
- HEX
- RGB
- HSL
- CMYK
- Pantone
- —
- Token
Depth
Back tile, bottom-right. Darkest surface.
- HEX
- RGB
- HSL
- CMYK
- Pantone
- —
- Token
Neutrals
Ink 2
Secondary text.
- HEX
- RGB
- HSL
- CMYK
- Pantone
- —
- Token
Muted
Labels and captions.
- HEX
- RGB
- HSL
- CMYK
- Pantone
- —
- Token
Border
Card and window borders.
- HEX
- RGB
- HSL
- CMYK
- Pantone
- —
- Token
Hairline
Dividers.
- HEX
- RGB
- HSL
- CMYK
- Pantone
- —
- Token
Canvas
Behind product shots.
- HEX
- RGB
- HSL
- CMYK
- Pantone
- —
- Token
White
Cards, the mono logo on colour.
- HEX
- RGB
- HSL
- CMYK
- Pantone
- —
- Token
Gradients
Light runs top-left to bottom-right.
The mark’s gradients share one direction, so separate shapes read as one lit object. Click a gradient to copy its CSS.
Twin135° · 3 stops
The front tile, buttons, the second tittle.
Lens135° · 2 stops
The overlap on light.
Slate135° · 2 stops
The back tile on light.
Frost135° · 2 stops
The back tile on dark.
Deep lens135° · 2 stops
The overlap on dark.
Glow150° · 3 stops
Blue surfaces and app icons.
Night180° · 4 stops
Social and slide backgrounds.
Sky180° · 14 stops
The website hero: navy into blue into paper.
- +9
Type
Geist, and only Geist.
Geist for everything you read, Geist Mono for labels, code and shortcuts. Both are free under the SIL Open Font License.
Aa
GeistRegular 400 · Medium 500 · SemiBold 600 · Bold 700
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &→
Aa
Geist MonoRegular 400 · Medium 500
ABCDEFGHIJKLM abcdefghijklm 0123456789 ⌥⇧⌘ { } < />
Any interface, editable.
Real text, exact auto layout.
Components and variables, built for you
Paste a URL or capture anything you can open in Chrome. Twinfig rebuilds it the way a designer would.
For designers who build in code
Auto layout · gap 16 · ⌥⇧P
Patterns
Quiet geometry, built on the grid.
Five backgrounds made of dots, marks, lines and light, all on the same 12-unit grid and lit from the top left. Use them behind content, never behind the logo.
Dot gridCanvas dots on the 12u grid, fading out from a soft centre.
HalftoneDots that grow along the light, top-left to bottom-right.
CrosshairRegistration marks every 48u over a faint dot grid.
Hairline45° hairlines, masked to a diagonal fade.
GlowTwo soft blooms, with a dot screen only where the light falls.
Product
Screens.
Product images at 2560 px wide. Crop them, but don’t edit what the product shows.
Figma pluginWebsite import and a pasted capture, ready to build.
PNG362 KB
Repo importPaste a GitHub repo; pick screens, components and themes.
PNG383 KB
Repo sandboxInstalls and explores with mock data; every theme and state.
PNG413 KB
CLI wizardA few questions in the terminal, then paste into Figma.
PNG377 KB
Chrome extensionCapture modes, options and the pages picker.
PNG293 KB
StorybookStories to component sets with variants.
PNG424 KB
Mock dataReal customer data swapped before capture.
PNG403 KBCopy
How to describe Twinfig.
Plain and specific. Click a block to copy it.
Social templates
Five templates, every size.
Edit the text right here and download a PNG at the network’s native size. Your text carries over when you switch sizes.