Repository navigation
Lab UI: every HTML output in the site's visual language - #2
Merged
Merged
Conversation
The Lab tools present themselves on alidemirbas.com.tr/lab, but each of their HTML outputs carried its own look. templates/lab-ui.css is the site's visual language as one stylesheet: stone ink on white paper, the brand blue #2f6bff, the site's hue ramps, radii and shadows, one sans family, plain-case labels, and the components the outputs need (tiles, chips, badges, pill buttons, segmented tabs, picker tiles, tables, meters, the journey cards on a dot sheet, tooltip, toast), with light and dark themes. Outputs must stay single self-contained files that render offline and load nothing third-party, so the kit is inlined, not linked: a file opts in with a /* lab-ui:begin */ ... /* lab-ui:end */ pair inside its <style>, and scripts/sync_lab_ui.py writes the kit between them. validate.sh section 17 runs it with --check so an inlined copy can never drift from the kit. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The canvas was cream paper, Georgia, a terracotta accent and uppercase monospace labels, a look shared with nothing else the project ships. It now uses the kit and the same card language as the journey pages on the site: a dark entry card with its Giriş pin, paper message cards with the channel colour along the top, the green decision card, wait and exit pills, branch labels as small pills, and orthogonal connectors with arrowheads on a dot sheet. Journey tabs are picker tiles, the meta card is a tile with a plain-case definition list, and the download buttons are the site's pills. Every interface word now sits in one UI block, so the English demo differs from the template only in that block and the language tag. A message step whose tag names a human route (Insan, CSM, Human, Support) shows as its own channel instead of falling back to Email, and the channel no longer repeats in the tag beside its pill. The swappable regions, their markers and the JOURNEYS boundary are unchanged, so build_canvas.py and the skeleton check work as before. docs/demo/journey-canvas.html and the README screenshot are rebuilt from the new template with the same demo data. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Each step card now carries its channel colour along the top, the same signal the journey canvas uses, so a step is recognisable across the two files. Journeys switch on the site's segmented tabs; review status is a tinted badge with an icon instead of an emoji; variant labels, field labels and counts are plain case; fields sit in a hairline table with the render-time recount unchanged (over the limit in the bad colour, a declared count that drifted in the watch colour). The skeleton-check fixtures are rebuilt on the new template: the good one is the template with the fixture's data, the bad one drops the generator stamp, part of the kit and the mismatch state, the kind of elision a retyped copy makes, and carries no lab-ui markers so the sync never repairs it. docs/demo/message-copy.html is rebuilt from the new template with the same demo data. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
templates/report.html (the optional assessment report) was slate and teal in Avenir, with square corners, left colour rails and uppercase tracked labels. It keeps its structure and class names, since the engine reproduces those, and now takes its look from the kit: tiles, plain-case section headings, pill tags in the shared status colours, a status dot instead of a rail, and the brand blue for score bars. It is also a complete document now, with a body the kit can style. docs/index.html, the published landing page, moves from cream and Georgia to the kit, with the same content, canonical and share tags. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
The kit's picker fits four 200px cards into the canvas's 1000px column, so the demo's fifth journey sat alone on a second row. Up to five journeys now share one row on a desktop, six split 3+3, seven or eight 4+x; on a phone an odd last card spans the row. validate.sh (17 sections) and run_tests.sh pass. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The canvases, the report and the landing page each had their own look: cream paper, Georgia and terracotta on the canvases and landing page, slate and teal in Avenir on the report. None of them matched each other or the Lab pages on alidemirbas.com.tr. All four now draw from one kit, Lab UI, which is the site's own language: stone ink on white paper, the brand blue, one sans family, plain-case labels, tiles and pill buttons. The journey canvas uses the same journey cards as the site's journey pages.
What changes
templates/lab-ui.cssis the kit, the one place it is edited.scripts/sync_lab_ui.pyinlines it between/* lab-ui:begin */ … /* lab-ui:end */markers. Outputs stay single files that render offline and load nothing third-party: Inter where installed, the system sans otherwise.validate.shsection 17 fails on any stale inlined copy.UIblock that holds every interface wordUnchanged by design
const JOURNEYS … ];boundary are the same, sobuild_canvas.pyand the skeleton check work as before.UIblock.Checked
validate.sh(all 17 sections) andscripts/tests/run_tests.shpass at every commit in this branch.build_canvas.pyoutput and the report render at 1440px and 390px with no sideways scroll.🤖 Generated with Claude Code