feat(design): align UI with the MSK ecosystem (fonts, accent, polish)#152
Merged
Conversation
msk-forms had drifted visually from the sister projects (msk-shop, msk-paste, msk-shortener). This is a polish pass on the existing Tailwind v3 stack — no v4 migration — so the per-guild branding override (HSL token format) stays untouched. - Accent: default --primary/--ring move from emerald to the MSK ecosystem green (light 101 62% 40% ~ #4ea426, dark 99 57% 44% ~ #5eb131). Hardcoded greens aligned too (branding default, live dot). - Fonts: Outfit/Noto Sans/Space Mono -> Inter + JetBrains Mono. The "heading" family now points at Inter, so no font-heading edits. - Polish utilities in globals.css: .eyebrow, .hero-decor-gradient, .pulse-dot, custom scrollbar, reduced-motion. boxShadow card/ card-hover + fade-in/slide-up keyframes in tailwind config. - Primitives: Card -> shadow-card + transition; Input focus border. - Landing/Pricing: eyebrow kickers (new DE/EN/HU dict keys), hero gradient, animated badge dot, hover-lift on feature/pricing cards. - Dashboard: guild card hover unified on shadow-card-hover. Branding override is unchanged; only default token values change.
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
1 participant
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.
Why
msk-forms had drifted visually from the sister projects (msk-shop, msk-paste, msk-shortener) — different fonts, accent green, and missing polish patterns. This closes that gap.
Option A (deliberate): polish on the existing Tailwind v3 stack — no v4 migration. The per-guild branding override depends on the HSL token format, so a stack swap is risky and buys nothing visually. The whole gap closes via tokens, fonts and visual patterns.
Changes
--primary/--ringmove from emerald (161 94% 30%) to the MSK ecosystem green — light101 62% 40%(≈#4ea426), dark99 57% 44%(≈#5eb131). Hardcoded greens aligned too (branding-formdefault,livestatus dot).headingfamily now points at Inter → nofont-headingedits needed.globals.css, ecosystem patterns on forms HSL tokens):.eyebrow,.hero-decor-gradient,.pulse-dot, custom scrollbar, reduced-motion.boxShadow.card/card-hover+fade-in/slide-upkeyframes in the Tailwind config.Card→shadow-card+ transition;Inputfocus border tint.eyebrowdict keys in DE/EN/HU), hero gradient, animated badge dot, hover-lift on feature/pricing cards.shadow-card-hover.Branding safety
The branding mechanism is unchanged —
brandStylestill overrides--primary/--ringper guild. Only the default token values changed, so a guild with its own accent color keeps overriding it.Verification
pnpm lint✓ ·pnpm typecheck✓ ·pnpm test(40) ✓ ·pnpm build✓Please review visually before merging (the accent is brand-facing): landing,
/pricing, a public form + status page in both light & dark — and confirm a guild form with a custom accent color still overrides the new default green.