← Knowledge

Design guidelines · HR

Vizualni sustav izveden iz starih social design boardova: paleta, tipografija, frame obrasci, sekvence i do/don't pravila.

Izlaz: hrvatski

v1Approved (active)openai gpt-4.1-mini-2025-04-14 · detaljno · skill analyze_old_designs@1.0.0
Pokrenuo
07. 10. 2026. 09:34:32 · dev@example.com
Završeno
07. 10. 2026. 09:35:37
Odluka
07. 10. 2026. 09:35:42 · dev@example.com
Hash sadržaja
6029d3bf01ec03825815bbfba7617e6c17452c56e65a47a73a2817217c544af5

Need a better version? Add instructions and the agent will create a revision.

  • Exact proprietary font, official colour tokens and master assets were not supplied; keep these as known gaps until the brand/design team confirms them.

Design guidelines — IQOS

Status and scope

Derived from the supplied SOCIAL MEDIA CRO 2026 boards (May.pdf, June-July.pdf, August-September.pdf, October.pdf) and the Figma page DISCL + TEMPLATE. This is not an official PMI brand book. Exact proprietary font family, logo clear-space rules, and master asset files were not supplied and must not be invented. Intended for social media channels including Facebook feed, Instagram feed and carousel, Facebook/Instagram Stories, Reels, and YouTube Shorts.

Board preparation

Monthly production boards are divided into three sections: FB FEED, IG FEED, and STORY-isti. Each scheduled row includes:

  • Publication date in D.M format (e.g., 3.10, 15.5)
  • Local-language content copy on the left
  • Circular STATIC or REELS marker
  • English topic card with one emoji, uppercase short title, and one-line subtitle
  • Optional production notes such as FB ISTO KAO I IG, NEMA, [REELS], or [REELS/YT SHORTS]
  • Design frames to the right

