Alpha. Vary is under active development and not ready for production use. Syntax, APIs, performance, and behaviour may change between releases.

Brand

Logo

The Vary logo is five offset horizontal bars. The wordmark version adds "vary" in Overused Grotesk Medium. Download the SVG files below.

Role	Hex	Usage
Background	`#F0ECE4`	Main page background
Text	`#2E3238`	Body text and headings
Accent	`#2F56A6`	Links, buttons, primary accent
Muted Text	`#6b7280`	Secondary text, eyebrow labels, nav links
Panel	`#2F56A6`	Code blocks, dark panels, feature surfaces

Role	Hex	Usage
Background	`#1a1b20`	Main page background
Text	`#e2dfd8`	Body text and headings
Accent	`#9ca3af`	Accent text and links
Muted Text	`#8b919a`	Secondary text, eyebrow labels, nav links
Panel	`#1e2640`	Code blocks, dark panels, feature surfaces

Role	Light Panel	Dark Panel	Usage
Decoration Square Strong	`#EAEEF6`	`#E9E9EC`	Bright filled squares on panel-based decorative grids
Decoration Square Medium	`#7891C5`	`#6D7383`	Mid-strength decorative squares
Decoration Square Subtle	`#4064AD`	`#30374F`	Base and low-contrast decorative squares
Zigzag Square Strong	`#C1CCE4`	`#BCBEC6`	Bright squares in homepage zigzag decorations
Zigzag Square Medium	`#6D89C1`	`#626779`	Mid-strength zigzag squares

The primary typeface is Overused Grotesk, a free and open-source variable font. Code blocks use JetBrains Mono.

Name	Weight	Usage
Overused Grotesk Variable	Book (425)	Body text, nav
Overused Grotesk Variable	Medium (460)	Headings, eyebrow labels, feature titles
Overused Grotesk Variable	SemiBold (600)	Buttons, CTAs, table headers
JetBrains Mono	Regular	Code blocks, inline code

Vary has its own custom created font: varyfont.

It is a 5x7 bitmap display font used for OG artwork and exported here as downloadable assets.

Format	Download
WOFF2	Varyfont-Regular.woff2
TTF	Varyfont-Regular.ttf

varyfont

;

(

)

[

]

{

}