Skip to content

Redesign: a dark page, Mona Sans and JetBrains Mono, cards on hairlines - #4

Merged
sdogruyol merged 10 commits into
iyilang:mainfrom
Mustafaaytu:site/redesign-port
Oct 15, 2026
Merged

Redesign: a dark page, Mona Sans and JetBrains Mono, cards on hairlines#4
sdogruyol merged 10 commits into
iyilang:mainfrom
Mustafaaytu:site/redesign-port

Conversation

@Mustafaaytu

@Mustafaaytu Mustafaaytu commented Oct 15, 2026

Copy link
Copy Markdown
Contributor

Summary

Ports the iyi.dev redesign onto the Astro site: a dark page by default, Mona Sans and JetBrains Mono, cards on hairlines. Every number still comes from facts.json and the records, and every build gate still runs.

  • Redesigned pages: home, why, learn and its eight lessons, agents, the playground index and every program page, install, and the project documents. The rest (download, targets, evidence, 404) take the new look from the shared layer.
  • Home: a rebuild replayed at real speed in the first screen. It uses the measured 1.17 s against 0.13 s; the module names and the edit are illustrative, and the page says so.
  • Claims: the copy keeps the live site's claims as it states them. Where the redesign had shortened or strengthened a claim, the live wording is restored.

What changed in the machinery

  • Tokens: src/styles/tokens.css holds the redesign's palette, dark by default on screen; print stays light. Five values were moved the least distance that clears their contrast floor. scripts/contrast.mjs now also gates the card and code grounds, the green and amber status colours, and the white label on the red button: 104 pairs.
  • Fonts: Mona Sans (with its width axis, which the display type uses) and JetBrains Mono, vendored through @fontsource like before. They add about 55 KiB to a first view.
  • Budget:
    • scripts/budget.mjs counted a preloaded font twice, once as an image and once as a font; it now counts it once.
    • The ceilings the new faces push past are raised by hand to measured plus one grain. --adopt lowered the rest.
  • Shared code: src/lib/play-when-seen.ts replaces four copies of "play a figure once when it is in view". It also fixes a figure that never played on a screen shorter than itself.
  • Docs: doc/ART-DIRECTION.md is rewritten for the new decisions (dark default, the type, three syntax hues, the two lit panels, motion, imagery, prohibitions), and its screenshots are redrawn from the build. The palette tables are in the form bench/website_citations.py checks.

Verification

  • npm run build passes: contrast, no-transcription, prose, links and budget.
  • astro check has 0 errors.
  • Compared page by page with the live site:
    • Copy: one review checked the copy for claims that were stronger, weaker or dropped; every finding was verified before it was fixed.
    • UI and UX: one review checked layout, controls, keyboard, reduced motion and no-script at 390 to 1920 px.
  • A code review was also run; the findings that could be reproduced are fixed.
  • Playground Run executes the real wasm in the new layout, side by side with the output on a wide screen.

Overlaps with site/review-recommendations

That branch is not merged yet, and both branches change these files:

  • doc/ART-DIRECTION.md
  • package.json
  • scripts/budget.json
  • scripts/budget.mjs
  • src/components/Playground.astro
  • src/layouts/Page.astro
  • src/pages/index.astro
  • src/pages/learn/[...slug].astro
  • src/pages/playground/index.astro
  • src/pages/why.astro

It also moves agents.astro to agents/index.astro and changes the nav. Whichever lands second needs a merge. If that branch goes in first, I will rebase this one onto it and bring the new pages (docs, releases, community) into the new look.

Questions for you

  • Tagline: "A friendly, fast language …" now sits close to Roc ("A fast, friendly, functional language") and to Crystal's "A language for humans and computers". I left it as is, because it is your call.
  • Measurement scope: /agents says the token saving is measured on the 7,207-line, 30-module project. bench/context_pack.py lists webapp.iyi and calc.iyi as its targets. I kept the live sentence; it may be worth a look.

🤖 Generated with Claude Code

Mustafaaytu and others added 10 commits October 15, 2026 18:50
@Mustafaaytu @claude @sdogruyol
redesign the site: a dark page, Mona Sans and JetBrains Mono, cards o…
21683ab 
…n hairlines

The home, learn, agents, playground and install pages move to the new
design; every other page takes it from the shared layer. Numbers still come
from facts.json and the records, and the agents loop is built from
records/agent.json rather than copied into the page. The why page is left
for a design of its own.

The palette is the redesign's, with the five values that fell under their
contrast floor moved the least distance that clears it. The budget gate
stops counting a preloaded font twice, and the ceilings the new faces push
past are raised by hand: the two families weigh about 55 KiB more per first
view than Figtree and IBM Plex Mono did.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@Mustafaaytu @claude @sdogruyol
redesign, second pass: the why page, the lessons, and a rebuild at re…
8dc7194 
…al speed

