Gavlar
05 Gavlar

Applications

Components, canvases, social, and how the brand shows up across every surface.

Where the system meets the real world. The brand DNA and visual system become slides, posts, proposals and pages here. The architecture is fixed; the content flexes to the job.

Components

The building blocks, built and live in Figma. Names match Figma exactly, so a brief like “use the Hero, Dark variant, Zag layout” works in both Figma and any AI tool.

  • Hero — page opening, image-led or type-led.
  • Feature Block — Split (50/50) and Grid (3-up) for benefits and services.
  • Stats Bar — single-row metrics for credibility moments.
  • Testimonial — Grid (multi-quote) and Featured (single, larger).
  • Client Bar — a single-row logo strip.
  • CTA Section — the closing call to action, light or dark.
  • Pricing Cards — three-up tier display.
  • The Problem — the diagnostic “does this sound like you?” section.
  • Differentiators — the value-pillar block.
  • Nav Bar / Nav Bar Bottom / Footer — navigation and close.

Variants. Most components have Light and Dark. Many have Zig (conventional, safe) and Zag (unexpected, considered). When briefing, name both: “Hero, Dark variant, Zag layout.”

Canvases by context

  • Web — 1440px primary canvas. Breakpoints at 1280, 1024, 768, 0.
  • Slides — 1920×1080 (16:9), always.
  • Social — 1080×1080 (1:1) and 1080×1350 (4:5).
  • Print — A4 portrait and landscape; business card 85×55mm.

Aspect ratios per output

  • Slides — 16:9.
  • Instagram feed — 1:1 default, 4:5 for longer-form.
  • Stories / Reels covers — 9:16.
  • LinkedIn feed — 1:1 or 1.91:1 landscape.

Social system

  • Contrast does the work at small scale. Black on cream, or dark on yellow, hit hardest in a busy feed.
  • First line is the whole post. The hook is most of what people see. Earn the tap.
  • One idea per asset. If it needs two, it’s two posts.
  • Restraint still applies. A plain surface, one strong line in Tallica, a single accent moment beats a decorated grid every time.

Briefing rule

For any asset, always specify three things: the surface (cream or dark), the role focus (what reads first), and where the single accent moment goes. Name the Figma component if one applies, and set the mood with two adjectives from the vocabulary. Never ask for “modern”, “clean”, or “professional”, they’re empty words. Use the Gavlar vocabulary instead.