A comprehensive design system website for Buzzvil, featuring a modern dark theme, interactive animations, bilingual support (English/Korean), and a structured information architecture.
- Structured Information Architecture: Organized into Foundations, Brand, and Product sections
- Interactive Navigation: Elegant section navigation with auto-scroll and active states
- Dark Theme: Minimal, Linear-inspired design with blue accent colors
- Interactive Minimap: Full-screen animated minimap with scroll-based progress
- Bilingual Support: Seamless language switching between English and Korean
- Smooth Animations: Choreographed page transitions and blur reveal effects
- Responsive Design: Optimized for all device sizes
- Modern Stack: Built with Next.js 15, TypeScript, Tailwind CSS, and Framer Motion
Visit the live site: design.buzzvil.com
- Framework: Next.js 15 with App Router
- Language: TypeScript
- Styling: Tailwind CSS
- Animations: Framer Motion
- Icons: Lucide React
- Fonts: Nunito (English), Pretendard (Korean)
- Deployment: GitHub Pages
- Node.js 18+
- npm or yarn
- Clone the repository:
git clone https://github.com/Buzzvil/design.git
cd design- Install dependencies:
npm install- Run the development server:
npm run dev- Open http://localhost:3000 in your browser.
- The Mission: Mission & Vision statements
- Our Mindset: Philosophy and design approach
- How we work: Core values and working principles
- The team: Meet the design team
- Tools: Design and development tools
- Principles: Brand principles and guidelines
- Guidelines: Comprehensive brand guidelines
- Resources: Brand assets and templates
- Principles: Product design principles (Reward = Time, Delight Without Deception, Scalable by Design)
- Guidelines: Product design guidelines
- Resources: Product design resources
- Primary: Black (#000000)
- Accent: Blue (#3B82F6)
- Background: Dark (#0A0A0A)
- Text: White (#FFFFFF)
- Muted: Gray (#6B7280)
- English: Nunito (Google Fonts)
- Korean: Pretendard (Local font)
- Interactive Minimap
- Section Navigation (auto-scroll, active states)
- Language Switcher
- Blur Reveal Animations
- Parallax Sections
- Values Slider (3D transitions)
- Product Principles (interactive elements)
The site supports two languages:
- English (en)
- Korean (ko)
Language switching is handled through React Context with smooth page-wide transitions.
The site is automatically deployed to GitHub Pages on every push to the main branch using GitHub Actions.
npm run build
npm run deploysrc/
├── app/ # Next.js App Router
│ ├── design/ # Design system pages
│ │ ├── brand/ # Brand page (/design/brand)
│ │ └── product/ # Product page (/design/product)
│ ├── globals.css # Global styles and CSS variables
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Homepage (Foundations)
│ └── not-found.tsx # 404 error page
├── components/ # React components
│ ├── Header.tsx # Navigation header
│ ├── Hero.tsx # Hero section
│ ├── SectionNavigation.tsx # Section navigation
│ ├── Values.tsx # Values slider
│ ├── ProductPrinciples.tsx # Product principles
│ ├── SectionPlaceholder.tsx # Placeholder components
│ ├── InteractiveMinimap.tsx # Animated minimap
│ ├── LanguageSwitcher.tsx # Language toggle
│ └── ...
├── contexts/ # React contexts
│ └── LanguageContext.tsx # Language management & translations
└── utils/ # Utility functions
├── avatar.ts # Avatar generation
└── teamParser.ts # Team data parsing
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Max - Design Lead
- Jia - Product Designer
- Elle - Product Designer
- Joy - Product Designer
- Rina - Product Designer
- Live Site
- Foundations - Mission, Philosophy, Values, Team, Tools
- Brand - Brand principles, guidelines, and resources
- Product - Product design principles and guidelines
- Buzzvil
- Elegant Section Navigation: Fixed sub-navigation with auto-scroll and active states
- Smooth Transitions: Seamless page transitions and scroll animations
- Responsive Design: Optimized for desktop, tablet, and mobile
- Interactive Principles: 3D animated product principles with interactive elements
- Values Slider: Auto-advancing values showcase with smooth transitions
- Team Showcase: Dynamic team member profiles with avatars
- Bilingual Support: Complete English and Korean translations
- Modern Architecture: Next.js 15 with App Router
- Type Safety: Full TypeScript implementation
- Performance: Optimized with Tailwind CSS and Framer Motion
- Accessibility: WCAG compliant navigation and interactions
Built with ❤️ by the Buzzvil Design Team