Sylveon takes the design page. The six pillars have their own evolutions; this one belongs to the page itself.

How I design a page around the question it answers

I start with the question. A number gets a chart. A release date gets a checked answer. A choice gets the options in one table. The page takes the shape of the decision.

Read next Meet the six evolutions that run the rest of the system

Sylveon, a pink and cream Eevee evolution with ribbon feelers
The pink line in the phone demo marks the first screen. Put the answer above it; make everything else earn its place.

The same five blocks, answer last and answer first

  1. The template. A big photo, a paragraph about the company, a sign-up box, and then, somewhere, the answer. Every block is fine on its own. Together they push the answer off the first screen.
  2. The popup goes first. Someone who came for an answer shouldn't have to close anything to get it.
  3. Shaped for the question. The answer moves to the top, the table that proves it comes next, and the rest waits its turn. Nothing new was written. The blocks moved.
Big stock photo
About our company
The answer20A for 12 AWG copper
The table that proves it
Join our newsletter!Rejected by Sylveon

Shaped like a template, the answer starts below the first screen, under a sign-up box.

Three kinds of question, and the page shape each one gets

Two pages from my sites, captured at phone width, and one labeled illustration of an unnamed project's answer structure.

  1. "What's the number?"

    WireRef's 12 AWG copper page on a phone: the quick answer, a usable ampacity of 20 amps, sits right under the title

    A quick answer, then the chart. The number sits under the title, before any explanation. WireRef's ampacity chart drew 14.8% of the site's AI citations.

    Captured October 20, 2026. Citations: Bing, Apr 13, 2026 to Oct 11, 2026.

  2. "Is it out yet?"

    Illustration of an answer-first reference page, not a live screenshot

    The answer, then the date I checked it. What's known, what isn't, and the rumors it won't repeat, all on the first screen.

    Illustration of an independent project I built. Its identity is withheld; the measured case has the exact data.

  3. "Which one should I pick?"

    Hear Homer's table of every Odyssey audiobook on a phone: rank, recording, translation and narrator in one table

    Every option in one table. The same facts for each, so nobody has to open twelve tabs. It's Hear Homer's most-cited page, at 30%.

    Captured October 20, 2026, scrolled to the table. Citations: Bing, Jul 20, 2026 to Oct 11, 2026.

Which shape wins most often: the most-cited page, site by site.

The rules, at actual size

Every page on this site has to pass these before it goes live. They're shown here at the size they really are.

44 pixels to tap

Anything you can tap is at least 44 pixels each way, so a thumb in the sun can hit it.

Left: 44 pixels, the smallest this site ships. Right: 24 pixels, the kind it refuses.

About 68 characters a line

Long enough to read in phrases, short enough that your eye finds the next line.

On a wide screen, this line runs sixty-eight characters, end to end.

4.5 to 1, or it doesn't ship

Text has to stand at least 4.5 times brighter or darker than what's behind it. Sylveon's own pink can't. The samples below are drawn in the colors the site uses.

  • Body text16:1Ships
  • Links and labels6.7:1Ships
  • Sylveon's ribbon pink as text1.8:1Refused
  • Ribbon blue as text2.1:1Refused

The answer starts in the first 600 pixels

On a phone 390 pixels wide, every page's answer has to start in the first 600 pixels. On a phone, you scrolled past that line near the top of this page: the ribbon.

83 checks run on every change, and the browser checks run before every release. How the checks catch mistakes.

Then I check whether people read it

A page can pass every rule and still lose its reader, so I watch how far people scroll and how long they stay, every month. In October 2026, the deepest reading on the sites I measure in Microsoft Clarity was on Title Town PDX: people scrolled 43% of the way down a page and spent 87 seconds actively on it, on average (Clarity, data through Oct 31, 2026). People scrolled less on 2 of the 6 sites I can compare with the month before, by 2 points or more. I count smaller moves as flat. Those slips are where I look next.

Every site, by month

Rejected by Sylveon

My rules, not something the data proves. Sylveon signed off anyway.

  • Popups and countdowns. Someone who came for an answer shouldn't have to close something to get it.

  • A buy button on a worry. A person working out what's wrong isn't shopping yet. That page answers the worry and points to the next question.

  • Decoration over the answer. A photo or a row of numbers above the answer pushes it off the first screen.

The directions I set

Those are the rules. These are the calls behind how this site looks, in the words I used the day I made them.

  1. does the site feel cohesive, like everything connects? remember, that's the whole goal
  2. each page needs to be differentiated, nothing repeated, and this is the core of our site.
  3. make the design page internal link unique to match creative theme across the entire site
  4. thinking through how the shapes fit together for design and how you can add interactive "cohesion" meld

Anything I turn down twice comes back as two or three directions side by side, and I pick.

The seventh evolution

My system has six pillars, and each one is an Eevee evolution picked for its best stat. Sylveon was left over, so it took the design page.

  1. EspeonA. Start from the person
  2. VaporeonB. Tell it as a story
  3. LeafeonC. Be the source worth citing
  4. UmbreonD. Never ship a wrong fact
  5. JolteonE. Measure, then double down
  6. GlaceonF. Turn every lesson into a system
  7. SylveonDesign, this page
Sylveon

Sylveon No. 700, Fairy type

Every pillar got an evolution. Sylveon didn't, so it took the design page. Its best stat is Sp. Def, the same wall Umbreon brings to never shipping a wrong fact, pointed at the reader's eyes instead: popups, clutter and pale text bounce off it.

HP
95
Attack
65
Defense
65
Sp. Atk
110
Sp. Def
130
Speed
60

Base stats from PokeAPI, read October 14, 2026. Every Eevee evolution totals 525, so none is stronger, only built for a different job.

Where these rules came from, mistakes included: how I think.

Meet the six evolutions that run the rest of the system

Arrow keys move. Enter opens. Esc closes.

Ask Bella

Ask Bella Hayden's corgi, who answers from this site and cites every fact.

BELLA

WOOF. I'm Bella, Hayden's corgi. He's my human. Ask me about him; every answer cites its source.

Reading this page? The top button is my short version of it.

How it works: the answers are written ahead from this site's pages, and anything else gets a search of the site that shows you its exact words. Every claim has a numbered source you can tap. Nothing is generated while you wait, nothing is made up, and nothing you type leaves your browser. Every answer, in plain HTML

Top

This page was last updated