Orthir

/ˈɔːrθɪər/ noun

A digital suite providing specialized tools for web designers and developers to ensure structural integrity, mathematical precision, and visual alignment in digital products.

Etymology

From Greek orth- (ὀρθός): straight, upright, correct, true.

Usage

“I’m using Orthir to make some cool shit.”

Get Started Learn More

Total Exports

−

designers & developers worldwide

Available Tools

Explore our collection of precision design utilities.

Avatar LabNewSVG · PNG · React

Generate deterministic avatars from any seed string. Initials, geometric, gradient, and pixel styles. Export as SVG, PNG, React, or CSS.

AvatarsSVGExport

Colour PaletteHSL · HEX · OKLCH

Create, explore, and export harmonious colour palettes for any project.

ColoursPalettesExport

Contrast CheckerNewWCAG · AA · AAA

Check colour pairs against WCAG AA and AAA accessibility standards. Instant pass/fail for normal text, large text, and UI components.

AccessibilityColourWCAG

Font BuilderOTF · TTF · SVG

Draw glyphs, upload SVGs per character, and export a fully functional .otf font file.

FontsTypographyExport

Gradient LabLinear · Radial · Conic

Craft beautiful linear, radial, and conic gradients with live preview.

GradientsCSSPreview

Grid ForgeSVG · PNG · Canvas

Generate precise SVG grids and backgrounds for design systems, graph paper, dot matrices, and more. Export as SVG, PNG, or embeddable HTML canvas.

GridsBackgroundsSVG

Icon-trastNewLucide · Radix · Phosphor · Tabler

Compare icons side by side across Lucide, Radix UI, Phosphor, and Tabler. Copy as SVG, import, or JSX.

IconsSVGCompare

Planet-HashNewProcedural · Seeded · 2D

Generate deterministic procedural planets from any seed string. Explore unique star systems, moons, biomes, and alien worlds.

ProceduralPlanetGenerative

Shadow StudioCSS · Layers · Box

Design layered box shadows visually and copy production-ready CSS.

ShadowsCSSDesign