Independent reviews. IonBin has no partnerships with the tools on this page and was not paid for these listings. Our evaluations are our own, based on public documentation and our research. Product names are trademarks of their owners and are used for identification only. How disclosure works.

Tokens & playbooks / Responsive design calculator

Utopia

Make type and spacing scale between defined limits.

Documentation reviewed

Source review

What this status means

Understand the resource

What it is.

Utopia provides a fluid design approach and calculators for type, space and grids. Designers specify small- and large-screen endpoints, and the browser interpolates between them instead of relying on a separate value at every width.

When it is useful

An editorial or marketing layout needs a controlled rhythm across screen sizes.

A proposed application

Put it to work.

This example illustrates a possible use. The proposed workflow and expected result are separate from the bounded checks recorded below.

Try this

Set a modest heading range, apply the generated values, and check long titles at narrow widths and enlarged text.

Result to aim for

A bounded responsive scale that can be inspected in the page.

Before you start

What you need.

  • Chosen minimum and maximum values plus a CSS implementation.

The practical boundaries

What to watch for.

  • Fluid sizing can still produce cramped layouts or inadequate text resizing.
  • Test actual content, zoom and browser settings; a calculator does not replace responsive QA.

Review record

What we could establish.

  • Public primary documentation and the bounded account-free checks below were reviewed. The public viewport slider changed its preview from 210 to 767 pixels. This confirms that sample interaction; it does not validate every generated type or spacing scale.
Source coverage and runtime coverage are separate

The source-review notes describe documentation and identity. The account-free evaluation below records exactly which public interaction or local fixture was checked, what happened, and what remains untested.

Check current access, terms, licensing and data handling before using a resource with your own material.

Runtime and security evaluation

What the evaluation covers.

Bounded runtime checkedAccount-free ·

The public viewport slider changed its preview from 210 to 767 pixels. This confirms that sample interaction; it does not validate every generated type or spacing scale.

Methods: Public HTTP response · Public browser sample. A completed check covers the stated sample; it is not a safety certification.

Target
https://utopia.fyi/
Version or capture
Unversioned public page checked 2026-10-19
Integrity scope
sha256:aa6d29ad9f952590252528431137833483d0801d1a157a4fc60160afd9ecfa58

Test conditions

  • Chromium 155.0.8059.82 on Windows; fresh temporary profile and fresh account-free contexts.
  • Public HTTPS GET/HEAD requests only; telemetry/auth routes and WebSockets blocked. No account storage or credential environment variables.

Individual checks and observations

  1. Public document and DOM

    pass

    Public browser sample: Fresh Chromium GET, then inspect rendered controls after hydration delay

    Observed: HTTP 200; 0 captured button labels; 2 inputs; 0 canvases.

  2. Fluid preview slider

    pass

    Public browser sample: Move viewport slider between its minimum and maximum values and compare rendered preview state

    Observed: [{"value":"210","widths":[210]},{"value":"767","widths":[767]}]

Security findings and boundaries

Passive inspection of the public response headers, requested hosts and the named browser sample. No active exploitation, authenticated permissions test or complete security audit.

Observed · caution

Preview width is not a readability check

The slider changed the rendered preview width. That says nothing about text zoom, long translated labels or a chosen scale meeting your reading needs.

Practical caveats

  • Choose minimum and maximum values with real content, then test the resulting CSS at zoom and narrow widths.
  • Pin and recheck the selected version or sample before adoption; the observations apply only to the scope and date shown.

What remains untested

  • No complete calculator-export round trip or font-dependent readability study was performed.
  • Fresh-browser restrictions can affect external assets and hydration. Initial failed selectors and limited probes remain in the evidence; they are not blanket product failures.

Security limits

  • No authenticated workspace, private content, production backend permissions or data-retention verification.
  • No complete calculator-export round trip or font-dependent readability study was performed.

Evaluation sources

  1. Primary public resource

Download this evaluation record (JSON)

Follow the evidence

Sources and further reading.

  1. Primary product page

Keep exploring

More in tokens & playbooks.

View category

Documentation reviewed

UI Skills

Turn broad polish requests into focused review tasks.

Documentation reviewed

DesignSystems.one

Compare published systems and inspect their design foundations.