feat: establish 8-bit design system foundation, pixel grids, and shared pixel helpers#6
Open
cto-new[bot] wants to merge 4 commits into
Open
feat: establish 8-bit design system foundation, pixel grids, and shared pixel helpers#6cto-new[bot] wants to merge 4 commits into
cto-new[bot] wants to merge 4 commits into
Conversation
…mified UX Refactored all landing, layout, NavBar, and Footer components to adopt a pixel-themed, 8-bit UI in line with a gaming/quest adventure feel. This change modernizes visual identity and amplifies engagement on the landing page. - Introduced new `PixelPanel`, `PixelButton`, `PixelTag`, and `PixelProgress` primitives for consistent 8-bit style - Overhauled NavBar, Footer, and wrappers to use pixel components and grid backgrounds, ensuring routing/session logic is preserved - Redesigned hero section featuring animated pixel-art landscape with React Three Fiber and gamified CTAs - Refactored features/steps into quest-style cards and tracker, using gamified copy and visuals - Enhanced layout spacing, backgrounds, and breakpoints for responsiveness with the new retro aesthetic No breaking changes or migrations required. User-visible overhaul of landing experience.
Rebuild Landing Page with Pixel-Themed, Gamified UI/UX
This update introduces a pixel-inspired 8-bit design system to serve as the baseline for the app UI. The change is needed to unify the application’s look and feel and align Tailwind utilities to a strict 8px/pixel grid with themed tokens for consistency across components. - Replaces global CSS theme tokens in globals.css with an 8-bit color palette, 8px spacing scale, pixel radii, and steps shadows—all exposed via `@theme` for Tailwind. - Loads Press Start 2P pixel font as display, maintaining accessible body/mono stacks and wiring everything to CSS variables for token access. - Refactors all core UI primitives (button, card, input, badge, dropdown-menu, etc.), aligning their radii, focus rings, and border handling to pixel standards using the new tokens. - Adds shared `.pixelated`/`.pixel-outline` utility classes, a new PixelSprite component, and seeds public pixel art sprite assets for UI/brand use. - Documents design system token usage, utilities, and rationale in README. Systematically impacts all UI components for a crisp, on-grid, visually-cohesive 8-bit aesthetic.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
💡 Enable Vercel Agent with $100 free credit for automated AI reviews |
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.
Summary
This PR establishes the 8-bit design system foundation, applying a pixel-art style grid, palette, typography, UI primitives, and utilities across the codebase for crisp, on-grid, and visually distinct interfaces.
Details
globals.csswith an 8-bit palette, 8px spacing steps, stepped radii, and pixel shadows—exposed via@themefor Tailwind utilities.layout.tsxwith CSS custom properties for display, body, and mono fonts.pixel-spritecomponent,.pixelatedand.pixel-outlineutilities, and sample sprites inpublic/pixel/.