Theming and Design Tokens
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
Theming and Design Tokens in this project define the visual identity and aesthetic consistency of the portfolio. The system relies on a combination of Tailwind CSS utility classes, global CSS variables, and specialized animation libraries to create a high-fidelity "Supreme" developer experience. The core theme is built upon a dark aesthetic with vibrant gradient accents and smooth motion behaviors.
The styling architecture integrates static global styles with dynamic interactive components, utilizing libraries such as framer-motion for transitions and lenis for smooth scrolling. This ensures that design tokens like color gradients, typography, and spacing are applied consistently across both standard HTML elements and complex 3D scenes.
Sources: src/styles/globals.css, package.json:14-22, src/components/3D-Hero/Hero3D.jsx:26-30
Global Styles and Core Tokens
The foundational design tokens are defined in the global stylesheet. The project adopts a dark-mode-first approach with a primary background color of #0a0a0a and a base text color of white. Typography is standardized using the 'Inter' sans-serif stack to ensure readability and a modern technical feel.
Typography and Layout Reset
The project uses a standard CSS reset and sets the base font family and global scroll behavior.
| Token Type | Value | File Reference |
|---|---|---|
| Background Color | #0a0a0a | src/styles/globals.css:18 |
| Text Color | white | src/styles/globals.css:19 |
| Font Family | 'Inter', -apple-system, sans-serif | src/styles/globals.css:17 |
| Scroll Behavior | smooth | src/styles/globals.css:13 |
Sources: src/styles/globals.css:1-20
Visual Effects and Gradients
The design utilizes complex visual tokens including text gradients and backdrop blurs to emphasize the "Supreme" aesthetic. These are primarily implemented via Tailwind CSS utility classes within component files.
Design Tokens for Hero Components
The Hero section utilizes specific color tokens for high-impact visual elements:
- Text Gradient: A mix of
white,purple-200, andpink-200. - Shadows: Use of
drop-shadow-2xlandshadow-3xlfor depth. - Transparencies: Extensive use of
white/50andwhite/80for secondary text and borders.
// Example of gradient and shadow token application
<h1 className="text-5xl md:text-7xl lg:text-9xl font-black bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent mb-6 drop-shadow-2xl">
Moe Kyaw Aung
</h1>
Sources: src/components/3D-Hero/Hero3D.jsx:26-33
Interaction and Motion Design
Motion is a core part of the design system, treated as a design token through standardized easing and durations.
Smooth Scroll Implementation
The project integrates lenis for smooth momentum scrolling, which is configured centrally in the application root.
The diagram above shows the initialization flow of the smooth scroll system within the main application wrapper.
Sources: src/App.jsx:7-19
Component Motion Tokens
Interactive elements like buttons utilize framer-motion and react-magnetic to provide tactile feedback.
- Magnetic Strength: Standardized at
0.3for interactive buttons. - Transition Duration: Hero elements use a
1second duration witheaseOuteasing for entry animations. - Floating Animation: Scroll indicators use a
2second infinite repeat loop.
Sources: MagneticButtom.jsx:4, src/components/3D-Hero/Hero3D.jsx:24-30, src/components/3D-Hero/Hero3D.jsx:53-56
3D and Particle Integration
The theme extends beyond 2D elements into 3D space and particle effects, maintaining the dark-space aesthetic.
Scene Integration Flow
The styling system ensures that 3D Spline scenes and particle overlays occupy the full viewport while remaining behind interactive content via z-index management.
This diagram represents the visual stacking order of themed elements in the Hero section.
Sources: src/components/3D-Hero/Hero3D.jsx:9-52
Summary of Design Dependencies
The theming system is powered by several key dependencies that provide the underlying logic for the design tokens.
| Dependency | Purpose |
|---|---|
framer-motion | Orchestrates UI transitions and keyframe animations. |
lenis | Provides the smooth scrolling experience across the portfolio. |
@splinetool/react-spline | Renders the 3D scene that serves as the background theme. |
react-magnetic | Handles the physics-based button interactions. |
Sources: package.json:14-22
Theming and Design Tokens in this portfolio are not merely static colors but a comprehensive suite of visual and behavioral standards. By combining dark-themed global CSS with advanced React animation libraries, the project achieves a cohesive, high-performance user interface centered on the "Supreme" developer identity.