Design and development
Fluid type calculators, contrast checkers, palette builders, and Tailwind snippets with copy-ready code and accessibility notes.
No sign-up. No data leaves your browser. Updated 2026.
Each tool includes a worked methodology, assumptions, and common pitfalls below the numbers.
Generate production-ready CSS clamp() formulas that scale font size linearly with viewport width, complete with rem conversion and Tailwind configuration presets.
Open calculator → Layout systemsDesign modern asymmetric dashboard and landing page bento layouts with customizable column spans, gaps, card radiuses, and copy-ready Tailwind code.
Open calculator → Color and contrastCalculate sRGB relative luminance and test compliance against 4.5:1 (AA) and 7:1 (AAA) thresholds with live visual preview and non-text UI component checks.
Open calculator →Practical walkthroughs with the math shown, not just conclusions.
Understand WCAG color contrast standards. Master AA vs AAA requirements, non-text contrast rules for icons and borders, and modern APCA alternatives.
Read the guide →How to build maintainable, accessible color design systems in Tailwind CSS using CSS custom properties, alpha opacity modifiers, and semantic tokens.
Read the guide →Why high-traffic websites are abandoning external Google Fonts in favor of native system font stacks. Eliminate font-display FOIT, CLS shifts, and HTTP requests.
Read the guide →Step-by-step technical guide to building Apple-style Bento grid layouts. Master grid-column spans, auto-fill algorithms, and responsive mobile adaptations.
Read the guide →Solve the card alignment problem once and for all with CSS subgrid. How grid-template-rows: subgrid aligns button footers regardless of paragraph length.
Read the guide →Design high-visibility, beautiful keyboard focus indicators without breaking mouse UX. Learn :focus-visible, offset outlines, and focus trap management.
Read the guide →Accessible color palettes with hex values, contrast ratios, and Tailwind mappings for common industries.
Every calculator on UIFoundry is deterministic: the same inputs always produce the same output, and the formula is documented in plain language on the tool page. Where a figure depends on an external benchmark — a published rate, a statutory limit, or an industry cost range — the page cites the publisher and links to it.
We separate inputs you control (balances, rates, dimensions, weights) from assumptions we supply (default rates, waste factors, contingency percentages). Assumption defaults are deliberately conservative and every one of them is editable on the tool page, so you can substitute your own quote or local figure.
Nothing you type is transmitted. The calculations execute in JavaScript in your browser, which means the tools work offline and no personal data is collected.