Our vision is to redefine the bridge between design and development by creating a streamlined, niche design system that eliminates inefficiencies, reduces friction, and accelerates the journey from concept to code.
The purpose of this design system is to:
- Standardize Design Patterns: Ensure consistency across all UI components.
- Accelerate Development: Reduce repetitive tasks with pre-built, reusable components.
- Enhance Collaboration: Enable seamless communication between designers and developers.
- Minimize Ambiguity: Provide clear documentation and usage guidelines.
- Focus on Niche Design Needs: Address specific design challenges unique to our targeted audience.
- Efficiency: Reduce the design-to-development cycle time by providing ready-to-use assets and components.
- Scalability: Create a modular system adaptable to small and large projects.
- Accessibility: Ensure all components follow accessibility best practices (e.g., WCAG).
- Consistency: Maintain a unified design language across platforms and devices.
- Innovation: Continuously evolve based on user feedback and industry trends.
- Minimalism: Simple yet functional design components.
- Accessibility: Inclusive and user-friendly designs.
- Responsiveness: Adapt seamlessly across devices.
- Customizability: Flexible components tailored to unique requirements.
- Transparency: Clear documentation and open-source contributions.
- For Designers: A consistent design library that reduces guesswork and promotes creativity.
- For Developers: Clean, reusable components with clear documentation and examples.
- For Businesses: Faster time-to-market and reduced development costs.
- Border Radius: Fixed border-radius of
8pxor8%of the rectangle size. - Border Color: All borders use
#E9E9E9. - Container Background: White for clean and minimalistic aesthetics.
- Text Styling: Bold text/titles for clarity and emphasis.
- Layout Background:
#FDFCFFfor a soft, consistent aesthetic. - Unified Language: All components adhere to a consistent visual style.
- Adaptability: The system supports scalable, future-proof design.
- WCAG Compliance: Components meet accessibility standards.
Primary Colors:
- Light Mode:
#FFFFFF(Pure White) - Dark Mode:
#000000(Pure Black)
Neutral Shades:
- Light Mode:
- Neutral 1:
#FDFCFF - Neutral 2:
#E9E9E9 - Text:
#333333
- Neutral 1:
- Dark Mode:
- Neutral 1:
#181818 - Neutral 2:
#3A3A3A - Text:
#FFFFFF
- Neutral 1:
- Font Family: Noto Sans (Fallback: sans-serif)
- Mobile Font Sizes:
- H1: 28px
- H2: 22px
- H3: 18px
- H4: 16px
- H5: 14px
- H6: 12px
- Small: 11px
- Mobile Line Heights: Proportionally reduced for readability.
- Features: CSS variables, responsive breakpoints at
768px, semantic and utility class support.
1. Grid System:
- Base Unit:
8px(for margins, padding, and spacing).
2. Responsive Breakpoints:
- Mobile Portrait:
max-width: 480px - Mobile Landscape / Tablet:
481px - 768px - Tablet / Small Laptop:
769px - 1024px - Desktop:
1025px - 1440px - Wide Screen:
1441px+
3. Layout Grid:
- Mobile: 1 Column
- Tablet: 2 Columns
- Desktop: 12 Columns
4. Gutters:
- Mobile & Tablet:
16px - Desktop:
24px
5. Margins & Padding:
- Container Padding: Mobile:
16px, Tablet/Desktop:24px - Outer Margins: Mobile:
8px, Tablet/Desktop:16px
6. Typography Spacing:
- Line Height:
1.4xthe font size. - Text Spacing: Base unit (
8px) for consistent spacing.
- Install the Design System via npm/yarn:
npm install minilo-design-system- Import core CSS into your project:
@import "minilo-design-system/dist/styles.css";- Use Components:
import { Button } from "minilo-design-system";
<Button variant="primary">Click Me</Button>;- Customize Theme (if needed):
:root {
--primary-color: #003078;
}We welcome contributions! Please check our Contribution Guidelines to get started.
This project is licensed under the Apache 2.0 License. See the LICENSE file for more details.
- Website: minilo.io
- Documentation: docs.minilo.io
- Community: Discord
Let's build better designs together with Minilo Design System! 🚀✨
Copyright 2025 © Minilo Design. All Rights Reserved.