Brand System
Dockzio Brand Guide
The visual foundation every Dockzio application, page, and tool follows — logo, color, icons, tool identity, and contribution rules. Prefer shared primitives over one-off styles.
Markdown reference: docs/BRAND_GUIDE.md
Logo Usage
Primary lockup is the Maker’s Seal D-mark plus the Dockzio wordmark. Clear space, scale, and freeze rules keep the brand recognizable.
Hero
Nav
Compact
- Use DockzioLogo — never rebuild the mark from scratch.
- Clear space: at least ¼ of the mark width on all sides.
- Minimum mark sizes: 16×16 favicon, 24×24 UI chrome.
- Do not stretch, rotate, recolor, or add unapproved glows.
- Homepage hero lockup is frozen under Branding v1.0.
Color Palette
Royal-blue layered surfaces with restrained gold accents. Blue owns interaction; gold owns labels and selection; emerald owns success and privacy.
Background
--dz-bg
Background Mid
--dz-bg-mid
Background Lift
--dz-bg-lift
Tool Workspace
--dz-bg-tool
Accent
--dz-accent
CTAs, focus
Gold
--dz-gold
Marks, sparse accents
Success
--dz-success
Warning
--dz-warning
Danger
--dz-danger
Info
--dz-info
Status Colors
Semantic status for badges and feedback. Prefer StatusBadge / Badge variants over ad-hoc colors.
Success
--dz-success
Warning
--dz-warning
Danger
--dz-danger
Info
--dz-info
Risk Colors
Production Report risk levels. Map high / medium / low through tokens — never invent parallel reds or ambers.
High risk
--dz-risk-high
Medium risk
--dz-risk-medium
Low risk
--dz-risk-low
Confidence Colors
Evidence confidence for grounded recommendations and intelligence. High is emerald; medium is soft blue; low is muted zinc.
High confidence
--dz-confidence-high
Medium confidence
--dz-confidence-medium
Low confidence
--dz-confidence-low
Typography
Geist Sans for UI, Geist Mono for tokens and code. Headlines are semibold with tight tracking; body copy is relaxed.
Headline — tracking-tight
Section label
Body copy uses relaxed leading and secondary zinc tones for long-form readability without competing with headlines.
Mono — tokens, IDs, and code samples
Icon System
One stroke family: 24×24 viewBox, 1.5 stroke, round caps and joins, currentColor. Do not mix icon packs on marketing surfaces.
Production Assistant
production-assistant
PDF/X Compliance
pdfx-compliance
Font Inspection
font-inspection
Image Inspection
image-inspection
Color Inspection
color-inspection
PDF Structure
pdf-structure
Press Profiles
press-profiles
Workflow Compatibility
workflow-compatibility
Production Recommendations
production-recommendations
Production Intelligence
production-intelligence
Equipment Knowledge
equipment-knowledge
Report History
report-history
Compare Reports
compare-reports
Export
export
Roadmap
roadmap
Completed Features
completed-features
Report Search
report-search
Source: src/components/icons/dockzio-icons.tsx
Icon Philosophy
Icons share one visual language so Dockzio stays recognizable at every size — from favicon chrome to homepage cards.
- Stroke width: 1.5 on a 24×24 canvas — never mix 1 / 2 weights.
- Corners: consistent round caps and joins; rx ≈ 2 on small rects.
- Keep shapes simple — readable at 16–20px without labels.
- Use currentColor so category accents tint the glyph.
- Decorative icons: aria-hidden; titles provide the accessible name.
- Do not import Lucide, Heroicons, or other packs for product UI.
- Registry utility tools use tool-icons.tsx with the same stroke rules.
- New glyphs: add to DOCKZIO_ICONS, assign a category, document in Brand Guide.
Tool Identity
Every major application has an official identity: icon, short description, category, and accent derived from that category.
Production Assistant
FeaturedUpload a production PDF and receive deterministic Production Intelligence backed by inspection evidence.
Production
PDF/X Compliance
Deterministic PDF/X signals and production readiness checks derived from the inspected file.
Inspection
Color Inspection
Declared color spaces, spot colors, and transparency signals read from page content and resources.
Inspection
Image Inspection
Embedded image inventory with dimensions, color space, and effective resolution from the PDF.
Inspection
Font Inspection
Structural font facts — embedding, subtypes, and usage — without OCR or substitution guesses.
Inspection
PDF Structure
Page boxes, geometry consistency, and structural markers for production readiness checks.
Inspection
Workflow Compatibility
Evaluate authored workflow conditions against report facts with explicit pass, fail, or unknown.
Production
Press Profiles
Compare a completed report against labeled press requirement presets — no OEM capability claims.
Production
Production Intelligence
Evidence-backed readiness, risk, and prioritized actions summarized from deterministic inspection.
Production
Production Recommendations
Grounded next steps from readiness, workflow, press baselines, and structure — every item carries evidence.
Production
Equipment Knowledge
Authored equipment guidance ranked against Production Report evidence for commercial print workflows.
Production
Report History
Revisit prior Production Reports stored in the browser. No cloud upload of PDF bytes.
Reports
Compare Reports
Side-by-side comparison of two Production Reports — readiness, findings, and section deltas.
Reports
Export
Download a Production Report as PDF, HTML, or JSON for review and archival.
Reports
Report Search
Find findings and section items quickly with search and filters over a Production Report.
Reports
Roadmap
See what is planned next for Dockzio production tooling and platform milestones.
Platform
Completed Features
Shipped Production Assistant milestones — inspection, workflow, and report capabilities.
Platform
Source: src/lib/product/tool-identity.ts
Categories & Accents
Visual groups with subtle accent colors inside Dockzio branding. Use for icon wells and section labels — never for primary CTAs.
Inspection
--dz-cat-inspection
Deterministic PDF inspection — fonts, images, color, structure, PDF/X.
Production
--dz-cat-production
Production Assistant, workflows, press profiles, recommendations, and intelligence.
Reports
--dz-cat-reports
History, comparison, and export of Production Reports.
Platform
--dz-cat-platform
Roadmap and completed product milestones.
Cards
Marketing cards use layered blue gradients, soft borders, and subtle hover lift. Flagship cards earn stronger blue borders and Featured treatment.
Standard card
Resting elevation
Use Card for tool panels. Marketing grids may use Link + gradient classes matching --dz-card-* tokens.
Featured / flagship
Stronger blue border + icon well (lg) for premium scan.
Spacing System
Generous vertical rhythm. Prefer tokenized spacing over one-off rem values.
--dz-space-10.25rem--dz-space-20.5rem--dz-space-41rem--dz-space-61.5rem--dz-space-82rem--dz-space-section2.5rem--dz-space-page-x1.5rem--dz-max-home72rem (max-w-6xl)Border Radius
Shared radii keep controls, panels, and pills optically consistent.
--dz-radius-sm0.5rem--dz-radius-control0.75rem--dz-radius-panel1rem--dz-radius-card1rem--dz-radius-pill9999pxElevation
Depth comes from layered lighting and soft shadows — not heavy drop shadows or glow stacks.
Resting
--dz-shadow-card
Hover
--dz-shadow-card-hover
Shadows
Tokenized shadow scale for chrome and marketing surfaces.
--dz-shadow-sm--dz-shadow-md--dz-shadow-lg--dz-shadow-card--dz-shadow-card-hoverAnimation Guidelines
Motion creates presence and hierarchy — not noise. Keep transitions short and respect reduced motion.
- Duration: 200–300ms for hover, focus, and state changes.
- Card hover: subtle lift (-translate-y-1) with deeper shadow.
- Buttons: motion-safe:hover:-translate-y-px.
- Icon wells: slight scale on parent group hover.
- Always gate motion with motion-safe: / prefers-reduced-motion.
- Avoid excessive glow, bounce, or looping decoration.
- Focus rings stay visible: focus-visible:ring-2 ring-blue-400/40.
Status Badges
Use StatusBadge for product maturity, risk, and featured states. Keep labels consistent — do not invent parallel badge copy.
Future Scalability
Rules so new tools automatically fit the Dockzio ecosystem without inventing a parallel visual language.
How to add a new tool
- Add a Tool Identity entry in tool-identity.ts (title, description, icon, category, href).
- Add or reuse a Dockzio icon in dockzio-icons.tsx with the shared stroke rules.
- Map the icon to a category in TOOL_CATEGORY_BY_ICON.
- Surface on homepage only via popular-production-tools ordering — not hard-coded cards.
- Prefer shared Card / ToolIconWell / StatusBadge primitives.
How to choose an icon
- Reuse an existing glyph if the concept already exists.
- Design new glyphs in the same 24×24 / 1.5 stroke family.
- Must read at small sizes without a label.
- Never mix Lucide/Heroicons with Dockzio icons on the same surface.
How to choose a category
- Inspection — deterministic PDF facts (fonts, images, color, structure, PDF/X).
- Production — Assistant, workflow, press, recommendations, intelligence, equipment.
- Reports — history, compare, export, search.
- Platform — roadmap and completed milestones.
How to choose accent colors
- Accents come from the category — never invent a one-off hex per tool.
- Use ToolIconWell so surface/border/text stay in sync.
- Primary CTAs stay Dockzio blue; gold stays sparse.
How to maintain consistency
- Do not invent a new visual language for a single tool.
- Read titles and descriptions from Tool Identity — no copy duplication.
- Match Design System / Brand Guide tokens in globals.css.
- Respect Branding v1.0 homepage freeze for hero composition.
- Verify with npm run verify before shipping.
Accessibility
Icons are decorative beside visible titles. Interactive cards and buttons require visible focus rings and practical touch targets.
- Focus: focus-visible:ring-2 focus-visible:ring-blue-400/40
- Motion: respect prefers-reduced-motion on lifts and icon scale
- Contrast: icon wells use light-on-dark category accents
- Labels: never rely on icon alone for meaning on marketing cards
- Touch targets: aim for ≥36–44px min-height on nav and buttons