The why page gets its design: the four sides as figures, the moves from
Crystal, the targets that run and the ones that compile, and puts "hello"
at true area, Crystal's library and then iyi's growing in step with their
counters before the ratio is stated. The home page replays one line changed
in one of the bench's modules, both builds at their measured durations, and
the mascot stands beside the one line again on a wide screen. The lessons
and the project documents move to one column; the learn and playground
indexes list the tour by section.

Every figure plays once when it is in view and again on Replay, never on a
loop, and with no script or under reduced motion the finished figure is
what the page draws. The agents page keeps the live site's claims as it
states them. A button marked hidden is hidden again: an author display was
overriding the attribute, which put "Forget my progress" on a fresh visit.

The home page and the shipped assets are raised by hand to the mascot's
weight, measured plus one grain.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@Mustafaaytu @claude @sdogruyol
put Run and the output back where the eye is
ec23a6d 
On a program longer than a screen the redesign had pushed Run below the
fold and the output under the listing, so a reader scrolled to find the
control and again to see what it printed. The file and the controls now head
the card, and on a wide screen the program and its output sit side by side,
as they did on the live site. Where they stack, a run that prints below the
fold brings the output into view.

The home page's mascot is drawn smaller, so the line beside it keeps the two
lines the redesign set it in.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@Mustafaaytu @claude @sdogruyol
keep the live site's claims, and fix what the comparison found
1dce28d 
Two reviews compared the redesign with the live site, one for the reading
and one for the use of it; every finding was checked before it was fixed.

The claims are the live site's again. Why restores "the claim is young",
the young parts named, the Windows jobs and the audit exceptions, macros
that travel in the artifact, the machine named only where a number is a
duration, and the libraries within noise. Agents restores the four-module
caveat and the measured byte-for-byte answer over MCP, names the project the
race replays, and says the verdict carries a fix where the compiler knows
one. Install keeps the Visual C++ requirement, and the playground says again
that nothing on it compiles what you type.

For use: Run is the twelfth tab stop again, not the forty-fifth; the
masthead's controls are 44 pixels on a phone and the scheme switch has an
edge; tabs wrap instead of scrolling out of sight; the loop's commands can
be copied; a lesson has its "In this step" again; the tour's sections are
headings; the old /why/#aix and /install/#install-by-hand still land; the
race offers no replay it cannot run; and a caption under 4.5:1 is darker.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@Mustafaaytu @claude @sdogruyol
bring the measurement and the three consequences into the first screen
0bf68c0 
The rebuild panel's two durations sat under the fold on a laptop. The rule's
three consequences now read as a short list under the same sentence, the
version moves into the Install button, the hero sits higher, and the panel
lays its thirty modules ten across with the durations right under them, so
1.17 s against 0.13 s is in view at 1280 by 800 and 1366 by 768.

"What iyi is for" follows the panel, the first program's output carries a
way to run it, and the Crystal section keeps the live site's sentence about
the one rule the compiler teaches as you go.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@Mustafaaytu @claude @sdogruyol
redraw the art direction's screenshots from the current site
ed2a6a9 
Why, learn, a sample after Run, and the tour had changed since they were
last captured.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@Mustafaaytu @claude @sdogruyol
a clean edge for the mascot, and a program page that fits a phone
b378b8f 
The mascot was cut out of a white ground with a hard mask, so on the dark
page it wore a pale, stepped outline. The light fringe and the outermost
ring that carried the old ground are gone, the drawing's own colours are
bled under the edge, and the mask has a soft pixel instead of a step.

On a phone the program page kept the bench in a second column, which
squeezed the tour into a sliver beside it; it is one column again, a
repository sample's path breaks at its slashes, and the copy button keeps
its row. The tour list opens with the current program in its middle,
sideways on a phone and down the column on a wide screen.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@Mustafaaytu @claude @sdogruyol
fix what the code review found and could be shown
22c80a8 
One helper now decides when a replayed figure plays, where four copies had
drifted apart. It also covers a figure taller than the band it waits for:
on a screen under about 300 pixels the true-area squares never played and
stayed empty.

The reader and edit switches on /agents are radios, so they say which is
chosen with aria-checked; they said it with aria-selected, which a radio does
not expose. Jumping to a step from the race no longer animates under reduced
motion. A program's first comment line is read by one helper and rendered as
markdown on its page as it already was in the list, so `case` is code on
/playground/case/ rather than backticks. The "native" chip style no longer
reaches every <em> in the tour list. A dead variable on the sample route is
gone.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@sdogruyol
run the build gates on Windows: import the astro config by file URL
b6bae9f
@sdogruyol
put the agent race on the home page, label it AX, and name the sample…
94a2375 
…s it was measured on
sdogruyol
sdogruyol approved these changes Oct 15, 2026
View reviewed changes

@sdogruyol sdogruyol left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks a lot @Mustafaaytu 🫶

@sdogruyol
sdogruyol merged commit 5291083 into iyilang:main Oct 15, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sdogruyol sdogruyol sdogruyol approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Mustafaaytu @sdogruyol