macinfo.us Style Guide
A comprehensive guide to our unified design system and component library
Color System
Our color palette is based on macOS design principles with semantic color mappings.
Primary
Secondary
Success
Danger
Typography
Heading 1 - Hero Text
Heading 2 - Section Title
Heading 3 - Subsection
Body text uses 18px for optimal readability on all devices.
Base text at 16px for UI elements and compact content.
Small text at 14px for metadata and helper text.
Extra small text at 12px for labels and badges.
Cards
Default Card
A standard card with hover effects
Card content goes here. Cards lift on hover for better interaction feedback.
Featured Card
Highlighted with primary color
Use for important or promoted content.
Subtle Card
Lower contrast for secondary content
Perfect for supporting information.
Guide Card
Interactive card for navigation
Extra lift on hover for clickable cards.
Badges
Callouts
Information
Pro Tip
Warning
Important
Success
Setting Blocks
Enable FileVault Encryption
FileVault encrypts your entire disk, protecting your data if your Mac is lost or stolen.
Configure Firewall Settings
The built-in firewall provides additional network protection.
Kernel Extension Management
Advanced users can manage kernel extensions for specialized software.
Checklists
Design System Implementation Checklist
Feature Grids
Security First
All components follow security best practices
Privacy Focused
Designed with user privacy in mind
Accessibility
WCAG compliant and keyboard navigable
Global Ready
Supports internationalization
Performance
Optimized for fast loading
Modern Stack
Built with Next.js and React
Action Blocks
Ready to Get Started?
Implement these components in your pages to create a consistent, professional user experience.
View Documentation