Skip to content
FreshlyCited

§05 · Components

The real interface, not a mock-up.

Everything on this page is rendered by the same components the site and the app use. If a chip, a button or a scene appears on a marketing page, an email or a social post, it should look and read exactly like these.

Status chips.

The marketing replica AppChip is pinned to the app's light colours, so it looks right on paper in any theme. Hover a chip for its tooltip.

AppChip · the hero order, then the rest

InvisiblePushedSeen by GoogleSent to BingCheckingGoogle crawlingCheckedAlready seen

StatusBadge from the app · every push status, with its push wording

CheckingPushingPushedGoogle crawlingPushing graduallyScheduledIn reviewDonePartly doneFailedCancelled

The stage tracker.

Always these four stages, in this order. The active one spins (it holds still under reduced motion).

Pushed, waiting for Google

  1. Checked
  2. Pushed to Google
  3. 3Google crawling
  4. 4Re-checked

Google crawling

  1. Checked
  2. Pushed to Google
  3. Google crawling
  4. 4Re-checked

Done: re-checked

  1. Checked
  2. Pushed to Google
  3. Google crawling
  4. Re-checked

Buttons: one action each.

Full pills on marketing pages, sentence case, an arrow when it moves you on. Gold buttons live on navy; navy buttons live on paper.

Primary on paper · header and story CTA

Check my pages freeRead the guide

Gold on navy · footer and closing bands

Check my pages free

The app's Button · its real push label

The footnote cite.

Every borrowed fact carries a mono marker. Click it: the card shows the publisher, the quoted words in italics and a link to the original. Terms of art get a dotted underline with a one-line gloss.

Cite · Term

To appear as a link in AI Overviews or AI Mode, a page must be indexed and eligible to be shown with a snippet. Google says crawling can take anywhere from a few days to a few weeks. For sites you verify, we also send changes through .

  1. [3]Google Search Central, AI features and your website “To be eligible to be shown as a supporting link in AI Overviews or AI Mode, a page must be indexed and eligible to be shown in Google Search with a snippet.”
  2. [7]Google Search Central, Ask Google to recrawl your URLs “Crawling can take anywhere from a few days to a few weeks.”

The story card.

One per guide, doc and blog page: three beats, one scene, one call to action. This is the real StoryCard with the story from a live guide. More on the motion page.

The story · 3 steps

Illustration with sample pages, not your data.

Check my pages freeFree plan: 10 free links to try (once you verify your email), then 100 free checks a month, no card.

Radii and shadow.

Soft, navy-tinted shadows, never grey or black. Radius grows with the size of the thing.

Inline code6px
Callouts, code blocks16px
Cards, takeaways, CTA22px
Hero art, story card28px
Buttons and chipsfull pill
Shape tokens
TokenValue
Card shadow (--fc-shadow)0 1px 2px rgba(19,33,58,.05), 0 14px 34px -22px rgba(19,33,58,.35)
Container1280 px, 16 px gutters → 32 px on desktop
Sticky header64 px; anchors clear it with scroll-padding-top: 5rem
In-article CTA buttons12 px radius (the one exception to pills)