$5
20 stress tests
Design system
Every page on askto.it is built from the tokens and parts below. A test reads the stylesheets on each change and fails when a rule on this page is broken.
Direction
The reference is the Probability Machine that Charles and Ray Eames built for Mathematica: A World of Numbers… and Beyond in 1961: a Galton board shown as a museum object, with marbles falling into a bell curve. Ask To It draws the same kind of board, so the site takes the manners of an exhibit. Paper and ink, ruled lines, a serif with some weight to it, and one warm colour for the answer.
Each choice below is made for this product. When something could be decoration or information, it is information: the only things that move are marbles and bars that show a result.
Colour
Warm means a decision, verdigris means there is not enough to decide, amber means too close to call. Every state is also written in words and numbers, and doubt is drawn hatched or hollow, so no meaning rests on hue alone.
Paper and ink
- Bone
--bone #F1ECE3 - Bone 2
--bone-2 #E8E1D5 - Ink
--ink #14120F - Mute
--mute #676057
Meaning
- Signal
--signal #EE4411 - Signal ink
--signal-ink #B5350A - Doubt
--doubt-ink #1F6159, hatched - Amber
--amber #F0B84A
Night
- Night
--night #0F0E0C - Night 3
--night-3 #2A2723 - Chalk
--chalk #D8D1C5 - Doubt on night
--doubt #86C2B6
Type
Two families, both under the SIL Open Font License and self-hosted with Latin Extended, so Turkish, German, French, Spanish and Italian letters stay in the brand fonts.
Besley 800, --display. Headings, prices, big numbers.
Zor kararı sayılarla tart.
Libre Franklin 400 to 700, --body. Text, labels, controls, small numbers.
Write your question, list the options and add what you know. Jev gives each option a probability, and says so when your facts are too thin to call it. Größe, çağrı, élan, señal.
Numbers use lining, tabular figures so columns line up.
84% · 16% · $0.16
Shape and lines
Panels are square. Controls are softened by 3px so they read as pressable. Only marbles and option keys are round, because they stand for marbles. Structure comes from 1.5px ink rules and a change of surface; there are no drop shadows.
--radius 0
--radius-s 3px
--round
Components
Buttons
One signal button per screen, for the main action.
Chips and segmented control
Focus draws a signal outline.
Marbles
Lead, other options, and undecided. Undecided marbles are hollow.
Context sufficiency41%
Below the 55% line the fill is hatched.
Context sufficiency78%
Above it the fill is solid.
Studio
$15
80 stress tests
Prices read as a ruled price list. No tier is dressed up as the one to pick; the price per test shows the difference.
Motion
The marble machine drops about 140 marbles in three to four seconds. Result bars grow once when they come into view. Pages cross-fade. Buttons change colour on hover and press down 1px; nothing lifts, bounces or glows. With reduced motion turned on, the machine shows its final pile and everything else is still.
What the site never does
These are the defaults that make a page look generated. Most are checked automatically by scripts/design-lint.mjs and scripts/slop.mjs.
- Default fontsInter, Roboto, Geist, Instrument and the other stock families. Headings and body use the two families above, set through tokens.
- Indigo and violet accents, two-colour hero gradientsThe Tailwind indigo ramp is blocked. Surfaces are flat colour.
- Colour outside the tokensA hex or rgb value anywhere but the token list fails the check.
- Rounded cards, pill buttons, coloured left bordersRadius must come from the scale: 0, 3px, or round for marbles.
- Soft drop shadows, glows and glass blurOnly hairline inset outlines are allowed. Depth comes from rules and surfaces.
- Hover lift and bounceNo element rises or scales on hover.
- Emoji as icons, eyebrow labels, badges, marqueesHeadings say what is below them. Captions sit under the thing they describe.
- Accent words in a second typefaceA heading is set in one face and one colour.
- A highlighted pricing tierEvery pack is shown the same way.
- Invented numbersEvery percentage on the site is labelled as an example or comes from a real result.
- Machine-written copyNo em dashes, arrow bullets, “not X but Y” reversals, stock AI vocabulary or exclamation marks.