Internal board colours used for organisation (not consumer-facing):

  • Section/topic purple: #7863BE
  • STATIC marker magenta: #FF00FE
  • REELS marker bright cyan (approx. #00D4FF, confirm before official use)
  • Board workspace near-black: #1E1E1E

Visual system

Palette

  • Primary graphic background: teal/turquoise radial or soft linear gradient
  • Working range: dark teal #0A8391 to bright cyan-teal #13B7C7
  • Gradient darker at edges, brighter behind main logo, product, or text
  • Text and logos on teal backgrounds are white
  • Product photography uses warm wood, beige, charcoal, silver, and muted architectural backgrounds
  • White cards with dark charcoal text for feature explanations

Typography

  • Clean geometric sans-serif throughout
  • Headlines: bold or semibold, short (1-2 lines)
  • Supporting copy: regular or light, smaller than headlines
  • Legal copy: regular, small but legible, centered
  • Topic labels on internal board: uppercase title plus sentence-case subtitle
  • Avoid decorative, condensed display fonts, and multiple type families
  • Exact typeface unknown; use Figma template fonts or Inter as fallback

Composition

  • Premium, minimal, product-led
  • Generous negative space
  • One clear focal point per frame
  • Product renders centered or in lower two-thirds
  • Feature cards may have product overlapping bottom edge of white text card
  • Keep text away from busy photo areas; use subtle darkening for contrast only
  • No stickers, meme treatments, decorative clutter, or unapproved promotional badges

Photography direction

  • High-quality product or adult lifestyle photography
  • Soft natural or premium studio lighting; shallow depth of field common
  • Recurring environments: modern desk, laptop, café/table, modern retail interior, neutral architecture
  • Product color echoed by small environmental accents
  • Close-ups focus on texture, engraving, accessories, or device controls
  • Adults only; no youth-coded casting, school/college context, toys, candy-like styling, health/wellness cues, or social-success claims
  • Do not use generative AI to recreate IQOS devices or logos; use approved renders and assets

Frame patterns

  • V1 — Lifestyle/product hero: full-bleed product or lifestyle photo, headline/subline near top, white text on dark photo or dark text on light photo, mandatory short health warning at bottom separated by thin divider. Use for campaign hooks, service/support intros, accessories, seasonal openings, device feature covers.

  • V2 — Product feature explainer: teal/cyan tech background, white rounded rectangle near top for headline and explanation, product render lower portion optionally overlapping text card, subtle concentric/glowing circles for depth, one feature per frame. Use for Pause Mode, FlexPuff, AutoStart, touch screen, induction system, firmware/app instructions.

  • V3 — Informational/service frame: teal background with white icons/text or approved photo with readable overlay, short heading plus concise list, use approved UI mock-ups/screenshots for maps/app screens. Use for support channels, locations, app steps, warranty, FAQs.

  • V4 — IQOS ILUMA i end card: teal radial gradient, short CTA near top with iqos.com emphasized, IQOS + ILUMA i wordmarks centered, mandatory short warning at bottom.

  • V5 — Customer support end card: teal radial gradient, approved IQOS symbol/wordmark, Korisnička podrška and/or Više na iqos.com, large negative space.

  • V6 — Full risk end card: teal radial gradient, centered white outlined rectangle with rounded corners, full approved risk/adult/nicotine statement centered, no competing imagery or CTA.

Sequence recipes

  • Feed static: one V1 hero frame; if educational with multiple cards, use carousel instead of dense copy.

  • Feed carousel: V1 hook/cover, 2-4 V2/V3 info frames (one idea per card), V4 ILUMA end card if relevant, V5 support card if relevant, V6 risk end card.

  • Stories: V1 hook/product/lifestyle frame, 2-4 V2/V3 explanation frames, V4 ILUMA end card, V5 support card, V6 risk end card. Typical sequences have 4-8 screens; each screen independently understandable; avoid caption repetition.

  • Reels/YouTube Shorts: hook first scene, demonstrate one action/feature per scene, short on-screen copy readable without pausing, include end card and mandatory warning, default under 30 seconds unless otherwise specified.

Text hierarchy and density

  • Cover headline: up to 7 words ideal
  • Subline: one short sentence
  • Explanation frame: one heading plus 2-4 short lines
  • Story: one idea per screen
  • Do not paste full social caption onto visuals
  • Preserve approved product names and trademark notation
  • Content text in Croatian for HR and Slovenian for SI
  • Internal topic card in English: one emoji, 2-5 word uppercase title, one short subtitle

Compliance treatment

  • Every photo/creative frame requiring it includes approved short warning at bottom, visually separated by thin divider
  • Story and carousel sequences end with approved full warning card when required
  • Wording from active brand_info; this guide does not override legal copy
  • Keep warning text readable and unobstructed
  • Never crop, paraphrase, or decorate approved warnings without legal review

Format rules

  • Feed/card preferred aspect ratio: 4:5 (1080×1350); 1:1 (1080×1080) only if approved brief/template requires
  • Story/Reels: 9:16 (1080×1920)
  • Carousel cards must share one aspect ratio
  • Respect platform-safe areas and current active meta_formats; those override this guide

Do / do not

Do

  • Start from topic and approved channel copy
  • Select smallest sequence communicating the idea
  • Use approved product images, logos, UI screens
  • Keep established teal system and end cards
  • Reuse structure, not old wording or identical scenes
  • Call out uncertainties in designer_notes

Do not

  • Invent product variants, colours, features, availability, UI, or locations
  • Generate/reconstruct logos or exact devices with image models
  • Introduce unrelated colour palettes because they are trending
  • Use youth-oriented illustration, nightlife glamour, or health imagery
  • Overload frames with caption-length text
  • Treat sampled hex values or Inter fallback as official brand standards

Evidence reviewed and known gaps

Evidence reviewed:

  • May.pdf
  • June-July.pdf
  • August-September.pdf
  • October.pdf
  • Figma SOCIAL MEDIA CRO 2026, page DISCL + TEMPLATE

Known gaps:

  • Exact font family/files and permitted weights
  • Master IQOS, ILUMA i and symbol assets
  • Official colour tokens and gradient definitions
  • Logo clear-space/minimum-size rules
  • Approved product-render library
  • Definitive safe zones and warning sizes
  • Confirmation of REELS marker colour (internal board token)

Until supplied, Figma templates are the visual source of truth for these details.

Ulaz i meta podaci kolektora
{
  "input": {
    "locale": "hr-HR",
    "market": "Hrvatska",
    "use_files": true,
    "market_code": "HR",
    "detail_level": "detailed"
  },
  "collector": {
    "source_dir": "/home/cxdevs/apps/content-ai-agent/sources/old_designes",
    "text_files": [
      "design_guidelines_source.md"
    ],
    "evidence_pdfs": [
      "August-September.pdf",
      "June-July.pdf",
      "May.pdf",
      "October.pdf"
    ],
    "market_fallback": false
  },
  "usage": {
    "total_tokens": 6598,
    "prompt_tokens": 3500,
    "completion_tokens": 3098
  }
}