Skip to main content
Components are the core building blocks of the Social Media and Your Brand systems. Once variables and styles are defined, you can start creating and customizing posts, covers, proposals, and internal documents directly from these components.

​
Social Media Components

​
1. Typography

  • Purpose: Core heading and paragraph components (Display → Body).
  • How it works: Controlled by variables (font-family, font-weight, font-size) and linked to text styles.
  • Usage: Do not edit directly — replace values via variables or component properties.

​
2. Post & Cover Design

Ready-to-use templates for social media posts and covers.
  • 14 carousel templates covering different content types (educational, case studies, job offers, inspiration, company news, and more).
  • Post base components built with auto layout, ensuring 100% responsiveness across formats (Instagram, LinkedIn, Facebook).
  • Cover templates for LinkedIn banners, Facebook covers, and more.
👉 All elements are linked to variables (typography, colors, strings), so changing a single token updates the entire design instantly.

​
3. Asset Export

A dedicated export station with pre-configured export settings and naming conventions.
  • Export posts in multiple formats and resolutions with one click.
  • Compatible with all major social media platforms.
  • Predefined suffixes for consistent file naming.
👉 This ensures your workflow from design to publishing is seamless.

​
4. Proposals & Content Decks

Components for building client-facing and internal decks.
  • Social Media Proposal: pre-built pages for presenting strategy, concepts, and deliverables.
  • Monthly Social Media Content Deck: structured layouts for reporting KPIs, content pillars, and campaign learnings.
👉 Perfect for aligning with clients and documenting performance.

​
Your Brand Components

​
1. Base Elements

Fundamental building blocks for internal documents.
  • Typography: heading and body components controlled by styles and variables.
  • Tables: responsive tables for KPIs, budgets, or comparisons.
  • Tags & Labels: highlight keywords or categories.
  • Logos & Icons: placeholders for showcasing partner/client brands.

​
2. Layout & Content

Pre-built layouts for structuring proposals and internal presentations.
  • Chapter headers with numbering and title properties.
  • Content blocks for paragraphs, lists, or metric highlights.
  • Charts & Data visuals for presenting KPIs.
  • Team & Clients layouts to present collaborators.

​
3. Illustrative Elements

Supporting visuals to enrich the presentation.
  • Graphs styled to match proposal themes.
  • Dividers & Frames for document rhythm.
  • Highlight blocks for quotes or spotlighted data.

​
Editing Components

  • Variables first → All components are powered by variables (colors, typography, spacing). Always update variables instead of editing components directly.
  • Locked components → Some base elements (typography, logo placeholders) are locked to preserve consistency. Replace content via properties panel instead of editing directly.
  • Nested components → Most components are built with nested instances (e.g. headings, body text, icons, swatches). This means you can change typography, sizes, or content directly from the nested component properties, without having to click into every layer.
  • Multi-brand support → Switch between Client / Your Brand / Proposals modes to instantly restyle all components without rebuilding layouts.

​
Best Practices

  • Use the correct set of components for the context.
    • Your Brand = internal, Social Media = final client delivery.
  • Avoid overrides. Always replace content via properties or connected variables, not by breaking component instances.
  • Leverage nested components. Use their properties to update multiple layers quickly and consistently.
  • Apply modes correctly. Use Theme and Mode collections for Light/Dark or Client/Your Brand switching — never override directly.

​
Next Steps

  • Explore Typography to understand how text connects to components.
  • Learn how to manage Variables for faster brand customization.