Learn the Tools
Discover how to get the most out of Zanari's toolkit. Practical guides and pro tips for efficient interface design.
Mastering Color Accessibility
Color Contrast Checker
Ensure your text is readable for everyone by checking contrast ratios against WCAG standards.
How to use
Input your foreground and background hex codes. The tool instantly calculates the contrast ratio.
Pro Tips
- Aim for 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold).
- Use the 'Swap' button to quickly test inverted color schemes.
- Don't rely on color alone; use icons or text labels for critical states.
Responsive Typography Systems
Type Scale
Create harmonious font size hierarchies based on musical ratios.
How to use
Select a base size (e.g., 16px) and a ratio (e.g., Major Third 1.250). The tool generates a sequence of sizes.
Pro Tips
- Use 'Major Third' for versatile web apps and 'Perfect Fourth' for editorial content.
- Round your values to whole pixels to avoid sub-pixel rendering issues.
- Stick to one scale for consistency across your entire project.
Fluid Layouts with Ratios
Ratio Calculator
Calculate aspect ratios for images, videos, and containers.
How to use
Enter one dimension (width or height) and the desired ratio (e.g., 16:9).
Pro Tips
- Common video ratio is 16:9. For photography, 3:2 or 4:3 is standard.
- Use the 'Reverse' calculation to fit content into a fixed container.
- CSS `aspect-ratio` property is your friend; use these values directly in your code.
Perfect Grids Every Time
Grid Generator
Visualize and generate CSS grid layouts.
How to use
Set the number of columns, gutters, and margins. Preview the layout overlay.
Pro Tips
- Start with a 12-column grid for maximum flexibility on desktop.
- Use 'Gap' to ensure consistent whitespace between elements.
- Export the CSS variables to your global stylesheet for easy maintenance.
Relative Units Conversion
Unit Converter
Convert pixels to rems/ems for accessible sizing.
How to use
Input your pixel value and base font size (default is usually 16px).
Pro Tips
- Always use `rem` for font sizes and spacing to respect user browser settings.
- Use `em` for padding/margin if you want it to scale with the element's font size.
- Keep your base size at 16px (100%) unless you have a specific reason to change it.
Generating Organic Shapes
SVG Wave
Create smooth, non-linear section dividers.
How to use
Adjust the complexity and contrast sliders to morph the wave shape.
Pro Tips
- Use waves to break up rigid, boxy layouts.
- Layer multiple waves with different opacities for a depth effect.
- Copy the SVG code directly into your React component to avoid extra network requests.
Testing Fonts in Context
Google Font Explorer
Preview Google Fonts without installing them.
How to use
Type your sample text and select a font family from the list.
Pro Tips
- Compare body text fonts at small sizes (14-16px) to check legibility.
- Don't use more than 2-3 different font families in a single project.
- Check the 'Variable' option for granular control over weight and width.
Placeholder Content
Lorem Ipsum
Generate placeholder text for layouts.
How to use
Select the number of paragraphs or sentences you need.
Pro Tips
- Use 'Sentences' for UI components like cards and 'Paragraphs' for articles.
- Don't let lorem ipsum dictate your design; real content often breaks rigid layouts.
- Switch to 'Data' mode (if available) for realistic names/dates.
Subtle Textures
Background Pattern
Add depth to flat backgrounds with CSS patterns.
How to use
Choose a pattern style (dots, lines, checks) and adjust density.
Pro Tips
- Keep opacity low (5-10%) so it doesn't interfere with text readability.
- Use patterns to denote specific zones, like a 'draft' area or a 'sandbox'.
- CSS radial-gradients are performant and scalable.