Design tools

Figma and Adobe handle the full design environment: layers, constraints, component libraries, export pipelines. These tools handle a different set of questions — the ones you find yourself searching for while Figma is open: "Which font pairs well with Inter?" "Does this color combination pass WCAG AA?" "What's the correct type scale for a 16px base size with a 1.25 ratio?" "How do I optimize this SVG icon before adding it to the codebase?" They're focused aids for specific decisions, not a substitute for a full design environment.

The typography subcategory covers type hierarchy decisions. A font pairing tool suggests Google Fonts combinations that work well together, organized by pairing rationale (contrast pairings, same-designer pairs, superfamily combinations). A modular type scale calculator takes a base size and a ratio — common ratios are the minor third (1.2), major third (1.25), perfect fourth (1.333), and golden ratio (1.618) — and produces the full scale of heading and body sizes derived from that system. A line-height calculator gives the optimal line spacing from font size and measure (column width), based on Bringhurst's rule that lines of 45–75 characters need a line height of roughly 1.4–1.6×. A golden ratio typography calculator applies the 1.618 proportional relationship specifically to type size decisions.

The color subcategory covers the most common color-decision work. A color picker converts between HEX, RGB, HSL, and HSV representations so you can move values between tools that expect different formats. The WCAG contrast checker computes the luminance contrast ratio between two colors and reports whether the pair passes AA (4.5:1 for normal text, 3:1 for large text) or AAA (7:1) — required knowledge for any UI that needs to be accessible. A color palette generator produces complementary, triadic, and analogous palettes from a single base color. A color blindness simulator previews how a color combination appears under deuteranopia (red-green, the most common form), protanopia, and tritanopia (blue-yellow) — a faster check than installing a browser extension.

The CSS subcategory generates visual effect code. A gradient generator produces linear and radial CSS gradient syntax with a live preview. A box-shadow generator handles multiple shadow layers with offset, blur, spread, and color controls. A border-radius generator builds the eight-value shorthand for asymmetric radius shapes. A CSS transform playground lets you compose translate, rotate, scale, and skew transforms visually and copies the resulting matrix. A clip-path generator handles the polygon and circle clip shapes. A cubic-bezier easing generator plots the curve and outputs the four-point cubic-bezier CSS timing function for custom animation easing.

The composition subcategory handles proportional layout decisions. An aspect ratio calculator converts between ratio notation (16:9, 4:3) and pixel dimensions in either direction — enter width to get height, or vice versa. A DPI/PPI calculator answers "how many pixels do I need for an A4 sheet at 300 DPI?" (2480 × 3508 px) and the reverse. A golden ratio calculator applies the 1.618 proportional relationship to any measurement to find its golden complement — for sidebar widths, section proportions, and layout column planning. An image dimension calculator preserves the aspect ratio when you resize to a constrained dimension.

The SVG subcategory covers icon and vector workflow tasks. An SVG optimizer applies path simplification and attribute cleanup to reduce file size — comparable to what SVGO does, directly in the browser. An SVG color changer replaces all fill and stroke values across a complete SVG document, which is faster than opening an editor when you need to match an icon set to a new brand color. An SVG path viewer parses path command syntax (M, L, C, Q, Z) and highlights each segment, useful when a path is machine-generated and you need to understand its structure.

The assets subcategory generates common production assets. A favicon generator takes an uploaded image or SVG and produces the full set of favicon sizes (16×16, 32×32, 180×180 Apple touch icon) plus a Web App Manifest JSON. A placeholder image generator creates configurable placeholder images at any dimension with custom background color and label text. A social media image dimensions reference shows the current recommended sizes for Twitter/X, Instagram, LinkedIn, Facebook, and Open Graph cards, and provides a live canvas for previewing how an image crops at each format.

What these tools don't replace: Figma, Sketch, Adobe Illustrator, Photoshop, or InDesign. They don't manage design systems, produce print-ready files, or handle vector illustration. They answer specific questions that come up while those tools are open, saving the round trip to a browser search.