StoryCraft · Omni-Design Framework
Omni-Design Framework
Anatomy of every graphic that ships through the Omni system — social posts, invitations, static ads, print collateral. Every asset follows the same visual grammar: focal hierarchy, safe zones, contrast, type scale, brand consistency.
Universal Design Principles
Before format, five rules apply everywhere.
| Rule | Standard | Why It Matters |
|---|---|---|
| Focal hierarchy | One clear #1, one #2, everything else supporting | Viewer decides in 0.4s what to look at. Give them one answer. |
| Contrast | Type & background at 4.5:1 minimum (WCAG AA) | Legible in bright sun, on cheap screens, at thumbnail size. |
| Type scale | Ratio 1.25–1.5× between hierarchy levels | Skimmable structure. Body 14–16pt, sub 20–24pt, hero 40–72pt+. |
| Whitespace | Padding ≥ 8% of asset shortest side | Breathing room signals quality; crammed = amateur. |
| Brand consistency | Same 2 fonts, 3–5 colors, 1 logo lockup across all assets | Recognition compounds. Novelty per-asset kills brand equity. |
Social Post — Feed, Portrait, Story
Purpose: thumb-stop and message delivery inside a scroll. Every social post competes with 400 others in the next 60 seconds.
Feed square (1080×1080) · Portrait (1080×1350) · Story (1080×1920)
Portrait 4:5 is the current feed default — 20% more screen real estate than square. Story 9:16 has UI zones to respect.
Anatomy — Layers
- Background — photo, color block, or texture. Never busy behind text.
- Focal image / subject — one hero element, off-center per rule of thirds.
- Headline — 3–7 words, sentence-case, 60pt+ display font.
- Subtext / offer — supporting detail, 18–24pt.
- Brand mark — logo bottom-right corner, small, consistent.
- CTA — visual button OR arrow toward the swipe/link direction.
Safe Zones (by format)
- Feed square — 5% margin all edges.
- Portrait 4:5 — inset headline top 20% (feed crops preview).
- Story 9:16 — keep critical content in center 80% (top 12% + bottom 15% get UI).
- Carousel — first slide is the hook; slides 2–N deliver value.
Thumb-Stop Recipe
- Unexpected color OR high-contrast subject vs feed norm.
- Human face at eye-level (proven +30% engagement).
- One bold word or number in the first 60% of the frame.
- Motion cue (arrow, gaze direction) toward CTA.
Type & Color Rules
- Max 2 typefaces per asset — display + body.
- Type overlays photo → dark scrim or solid backing plate.
- Brand color as accent (10–20% of frame), not background flood.
- White or near-black for body copy — always legible.
Do
- One message per post.
- Test at thumbnail size (150px wide).
- Use portrait 4:5 by default in feed.
- Keep the logo, don't shrink to invisibility.
Don't
- Cram 3 offers on one graphic.
- Center text over a busy photo without a scrim.
- Reuse a horizontal ad as a Story — safe zones will crop it.
- Change font family per post — brand collapse.
Invitations & Event Graphics
Weddings, launches, dinners, webinars, grand openings. Purpose: convey occasion, communicate details, drive RSVP. Elegance signals stakes.
Occasion · Date · Details · RSVP
Hierarchy: what's happening > when > where > how to respond. Nothing else competes.
Digital Invitation (1080×1350 or 1200×1500)
- Header ornament or hero image tied to the occasion.
- Occasion line — italic script or elegant serif, 32pt.
- Host / brand name — display font, 48–72pt.
- Dateline — day + full date, formatted classically ("Saturday, the sixth of April").
- Location + time on a single line, small caps.
- RSVP CTA — button OR clear link, terminal element.
Print Invitation
- Size — 5×7" is standard (fits A7 envelope).
- Bleed — 0.125" all edges.
- Safe area — 0.25" inset from trim.
- DPI — 300 minimum.
- Color mode — CMYK (not RGB — will shift).
- Paper — 110# cardstock or heavier. Uncoated for elegance.
Tone / Style Cues
- Formal — script + serif pairing, monochrome or metallic accent, generous whitespace.
- Modern — sans-serif hierarchy, off-center layout, bold color block.
- Casual / launch — display type, photo hero, brand-forward.
Print vs Digital
- Print: physical texture matters; add letterpress or foil for high stakes.
- Digital: motion (subtle) can replace texture; use animated versions for Stories.
- Print: no clickable RSVP — QR code + short URL.
- Digital: RSVP link tracked with UTM for attribution.
Common Mistakes
Two typefaces fighting
Script AND display AND sans = chaos. Pick two.
Buried RSVP
Bottom-corner 8pt = ignored. Give it a button.
RGB sent to print
Blues will muddy, reds will shift. Convert to CMYK first.
No bleed on print file
White edges after trim. Always add 0.125" bleed.
Static Ads
Meta, Google Display, programmatic, in-feed sponsored posts. Purpose: stop, offer, click. You have 3 seconds to earn a tap.
The 3-Second Read Test
If a stranger can't answer "what is this and what do I get?" in 3 seconds — kill the ad.
Required Elements
- Hook visual — pattern break OR problem/result contrast.
- Headline / offer — the value in ≤7 words.
- Proof marker — star rating, testimonial fragment, or badge.
- CTA — bold button, action verb ("Get quote," "Book now").
- Brand — small logo, corner.
Spec Sheet by Placement
- Meta feed — 1080×1350 (4:5), <20% text (informal rule, still lifts perf).
- Meta Story/Reel — 1080×1920, keep text center-safe.
- Google Display — 300×250, 728×90, 336×280, 300×600 — provide all.
- LinkedIn feed — 1200×627 or 1200×1200.
Offer Clarity Rules
- Price on the ad if it's competitive (or "free" / "starting at $X").
- Timebox urgency ("Ends Sunday") only if real.
- Result-forward > feature-forward ("3× more leads" > "AI-powered").
Badge / Price Treatment
- Sticker or ribbon shape for price/discount — feels retail-familiar.
- Contrasting color to background (brand accent works).
- Position: top-right or bottom-left — flanks the hero.
- Don't cover the subject's face or main product with the badge.
Common Mistakes
Ad looks like a brochure
Corporate polish = ignored on social. Make it feel native.
Two offers, one ad
Split test each offer instead. Never split intent.
Stock photo of laptop
Signals lazy. Use real photography or bold graphic.
CTA button not tappable-looking
Underline it, box it, color it — make it look pressable.
Print Collateral — Flyers, Mailers, One-Pagers
Purpose: tangible, high-signal delivery of an offer. Held in hand for 3–8 seconds. Design accordingly.
Hero + offer + proof + CTA + address
Same as a landing page, compressed onto paper.
Print Specs
- Standard flyer — 8.5×11" or 5.5×8.5" (half-page).
- EDDM mailer — 6.5×9" or 6.25×11" (USPS-approved).
- Postcard — 4×6" or 5×7".
- Bleed — 0.125" on all edges.
- Safe zone — 0.25" inset.
- DPI — 300 for photos, 600 for line art.
- Color mode — CMYK; convert Pantones deliberately.
- Paper — 100# gloss for retail feel; matte or uncoated for premium.
Layout Rules
- Hero image / headline top 40%.
- Offer + bullets middle 40%.
- CTA + phone + address bottom 20%.
- QR code on every printed piece — tracks scans as a source.
Two-Sided Design
- Front — hook + offer + hero.
- Back — proof (reviews, before/after), details, guarantee, CTA + QR.
- Front sells the click; back sells the call.
Delivery-Aware Design
- Door hanger — headline readable at arm's length.
- Mailer — offer visible without opening.
- Handout — folds flat into a pocket without hiding CTA.
Common Mistakes
No QR code
Can't attribute the response. Every piece gets one.
Text runs to the edge
Trim cuts it off. Respect the 0.25" safe zone.
Screen colors sent as-is
Neon blues turn dull. Proof in CMYK first.
Address in tiny footer
Local trust matters. Make the address readable.
Brand Consistency Rules
The system that lets every asset feel like one brand.
| Element | Standard | How to Apply |
|---|---|---|
| Type pairing | 1 display + 1 body font | Display for headlines, body for everything else. No third font. |
| Color roles | 1 primary, 1 secondary, 1 accent, 2 neutrals | Primary = brand color. Accent for CTAs only. |
| Spacing scale | 4 / 8 / 16 / 24 / 32 / 48 / 64px | Everything snaps to this. No random 13px paddings. |
| Grid | 12-col web, 6-col social | Aligns headlines, images, and CTAs across assets. |
| Logo lockup | One horizontal + one stacked version | Min clear space = height of the mark on all sides. |
| Photo style | Consistent light, color grade, framing | All product photos edited with the same preset. |