Canva-Ready Social Templates
Relevant source files
The following files were used as context for generating this wiki page:
Canva-Ready Social Templates are standalone HTML designs built to translate canonical brand tokens into editable graphic assets. These templates allow users to import on-brand visual structures directly into Canva by utilizing static design references that maintain visual fidelity without external dependencies. The templates follow the "GestaltView" visual system, emphasizing dark fields with luminous accents and high-contrast typography.
Sources: showcase.html:184-188, showcase/registry.json:123-146
Design Token System
The templates rely on a hierarchical token system that maps primitive colors and typography to semantic use cases. This ensures that any change in the brand core propagates accurately across social assets.
Core Palette (Primitive Tokens)
The visual identity uses a "dark-first" approach, utilizing deep navies and blacks as the substrate for high-visibility accent colors.
| Token Name | Hex Code | Purpose |
|---|---|---|
| Obsidian | #05070B | Primary background color |
| Void Navy | #0A1020 | Surface and panel background |
| Electric Cyan | #12D6FF | Primary accent and interactive state |
| Signal Blue | #4AA8FF | Secondary accent |
| Ultraviolet | #8A5CFF | Primary action button and highlights |
| Neon Magenta | #FF3CAC | Tertiary accent and rules |
| Ember Gold | #F7B267 | Warnings and critical status |
Sources: showcase/brand-board.html:26-30, brand-sheet.html:140-158
Semantic Mapping
Templates utilize semantic tokens to define component behavior, allowing for consistent rendering across different frame sizes (e.g., Square Post vs. Vertical Story).
This diagram illustrates the flow from raw hex values to functional template components.
Sources: brand-sheet.html:162-177
Layout and Asset Specifications
The templates are provided in specific dimensions optimized for social media platforms. They are registered as standalone artifacts within the showcase module.
- Square Social Template: Fixed at 1080 × 1080 pixels for standard feed posts.
- Story Template: Fixed at 1080 × 1920 pixels for vertical, tall-frame content.
Sources: showcase.html:197-200, showcase/registry.json:135-146
UI Components and Surfaces
The templates incorporate "Glass Surfaces" and "Status Badges" to create depth and hierarchy within the designs.
- Glass Surface: Uses high-contrast borders and subtle shadows (
box-shadow: inset 0 0 18px rgba(18,214,255,.08)) to house content without obstructing background gradients. - System Notices: Use specific background-to-border relationships to indicate "Ambient," "Active," or "Critical" states.
Sources: showcase/ui-component-sheet.html:43-46, showcase/ui-component-sheet.html:79-81
Import and Compatibility Logic
To ensure a clean import into the Canva design environment, the templates adhere to strict technical constraints.
This sequence shows the intended workflow for translating HTML code into editable Canva layers.
Sources: showcase.html:201-203, showcase/brand-board.html:36-39
Technical Requirements for Import
- Static References: Files must contain no JavaScript or external asset calls.
- Typography Fallbacks: CSS provides fallbacks (e.g.,
Arial, Helvetica, sans-serif) for system fonts like "Manrope" or "Geist Mono" in case the target environment does not support them natively. - Encapsulated Styling: All styles are defined within the
<style>block of the individual template files to prevent rendering failures during import.
Sources: showcase.html:201-203, showcase/brand-board.html:8-10
Visual Design Principles
Templates are designed to be "Cheerful Infrastructure," focusing on legibility and documented claims rather than visual noise.
- Dark Field, Bright Signal: Deep backgrounds prioritize information density while cyan and magenta provide accents.
- Room to Breathe: Layouts utilize a rhythmic spacing scale (8/16/24/32/48 px) and specific corner radii (8/16/24 px) to maintain system recognizability.
- Evidence before Hype: Every visual element is derived from observed states within the larger GestaltView runtime.
Sources: showcase/brand-board.html:42-49
Implementation Example: UI Component Sheet
The UI component sheet acts as the reference for building these templates, defining how buttons and badges should appear in a static environment.
<!-- Example of a Primary Button used in templates -->
<style>
.button {
border: 0;
border-radius: 8px;
padding: 12px 18px;
background: #8A5CFF;
color: white;
font-weight: 700;
font-size: 14px;
}
</style>
<span class="button">Continue</span>
Sources: showcase/ui-component-sheet.html:32-35
The Canva-Ready Social Templates represent the final visual output of the brand's identity system, providing a bridge between high-level architectural tokens and practical social media marketing assets. By using a static HTML substrate, these templates ensure that the "Digital Intelligence" aesthetic remains consistent across third-party platforms.