feat: align mctl-web with the MCTL design system by mashkovd · Pull Request #17 · mctlhq/mctl-web

mashkovd · 2026-05-29T06:44:50Z

Summary

Re-skins mctl-web onto the canonical MCTL design tokens so it stops diverging from the design system (it was using a #050816/#00f5ff fork with all-monospace type). Uses the dependency-free token-vendoring pattern that mctl-telegram and mctl-instruments already follow.

Changes

Palette: ink #0a0b0d + cyan #00e5ff (canonical), neutral hairline borders instead of cyan glass borders
Type: Geist for display/body, Instrument Serif available for ledes, JetBrains Mono retained for chrome (nav, eyebrows, code, terminal)
Aesthetic: replace cyan glows/sheens with the system's restrained hairline language; recolour the ambient grid to a neutral blueprint tone
Load Geist + Instrument Serif alongside JetBrains Mono

Earlier commit (also in this PR)

The first commit added a hero terminal mockup, eyebrow badge, secondary CTA, card hover polish, section-title accents, and a pricing "custom plan" path. The alignment commit re-tones these to the design-system language.

Verification

npm run build ✓ (SSR + prerender, exit 0)
Visually verified hero, sections, cards, pricing, /docs, /privacy

🤖 Generated with Claude Code

…d polish - Hero: add eyebrow badge, secondary 'Read the docs' CTA, and an on-brand terminal mockup showing the push/ask-AI/live loop - Add a fixed ambient blueprint-grid + glow background for depth - BaseCard: universal hover lift, accent border and top sheen - BaseSection: accent underline beneath section titles - Pricing: give the single Free plan an intentional centered layout with a 'custom plan' contact path beneath - i18n: add hero.badge, hero.cta_secondary, pricing.custom.* (en + ru)

Adopt the canonical mctl-design tokens (the dependency-free vendoring pattern mctl-telegram/mctl-instruments use) so mctl-web stops diverging: - Palette: ink #0a0b0d + cyan #00e5ff (was the #050816/#00f5ff fork); neutral hairline borders instead of cyan glass borders - Type: Geist for display/body, Instrument Serif available for ledes, JetBrains Mono retained for chrome (nav, eyebrows, code, terminal) - Replace cyan glow/sheen with the system's restrained hairline language; recolour the ambient grid to a neutral blueprint tone - Load Geist + Instrument Serif fonts alongside JetBrains Mono

mashkovd · 2026-05-29T06:44:59Z

@claude review

claude · 2026-05-29T06:45:07Z

Claude finished @mashkovd's task in 3m 9s —— View job

Code Review

Summary

2 P1 — none
3 P2 — must fix before merge
2 P3 — nice to have

Has P2 findings, changes requested.

The design-token migration in base.scss is solid and the new hero layout/animations are well-structured (reduced-motion, aria-hidden, BEM naming). Two categories of issues need attention before this lands:

P2 — stale hardcoded colours in `BaseCard.vue`

The PR defines --color-glass-border: var(--color-line) and states "neutral hairline borders instead of cyan glass borders", but BaseCard.vue was not updated to use the new token. Three raw rgba(0, 245, 255, …) values from the old #00f5ff palette remain:

Line 32 — base border (the one visible on every card)
Line 59 — --highlighted variant's box-shadow
Lines 72 & 79 — --dark variant's gradient and hover shadow

These should all be replaced with design tokens (var(--color-glass-border), var(--color-accent-soft)) — see inline comments.

P2 — terminal body will render in Geist, not monospace

base.scss in this PR switches body { font-family } from var(--font-mono) to var(--font-display). .hero-terminal__body inherits that change and will display all terminal lines in the proportional Geist typeface, breaking the terminal aesthetic. A one-liner fix: add font-family: var(--font-mono) to the &__body block.

P3 — terminal background not tokenised

rgba(8, 12, 26, 0.85) on .hero-terminal diverges from every token in base.scss. Either map it to var(--color-terminal) or name a new token.

P3 — `white-space: nowrap` may clip product copy on narrow viewports

The longest demo line (mctl ask "roll my-app back to v1.4.2") can be clipped with an ellipsis on sub-380px screens, silently hiding the key product message. Worth shortening or switching to pre-wrap.

No security issues, no XSS vectors (v-html source is static translation strings), no Node.js API usage in the Worker.

claude · 2026-05-29T06:47:50Z

+  &__body {
+    padding: 1.5rem 1.5rem 1.75rem;
+    font-size: 0.85rem;
+    line-height: 1.9;


P2 — terminal content will render in Geist, not monospace

base.scss in this same PR switches body { font-family } from var(--font-mono) to var(--font-display). .hero-terminal__body inherits that change and will now render all terminal lines in Geist — a proportional sans-serif — which breaks the visual metaphor entirely.

Add an explicit override:

Suggested change

line-height: 1.9;

padding: 1.5rem 1.5rem 1.75rem;

font-size: 0.85rem;

font-family: var(--font-mono);

line-height: 1.9;

Fix this →

claude · 2026-05-29T06:47:51Z

@@ -30,9 +30,30 @@ defineProps<Props>();
  background-color: var(--card-bg);
  border-radius: 8px;
  border: 1px solid rgba(0, 245, 255, 0.2);


P2 — base border still uses the old #00f5ff palette value, not the new design token

The PR states "neutral hairline borders instead of cyan glass borders" and defines --color-glass-border: var(--color-line) (#1f242b). This line was not updated, so every un-highlighted card still has a cyan-glowing border — contrary to the stated design goal.

Suggested change

border: 1px solid rgba(0, 245, 255, 0.2);

border: 1px solid var(--color-glass-border);

Fix this →

claude · 2026-05-29T06:48:02Z

+
  &--highlighted {
    border-color: var(--color-accent);
    box-shadow: 0 0 30px rgba(0, 245, 255, 0.2);


P2 — --highlighted and --dark variants still use old #00f5ff hardcoded values

Three places below this line were not updated to the new palette:

Line 59: box-shadow: 0 0 30px rgba(0, 245, 255, 0.2) — old cyan glow

Line 72: rgba(0, 245, 255, 0.05) in the --dark gradient

Line 79: rgba(0, 245, 255, 0.1) in the --dark hover shadow

Suggested updates:

Suggested change

box-shadow: 0 0 30px rgba(0, 245, 255, 0.2);

box-shadow: 0 0 30px var(--color-accent-soft);

And for the --dark variant's raw rgba values, replace with var(--color-accent-soft) or introduce a dedicated --color-accent-dim token.

Fix this →

claude · 2026-05-29T06:48:05Z

+  margin: 4rem auto 0;
+
+  text-align: left;
+  background: rgba(8, 12, 26, 0.85);


P3 — terminal background uses a hardcoded rgba not present in the token set

rgba(8, 12, 26, 0.85) is darker than --color-terminal (rgba(21, 24, 29, 0.85)) and darker than --color-bg (#0a0b0d). If this intentional divergence should persist, define a named token (e.g. --color-terminal-deep) in base.scss. As-is, any future palette adjustment won't reach this element.

claude · 2026-05-29T06:48:13Z

+
+  &__line {
+    margin: 0;
+    white-space: nowrap;


P3 — white-space: nowrap + ellipsis will silently clip terminal content on narrow viewports

The longest line — mctl ask "roll my-app back to v1.4.2" — overflows on viewports ≤ ~360px even at 0.72rem. The ellipsis makes it look fine at a glance but hides copy that demonstrates the product. Consider allowing wrapping (white-space: pre-wrap) for the body lines, or shortening the demo strings to fit ~320px.

- BaseCard: replace remaining hardcoded #00f5ff borders/glows with --color-glass-border / --color-accent-soft / --shadow-card-hover (P2) - Hero terminal body: force --font-mono so it doesn't inherit Geist (P2) - Tokenise the terminal background to --color-terminal (P3) - Let terminal lines wrap instead of clipping with an ellipsis on narrow viewports (P3)

claude · 2026-05-29T06:55:50Z

Claude finished @mashkovd's task in 2m 8s —— View job

Re-review (post-synchronize)

Summary

0 P1 — none
0 P2 — all previously flagged issues are fixed
2 P3 — non-blocking

The fix commit (894ddec) cleanly resolves both P2s from the first review:

BaseCard hardcoded rgba(0, 245, 255, …) values — all three (base border, --highlighted shadow, --dark gradient/hover) replaced with var(--color-glass-border), var(--color-accent-soft), and var(--shadow-card-hover). ✓
Terminal body rendering in Geist — font-family: var(--font-mono) added to &__body. ✓

The previously-noted P3s are also resolved: terminal background now uses var(--color-terminal) and white-space: nowrap was never present in the final code.

Two minor P3s remain (see inline comments):

hero-block__badge inherits Geist from body; the PR's stated design intent (and the BaseSection overline in the same PR) puts eyebrow-style elements in mono.
hero-block__glow gradient uses a raw rgba(0, 229, 255, 0.05) not present in the token set.

Neither blocks merge. No P1/P2 findings — good to merge.

claude · 2026-05-29T06:57:56Z

+    margin-bottom: 1.75rem;
+    padding: 0.4rem 0.9rem;
+
+    font-size: 0.75rem;


P3 — badge renders in Geist; design intent says eyebrows should use mono

The PR description states "JetBrains Mono retained for chrome (nav, eyebrows, code, terminal)" and the BaseSection overline already has font-family: var(--font-mono) added in this PR. The hero-block__badge is the same eyebrow-style element; without an override it inherits Geist from body.

Suggested change

font-size: 0.75rem;

font-size: 0.75rem;

font-family: var(--font-mono);

letter-spacing: 1px;

claude · 2026-05-29T06:57:59Z

+    max-width: 900px;
+    max-height: 900px;
+    // Quiet ambient wash — restrained per the design system's hairline language.
+    background: radial-gradient(circle, rgba(0, 229, 255, 0.05) 0%, transparent 65%);


P3 — glow uses a raw rgba value that diverges from the token set

rgba(0, 229, 255, 0.05) is half the opacity of --color-accent-soft (rgba(0, 229, 255, 0.1)). If the dimmer value is intentional, introduce a named token (e.g. --color-accent-dim) in base.scss; otherwise reuse the existing one.

Suggested change

background: radial-gradient(circle, rgba(0, 229, 255, 0.05) 0%, transparent 65%);

background: radial-gradient(circle, var(--color-accent-soft) 0%, transparent 65%);

mashkovd · 2026-05-29T07:01:03Z

@claude review

mashkovd added 2 commits May 29, 2026 08:02

claude Bot reviewed May 29, 2026

View reviewed changes

mashkovd merged commit 2734243 into main May 29, 2026
2 checks passed

mashkovd deleted the feat/visual-polish branch May 29, 2026 07:36

mashkovd mentioned this pull request May 29, 2026

[daily-report] 2026-05-29 pipeline summary mctlhq/mctl-gitops#331

Closed

Navigation Menu

Repository navigation

feat: align mctl-web with the MCTL design system - #17

feat: align mctl-web with the MCTL design system#17
mashkovd merged 3 commits into
mainfrom
feat/visual-polish

mashkovd commented May 29, 2026

Uh oh!

mashkovd commented May 29, 2026

Uh oh!

claude Bot commented May 29, 2026 •

edited

Loading

Uh oh!

claude Bot May 29, 2026

Uh oh!

claude Bot May 29, 2026

Uh oh!

claude Bot May 29, 2026

Uh oh!

claude Bot May 29, 2026

Uh oh!

claude Bot May 29, 2026

Uh oh!

claude Bot commented May 29, 2026 •

edited

Loading

Uh oh!

claude Bot May 29, 2026

Uh oh!

claude Bot May 29, 2026

Uh oh!

mashkovd commented May 29, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	border: 1px solid rgba(0, 245, 255, 0.2);
	border: 1px solid var(--color-glass-border);

	box-shadow: 0 0 30px rgba(0, 245, 255, 0.2);
	box-shadow: 0 0 30px var(--color-accent-soft);

	background: radial-gradient(circle, rgba(0, 229, 255, 0.05) 0%, transparent 65%);
	background: radial-gradient(circle, var(--color-accent-soft) 0%, transparent 65%);

Conversation

mashkovd commented May 29, 2026

Summary

Changes

Earlier commit (also in this PR)

Verification

Uh oh!

mashkovd commented May 29, 2026

Uh oh!

claude Bot commented May 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review

Summary

P2 — stale hardcoded colours in BaseCard.vue

P2 — terminal body will render in Geist, not monospace

P3 — terminal background not tokenised

P3 — white-space: nowrap may clip product copy on narrow viewports

Uh oh!

claude Bot May 29, 2026

Choose a reason for hiding this comment

Uh oh!

claude Bot May 29, 2026

Choose a reason for hiding this comment

Uh oh!

claude Bot May 29, 2026

Choose a reason for hiding this comment

Uh oh!

claude Bot May 29, 2026

Choose a reason for hiding this comment

Uh oh!

claude Bot May 29, 2026

Choose a reason for hiding this comment

Uh oh!

claude Bot commented May 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Re-review (post-synchronize)

Summary

Uh oh!

claude Bot May 29, 2026

Choose a reason for hiding this comment

Uh oh!

claude Bot May 29, 2026

Choose a reason for hiding this comment

Uh oh!

mashkovd commented May 29, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

claude Bot commented May 29, 2026 •

edited

Loading

P2 — stale hardcoded colours in `BaseCard.vue`

P3 — `white-space: nowrap` may clip product copy on narrow viewports

claude Bot commented May 29, 2026 •

edited

Loading