🎨 Design System
A comprehensive guide to the visual language, components, and patterns that define the Psilobase experience.
System Overview
Design Principles
Core principles that guide all design decisions in the Psilobase.
Clarity First
Information should be clear, accessible, and easy to understand.
Nature-Inspired
Design reflects natural, earthy aesthetics with organic elements.
Accessible
WCAG AA compliant with focus on inclusive design for all users.
Safety First
Harm reduction messaging with clear warnings and guidance.
Responsive
Mobile-first design ensuring optimal experience on all devices.
Performance
Optimized assets and code for fast loading and smooth interactions.
Getting Started
For Developers
The design system is built with vanilla CSS and JavaScript, making it easy to integrate and customize.
- Include
main.cssin your HTML - Use component classes and CSS variables
- Reference component documentation for usage examples
- Test in both light and dark modes
For Designers
Design system documentation provides all necessary specifications for creating new designs.
- Review color palette for brand colors
- Check typography for text styles
- Use icon library for consistent iconography
- Reference components for UI patterns
CSS Variables
The system uses CSS custom properties for easy theming and customization.
/* Access design tokens */
:root {
/* Colors */
--primary-color: #4a7c59;
--secondary-color: #8b4513;
--accent-color: #d4af37;
/* Typography */
--font-size-base: 1rem;
--font-weight-normal: 400;
--line-height-normal: 1.5;
/* Spacing */
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
/* Borders */
--border-radius: 8px;
--border-color: #dee2e6;
}
/* Use in components */
.my-component {
color: var(--primary-color);
font-size: var(--font-size-base);
padding: var(--spacing-md);
border-radius: var(--border-radius);
}
Resources & Tools
Documentation
Tools Used
- CSS Custom Properties
- Vanilla JavaScript
- SVG Icons
- Responsive Grid
Standards
- WCAG AA Accessibility
- Semantic HTML
- BEM Methodology
- Progressive Enhancement
Contribute to the Design System
Help improve the Psilobase design system by contributing new components, icons, or improvements to existing patterns.
View Contributing Guide