Help Documentation
Toolbox 2000 for macOS
About This App
Toolbox 2000 is a professional design utility that combines five essential tools into one streamlined application.
The Five Tools
Colours
Sample and analyse colours with WCAG/APCA accessibility checking, colour harmony generation, and comprehensive colour format support.
Mixer
Blend colours with professional blend modes, create custom colour chips, and save swatches for later use.
Canvas
Quick access to common canvas sizes for web, print, and social media with live grid overlay generation.
Scaler
Calculate dimensions using aspect ratios, percentages, target sizes, and A-series paper scaling.
Fonts
Explore typefaces, generate type scales, and browse character maps with Unicode reference.
Quick Start
Switch between tools using the toolbar buttons or ⌘1-5 keyboard shortcuts
Click any value to copy it to your clipboard
Use the pin button to keep the app always on top
Collapsible sections remember their state between sessions
Press ⌘? to access this help documentation anytime
Key Features
One-click copying of all values to clipboard
Professional colour space conversions (sRGB, LAB, LCH, OKLCH)
WCAG 2.1 and APCA (3.0) accessibility analysis
Live preview with animated transitions
Modular type scale generation based on musical ratios
Export capabilities for palettes (CSS/JSON) and grids (PNG)
Always On Top window pinning for floating above other apps
Keyboard shortcuts for power users
Session memory preserves your workflow
Colours Tool
Overview
Sample, analyse, and harmonise colours with professional precision. The Colours tool provides comprehensive colour information across multiple colour spaces and includes accessibility analysis.
Current Colour Properties
When you select a colour, view detailed information including:
Colour Values (sRGB):
HEX: 6-digit hexadecimal (#RRGGBB)
RGB: Red, Green, Blue (0-255)
HSL: Hue (0-360°), Saturation (0-100%), Lightness (0-100%)
HSV: Hue (0-360°), Saturation (0-100%), Value/Brightness (0-100%)
Advanced Colour Spaces:
LAB: Lightness (0-100), a* (green-red), b* (blue-yellow)
LCH: Lightness (0-100), Chroma (0-150), Hue (0-360°)
OKLCH: Perceptually uniform L (0-1), C (0-0.4), H (0-360°)
CMYK: Cyan, Magenta, Yellow, Key/Black (0-100%) - for print
XYZ: CIE 1931 colour space values
Colour Properties:
Brightness: Perceived lightness (0-100%)
Saturation: Colour intensity (0-100%)
Warmth: Temperature indicator (Neutral/Cool/Warm)
Accessibility Analysis
Check colour contrast compliance against WCAG and APCA standards:
WCAG 2.1 Standards:
Level AA: Minimum contrast for normal text (4.5:1) and large text (3:1)
Level AAA: Enhanced contrast for normal text (7:1) and large text (4.5:1)
APCA (3.0):
Future standard using perceptual contrast
Scores shown as Lc values
Better reflects real-world readability than WCAG ratios
Test Against:
White background
Black background
Custom background (enter any HEX colour)
Results show:
Pass/Fail status for each standard
Actual contrast ratios or Lc scores
Preferred text size recommendations
Colour Harmony
Generate professional colour palettes based on colour theory:
Harmony Types:
Complementary - Opposite on the colour wheel
Creates high contrast, energetic combinationsTriadic - Three colours evenly spaced (120° apart)
Vibrant, balanced, yet bold palettesAnalogous - Adjacent colours (30° apart)
Harmonious, serene combinationsSplit-Complementary - Base + two adjacent to complement
Softer than complementary while maintaining contrastTetradic - Four colours in two complementary pairs
Rich, diverse palettes with lots of variationMonochromatic - Single hue with varied lightness
Cohesive, elegant, sophisticated schemes
Saved Colour Swatches
Build and manage your colour library:
Save colours for quick access later
View history of recently used colours
Export palettes as CSS custom properties or JSON
Share swatches between projects
Delete individual swatches or clear all
Export Formats:
CSS Custom Properties:
:root {
--color-primary: #0A7AFF;
--color-secondary: #5856D6;
}
JSON:{
"colors": [
{"name": "primary", "hex": "#0A7AFF"},
{"name": "secondary", "hex": "#5856D6"}
]
}
Pro Tips
Use OKLCH for perceptually uniform colour adjustments
APCA is more accurate than WCAG for real-world accessibility
Analogous harmonies work great for subtle brand palettes
Save frequently-used brand colours for instant access
Export palettes to share with developers or clients
Mixer Tool
Overview
Blend two colours using professional blend modes. The Mixer tool provides precise colour mixing with variable opacity control.
How to Use
Select Base Colour - Your starting colour
Select Mix Colour - The colour to blend with
Choose Blend Mode - 13 professional modes available
Adjust Opacity - Fine-tune the mix intensity (0-100%)
View Result - See the blended colour instantly
Copy or Save - Click the result to copy or save as a swatch
Blend Modes Explained
Normal
Simple alpha blending. Mix colour overlays base with opacity.
Use for: Basic colour mixing, transparent overlays
Multiply
Multiplies base and mix colours, consistently producing darker results.
Use for: Shadows, darkening effects, rich colour mixing
Screen
Inverts both colours, multiplies, then inverts again. Always lighter.
Use for: Highlights, glow effects, lightening
Overlay
Combines Multiply and Screen. Preserves highlights and shadows.
Use for: Adding contrast while maintaining tonal depth
Soft Light
Subtle version of Overlay. Soft glow or burn effect.
Use for: Gentle toning, subtle colour shifts
Hard Light
Strong version of Overlay. Harsh lighting effects.
Use for: Dramatic contrast, strong colour impact
Colour Dodge
Brightens the base colour based on the mixed colour. Creates vibrant results.
Use for: Intense highlights, radiant glows
Colour Burn
Darkens base colour based on mix colour. Increases contrast.
Use for: Deep shadows, rich darks
Darken
Selects the darker of the two colour components.
Use for: Maintaining dark areas, shadow preservation
Lighten
Selects the lighter of the two colour components.
Use for: Maintaining highlights, bright area preservation
Difference
Subtracts colours from each other. Creates inverted effects.
Use for: Abstract colour effects, high contrast
Exclusion
Similar to Difference but with lower contrast.
Use for: Softer colour inversions, artistic effects
Add
Adds colour values together. Can exceed maximum brightness.
Use for: Extreme brightening, light accumulation effects
Opacity Control
0% - Pure base colour (no mix colour)
50% - Equal blend of both colours
100% - Maximum mix colour influence
Fine control - Drag slider or enter precise values
Saved Colour Chips
Save custom mixes for later use
Quick access to frequently used blends
Copy any chip to the clipboard
Delete individual chips or clear all
Export with palettes via the Colours tool
Common Workflows
Creating Subtle Tints:
Base: Brand colour
Mix: White
Mode: Normal
Opacity: 10-30%
Deepening Shadows:
Base: Main colour
Mix: Complementary colour
Mode: Multiply
Opacity: 20-40%
Adding Warmth:
Base: Cool colour
Mix: Warm orange/yellow
Mode: Soft Light
Opacity: 15-25%
Pro Tips
Multiply and Screen are essential for realistic lighting
Overlay mode is great for quick contrast boosts
Use low opacity (10-20%) for subtle colour shifts
Difference mode creates unexpected, creative results
Save your favourite mixes as chips for consistency
Canvas Tool
Overview
Quick access to common canvas dimensions and grid generation for layout systems. Perfect for establishing design frameworks.
Canvas Presets
Pre-configured dimensions for common use cases:
Web/Digital:
Desktop (1920×1080, 1440×900, 1366×768)
Tablet (1024×768, 768×1024)
Mobile (375×667, 414×896, 360×640)
Social Media:
Instagram Post (1080×1080)
Instagram Story (1080×1920)
Facebook Cover (820×312)
Twitter Header (1500×500)
LinkedIn Banner (1584×396)
YouTube Thumbnail (1280×720)
Print - A Series:
A0 through A8 (841×1189mm down to 52×74mm)
Landscape and portrait orientations
Standard international sizes
Print - US:
Letter (8.5×11in)
Legal (8.5×14in)
Tabloid (11×17in)
Business Card (3.5×2in)
Custom Canvases
Create and save your own presets:
Enter Width and Height
Choose Unit (px, mm, cm, in, pt, pc)
Select Orientation (Landscape/Portrait)
Click Save Current Size as Preset
Access anytime from Custom section
Saved presets include:
Dimensions
Unit type
Orientation
Custom name (optional)
Grid Generator
Create professional layout grids for consistent spacing:
Grid Types:
Columns
Vertical columns only. Classic editorial/web layout system.
Use for: Magazine layouts, web pages, responsive designModular
Both columns and rows. Complete modular grid system.
Use for: Complex layouts, Swiss design, systematic compositionBaseline
Horizontal baseline grid for typography alignment.
Use for: Text-heavy layouts, vertical rhythm, editorial design
Grid Controls:
Canvas Dimensions:
Auto-fills from selected preset
Or enter custom dimensions
Display shows actual size and ratio
Columns:
0-32 columns (or custom)
Quick presets: 2, 4, 8, 12, 16, 24, 32
Column Gutters:
0px-48px+ spacing between columns
Quick presets available
Rows:
0-32 rows (modular/baseline grids)
Quick presets: 2, 4, 8, 12, 16, 24, 32
Row Gutters:
0px-48px+ spacing between rows
Quick presets available
Margins:
Top, Bottom, Left, Right independently
0px-48px+ for each
Quick presets: 0px, 4px, 8px, 12px, 16px, 24px, 48px
Grid Export
Export your grid as a PNG image:
Configure your grid settings
Click Export Grid as PNG
Choose save location
Receive:
PNG image with transparent grid overlay
Text file with grid specifications
Ready to paste into design apps
Grid overlay is:
High-resolution PNG
Transparent background
Coloured grid lines
Exact dimensions of your canvas
Common Grid Systems
12-Column Grid (Web Design):
Columns: 12
Gutters: 24px
Margins: 24px all sides
8pt Grid (UI Design):
Baseline: 8px
All elements snap to 8px increments
Margins: 16px or 24px
Modular Grid (Editorial):
Columns: 6-8
Rows: 12-16
Gutters: 16-20px
Creates flexible module system
Pro Tips
Use 12-column grids for web (divides evenly by 2, 3, 4, 6)
8pt baseline grids maintain vertical rhythm
Match gutter size to your typography leading
Save project-specific grids as custom presets
Export grids to share with team members
Scaler Tool
Overview
Calculate precise dimensions while maintaining aspect ratios. Essential for responsive design, image scaling, and print work.
Ratio Scaler
Quick access to common aspect ratios:
Standard Ratios:
1:1 - Square (social media posts, icons)
4:3 - Traditional display/photography
16:9 - HD video, modern displays, presentations
16:18:1 - Ultra-wide displays, cinema
3:2 - 35mm photography, DSLR sensors
Custom - Enter any ratio
Orientation:
Landscape - Width greater than height
Portrait - Height greater than width
Auto-switches based on dimensions
Scaling Methods
Four different approaches to calculate dimensions:
1. Aspect Ratio
Calculate dimensions from a target ratio:
Select aspect ratio (or enter custom)
Enter one dimension (width OR height)
See the other dimension calculated automatically
Scale factor shows percentage change
Example:
Ratio: 16:9
Width: 1920px
Result: Height = 1080px
2. Percentage
Scale existing dimensions by a percentage:
Enter Current Width and Height
Adjust Percentage slider (10-400%)
See New Dimensions
View Pixel Changes (+/- from original)
Use for:
Responsive design scaling
Proportional resizing
Maintaining aspect ratio while scaling
Example:
Current: 1000×750px
Scale: 150%
Result: 1500×1125px (+500 width, +375 height)
3. Target Size
Scale to a specific dimension while maintaining aspect ratio:
Enter Current Width and Height
Choose target dimension (Width or Height)
Enter Target value
See both dimensions calculated
Scale Factor shows percentage applied
Use for:
Fitting images to containers
Responsive breakpoints
Print sizing to specific dimensions
Example:
Current: 400×225px
Target: Width = 650px
Result: 650×366px (162.5% scale)
4. Inverse Scale
Calculate reciprocal scaling factors:
See how to return to original size
If you scaled up 200%, shows you need 50% to return
If you scaled down 50%, shows you need 200% to return
Use for:
Reversing previous scaling operations
Understanding scale relationships
Quick calculation of opposing scales
A-Series Scale Calculator
Calculate precise scaling between international paper sizes:
How it works:
Each A-size maintains √2 (1.414) aspect ratio
Each size up = ×1.414 (×√2)
Each size down = ÷1.414 (÷√2)
Paper Sizes:
A0: 841×1189mm (largest)
A1: 594×841mm
A2: 420×594mm
A3: 297×420mm
A4: 210×297mm (standard)
A5: 148×210mm
A6: 105×148mm
A7: 74×105mm
A8: 52×74mm (smallest)
Calculator:
Select FROM size (A0-A8)
Select TO size (A0-A8)
See exact percentage and √2 ratio
Examples:
A4 → A3 = 141.4% (one size up)
A3 → A4 = 70.7% (one size down)
A4 → A2 = 200% (two sizes up = ×√2 twice)
Common Workflows
Responsive Web Design:
Desktop: 1920×1080px
Tablet: Scale to 1024px width (Target Size method)
Mobile: Scale to 375px width (Target Size method)
Social Media Graphics:
Create at 1080×1080px (Instagram post)
Scale to 1080×1920px for Stories (change ratio to 9:16)
Export both sizes
Print to Digital:
A4 artwork (210×297mm)
Convert to pixels at 300dpi
Scale as needed for screen display
Pro Tips
Save calculated dimensions as Canvas presets for reuse
Use Golden Ratio (1.618) for aesthetically pleasing proportions
Percentage method perfect for responsive design scaling
Target Size ideal for fitting images to specific containers
A-series scaling essential for international print work
Fonts Tool
Overview
Explore system fonts, generate modular type scales, and browse character maps with Unicode references. Essential for establishing typographic systems.
Typeface Selection
Recent Fonts:
Quick access to recently used typefaces
Automatically updates as you browse
Click any font to load instantly
Font Family Picker:
Browse all installed system fonts
Alphabetically organised
Search functionality
Preview at current size
Weight Comparison:
See all available weights side-by-side
Weight labels displayed in their actual weight
CSS font-weight values shown (300-900)
Click any weight card to copy CSS declaration
Size Control:
Adjust preview from 8-128pt
Quick presets: 12, 16, 24, 32, 48, 64, 96pt
Slider for fine control
Real-time preview updates
Live Preview
Custom Text:
Enter any text to preview
Default: "The quick brown fox jumps over..."
See how font looks in context
Test different sizes and weights
Type Scale Generator
Create modular type scales based on musical intervals:
Scale Ratios:
Minor Second (1.067) - Subtle, conservative
Major Second (1.125) - Gentle progression
Minor Third (1.200) - Popular for interfaces
Major Third (1.250) - Balanced, versatile
Perfect Fourth (1.333) - Clear distinction
Augmented Fourth (1.414) - Bold (√2 ratio)
Perfect Fifth (1.500) - Strong hierarchy
Golden Ratio (1.618) - Aesthetically ideal (φ)
Base Size:
Set your body text size (typically 14-18pt)
Scale generates sizes above and below
Quick presets: 12, 14, 16, 18, 20, 24pt
Type Scale Hierarchy:
Six levels generated automatically:
Caption - Smallest (base ÷ ratio²)
Body - Base size (your starting point)
H6 - base × ratio
H5 - base × ratio²
H4 - base × ratio³
H3 - base × ratio⁴
H2 - base × ratio⁵
H1 - Largest (base × ratio⁶)
Display - Hero size (base × ratio⁷)
Example (Minor Third, base 16px):
Caption: 11px
Body: 16px
H6: 19px
H5: 23px
H4: 28px
H3: 33px
H2: 40px
H1: 48px
Display: 58px
Copy CSS Variables: Export complete type scale as CSS custom properties:
:root {
--font-size-caption: 11px;
--font-size-body: 16px;
--font-size-h6: 19px;
--font-size-h5: 23px;
--font-size-h4: 28px;
--font-size-h3: 33px;
--font-size-h2: 40px;
--font-size-h1: 48px;
--font-size-display: 58px;
}
Character Map
Browse and copy special characters with Unicode values:
Character Categories:
Basic Latin - A-Z, numbers, common punctuation
Extended Latin - Accented characters, special letters (é, ñ, ü)
Symbols - ©, ®, ™, and common marks
Typography - Em dash (—), en dash (–), ellipsis (…)
Currency - $, €, £, ¥, and international currency symbols
Math - ±, ×, ÷, ≈, ≠, √
Arrows - →, ←, ↑, ↓, ↔, ⇒
Saved Glyphs - Your frequently-used characters
Search:
Enter character name (e.g., "copyright")
Or Unicode value (e.g., "00A9" for ©)
Instant filtering of results
Character Actions: Right-click any character for options:
Copy Character - Copy the character itself
Copy Unicode - Copy the Unicode value (e.g., U+00A9)
Save to Saved Glyphs - Add to favourites
Pro Tips
Type scale ratios are based on musical intervals
Larger ratios (1.5+) work well for marketing/editorial
Smaller ratios (1.2) better for text-heavy applications
Save commonly-used special characters for quick access
Unicode values are universal across platforms
Major Third (1.250) and Minor Third (1.200) most versatile
Golden Ratio creates aesthetically pleasing proportions
Use em dash (—) not hyphen (-) for proper typography
Keyboard Shortcuts
Quick access to all tools and functions.
Tool Navigation
Shortcut Action ⌘1 Switch to Colours Tool ⌘2 Switch to Mixer Tool ⌘3 Switch to Canvas Tool ⌘4 Switch to Scaler Tool ⌘5 Switch to Fonts Tool
General
Shortcut Action ⌘? Show Help Documentation ⌘, Open Preferences ⌘W Close Window ⌘Q Quit Application ⌘M Minimise Window ⌘H Hide Application
Quick Actions
Shortcut Action ⌘C Copy current value/colour ⌘V Paste (where applicable) ⌘Z Undo ⌘⇧Z Redo ⌘S Save (palette, preset, chip) ⌘E Export (when available)
Colours Tool
Shortcut Action ⌘⇧C Open Colour Picker ⌘⇧H Generate Harmony ⌘⇧A Check Accessibility ⌘⇧S Save Colour Swatch
Canvas Tool
Shortcut Action ⌘⇧G Generate Grid ⌘⇧E Export Grid as PNG ⌘⇧P Save as Preset
Fonts Tool
Shortcut Action ⌘⇧T Generate Type Scale ⌘⇧M Open Character Map ⌘⇧V Copy CSS Variables
Mouse & Trackpad
Click any value to copy to the clipboard
Right-click colours for additional options
Drag sliders for fine control
Scroll within panels to see more content
Click section headers to collapse/expand
Tips & Best Practices
Workflow Optimisation
Keep Toolbox 2000 Floating:
Use the pin button to keep the app always on top
Position at screen edge for quick access
Switch between tools without losing context
Perfect companion to Photoshop, Figma, or any design app
Use Keyboard Shortcuts:
⌘1-5 for instant tool switching
⌘C to copy any value
⌘? when you need help
Much faster than clicking
Save Your Favourites:
Save colour swatches you use frequently
Create custom canvas presets for recurring dimensions
Save colour chips from the mixer for brand consistency
Export type scales to reuse across projects
Colour Workflows
Building Brand Palettes:
Start with the primary brand colour
Generate harmonies (try analogous for cohesive look)
Check accessibility against white and black
Save all approved colours as swatches
Export as CSS for developers
Accessible Design:
Always check contrast ratios for text
Aim for AAA when possible (especially body text)
Use APCA for a more accurate assessment
Test against actual backgrounds, not just white/black
Larger text can use lower contrast ratios
Creating Colour Variations:
Use the Mixer tool with Normal blend mode
Mix with white (10-30%) for tints
Mix with black (10-30%) for shades
Mix with grey (20%) for tones
Save all variations as swatches
Typography Systems
Establishing Type Scales:
Choose base size (16px typical for web)
Select scale ratio based on content:
Minor Third (1.2) - Text-heavy sites
Major Third (1.25) - Balanced approach
Perfect Fourth (1.33) - Marketing sites
Golden Ratio (1.618) - Editorial/luxury
Copy CSS variables
Apply consistently across projects
Font Selection:
Limit to 2-3 typefaces maximum
Use weight variation for hierarchy
Check the character map for special glyphs you need
Ensure font has all required weights
Test at multiple sizes
Layout & Scaling
Responsive Design:
Start with the largest canvas (desktop)
Use Scaler to calculate tablet dimensions
Use Scaler again for mobile
Save each as a canvas preset
Export grids for each breakpoint
Grid Systems:
Choose column count (12 for web, 6-8 for editorial)
Set gutters (16-24px typical)
Match margins to the design system
Export as PNG overlay
Use in the design app as a guide layer
Print Preparation:
Use an A-series calculator for international work
Set up the correct paper size in the Canvas tool
Generate a grid for the layout structure
Check dimensions in multiple units (mm, in)
Export specifications for the print house
Precision Work
Colour Accuracy:
OKLCH is most perceptually uniform for gradients
LAB best for print work (CMYK conversion)
HSL intuitive for quick adjustments
Always verify on the target display/medium
Dimension Accuracy:
Use Target Size scaling for exact container fits
Round to whole pixels for screen work
Keep to an 8pt grid for UI design
Verify ratios when scaling between formats
Performance Tips
Collapse unused sections to reduce visual clutter
Clear saved items periodically to maintain performance
Export palettes rather than keeping hundreds of swatches
Use keyboard shortcuts for frequently-used actions
Pin the app to avoid constant cmd-tab switching
Common Use Cases
Social Media Graphics:
Select canvas preset (Instagram, Facebook, etc.)
Generate a grid for consistent layouts
Pick/save brand colours
Create variations with Mixer
Export grid overlay to design app
Website Design:
Set up responsive canvas presets
Generate a 12-column grid with 24px gutters
Create type scale (Major Third, base 16px)
Build an accessible colour palette
Export all specifications
Brand System Development:
Define primary colour + generate harmonies
Create tints/shades with Mixer
Check all accessibility combinations
Generate type scale
Set up canvas dimensions for brand assets
Export everything as CSS/JSON
Advanced Tips
Colour Harmony Mastery:
Triadic schemes work well for children's brands
Analogous to calming, cohesive palettes
Split-complementary for vibrant yet balanced looks
Adjust lightness/saturation after generation for refinement
Typography Hierarchy:
Combine different ratios (e.g., 1.25 for headings, 1.125 for UI)
Use weight variation within the same family
Test scales at actual implementation sizes
Consider line-height (typically 1.5× font size)
Multi-Project Management:
Export palettes with project names
Save canvas presets per client
Keep type scales in project folders
Document your systems for team use
Support & Feedback
Need more help or have suggestions?
Email: support@bugeyesoftware.com
Website: https://bugeyesoftware.com
Updates: Free updates delivered via Mac App Store
We're constantly improving Toolbox 2000 based on user feedback. Let us know how we can make it even better!
Toolbox 2000 - Professional design utilities for macOS
© 2025 BugEye Software / Albino Zebra Creative Services

