All documents, guides, and resources in one place
Core visual identity, colors, typography, and spacing system
The 95/5 rule, core colors, semantic colors, and how to apply them across all designs.
View Document →Font families, scales, line heights, weights, and usage rules for headers and body text.
View Document →The 20px Technical Lace grid, whitespace rules, padding, and structural alignment.
View Document →Logo system, banner lockups, circle marks, usage guidelines, and safety areas.
View Document →Icon set, artifact collection, size specifications, and application guidelines.
View Document →Abstract brand elements, suspension bridge motif, the Pulse Dot, and animation principles.
View Document →Brand voice, tone, audience, and content strategy
Core voice rules, tone coordinates, vocabulary, the Jargon Jar, and writing examples.
View Document →Marketing-specific tone, when to use it, social media examples, and audience-facing copy.
View Document →Three core personas, pain points, motivations, and what they care about.
View Document →30-day repeating cycle, 4-week categories, scheduling structure, and CMS integration.
View Document →Visual direction briefs for all 30 calendar days, art direction, and composition notes.
View Document →Reusable UI elements, interaction patterns, and component library
Button styles, states, sizing, the [ bracketed CTA ] convention, and interaction feedback.
View Document →Inputs, selects, checkboxes, radio buttons, validation states, and accessibility.
View Document →Card layouts, shadows, borders, spacing, and how to structure content blocks.
View Document →Header nav, sidebar nav, breadcrumbs, footer, and responsive behavior.
View Document →Table layouts, sorting, filtering, row selection, and accessibility standards.
View Document →Modal structure, backdrop, dismissal, focus management, and stacking.
View Document →CMS-ready page templates and design patterns
Hero + featured tools grid + "View all tools" link. CMS-driven, ready for your services landing page.
View Document →Complete product page: hero, problem/solution, features, pricing, FAQ, sidebar nav, prev/next.
View Document →Seven 16:9 slide templates: title, section header, content, comparison, quote, stats, end card.
View Document →Hero layout variations, image placement, type sizing, and call-to-action positioning.
View Document →Two-column layouts, feature grids, testimonial sections, and image + text combinations.
View Document →Interactive demo of all components, copy-paste code snippets, and live previews.
View Document →Connected CMS setup, API reference, and integration guides
Visual mockup of the Connected CMS interface. Design demo only — see setup guide for real implementation.
View Document →How to connect the design system templates to Barcelona (or any CMS). Collection setup, API endpoints, component mounting.
View Document →Content Calendar endpoints, Tool Manager endpoints, Service Manager endpoints, and authentication.
View Document →Extended documentation and quick reference
Complete translation guide: corporate speak → Digital Allies plain English. Print-friendly reference table.
View Document →Brand brain information for AI assistants. Copy-paste into system prompts for Barcelona, social bots, email automation.
View Document →How to use the design system, import fonts, load CSS tokens, and set up a new project.
View Document →Common questions about brand usage, component customization, and design system maintenance.
View Document →Version history, updates, breaking changes, and deprecation notes.
View Document →How to organize the design system for GitHub, the ideal folder structure, and consolidation workflow.
View Document →