VISUAL IDENTITY SYSTEM

SENIOR BRAND IDENTITY DESIGNER · TECHNICAL SPECIFICATION GUIDE · v1.0 VISUAL IDENTITY SYSTEM Plug-and-Play Technical Framework · Digital + Print · Figma-Ready BRAND VARIABLE [BRAND_NAME] Bleed Zone (3mm — trim after print) Safe Zone (no critical content beyond this) Live / Content Area Digital Frame (px dimensions) CMYK = Print · RGB = Digital 300 DPI = Print · 72–144 PPI = Screen SECTION A PRINT MATERIALS COLOR PROFILE: CMYK · RESOLUTION: 300 DPI · FORMAT: PDF/AI/EPS A1 — Business Card Standard international format (ISO 7810 ID-1 adjacent) · Front + Back FRONT VIEW B [BRAND_NAME] EST. 20XX [FIRST_NAME] [LAST_NAME] [JOB_TITLE] [[email protected]] [+XX XXX XXX XXXX] [BRAND_WEBSITE.COM] 3mm bleed BACK VIEW [BN] [BRAND_NAME] [BRAND_WEBSITE.COM] A1 — BUSINESS CARD SPECIFICATIONS SPEC PRINT VALUE DIGITAL VALUE Full Size (with bleed) 92mm × 57mm 1083 × 672 px Trim Size (final cut) 86mm × 54mm 1016 × 638 px Bleed 3mm all sides N/A (digital) Safe Zone (from trim) 4mm inset 47 px inset Resolution 300 DPI 144 PPI (Retina) Color Profile CMYK sRGB Paper Stock 350–400 GSM N/A Finish Options Matte / Gloss / Soft-touch UV N/A Export Format PDF/X-1a · AI · EPS PNG · SVG · JPG Figma Frame Size W: 1016px H: 638px + bleed: 1083 × 672 px Set Figma to @2x export FIGMA TIP Use Auto Layout with 4mm (47px) padding constraint. Create a “[BRAND_NAME]” Text Style as a Component for instant swap. 92mm / 1083px (with bleed) | 86mm / 1016px (trim) 57mm / 672px (bleed) · 54mm / 638px (trim) A2 — Letterhead A4 Standard · Single page view (front only) FRONT VIEW (A4) B [BRAND_NAME] [TAGLINE HERE] [BRAND_WEBSITE.COM] [+XX XXX XXX XXXX] [[email protected]] [CITY], [DD MONTH YYYY] Ref: [DOCUMENT_REF] [RECIPIENT_NAME] [RECIPIENT_TITLE] [COMPANY_NAME] [STREET ADDRESS] [CITY, COUNTRY] Re: [SUBJECT LINE] Regards, [SENDER_NAME] [SENDER_TITLE] · [BRAND_NAME] [BRAND_NAME] · [REGISTERED ADDRESS] · [REG. NO.] · [BRAND_WEBSITE.COM] 216mm / 2551px (with 3mm bleed) | 210mm / 2480px (A4 trim) 303mm / 3579px (bleed) · 297mm / 3508px (A4 trim) A2 — LETTERHEAD SPECIFICATIONS SPECIFICATION PRINT VALUE DIGITAL / FIGMA VALUE Document Size (trim) 210mm × 297mm (A4) 2480 × 3508 px With Bleed 216mm × 303mm 2551 × 3579 px Bleed 3mm all sides N/A Margin / Safe Zone 20mm all sides 236 px inset Header Height 30mm (top band) 354 px Footer Height 10mm (bottom band) 118 px Paper Weight 100–120 GSM (bond/offset) N/A Finish Uncoated / Silk N/A Resolution 300 DPI 72–144 PPI Export Format PDF/X-1a · Press-ready PDF · DOCX (editable) Color Profile CMYK — Pantone match sRGB FIGMA SETUP Frame: 2480 × 3508 px · Auto Layout with 236px padding · Header/Footer as separate Components · Use “[BRAND_NAME]” Text Style for instant swap via Ctrl+F Find & Replace. Export @1x = 300 DPI equivalent when frame is set to correct px size. A3 — Packaging Sleeve Standard product box sleeve · Unfolded dieline (flat view) · Front panel highlighted DIELINE FLAT VIEW (UNFOLDED) LEFT FLAP FRONT PANEL B [BRAND_NAME] [PRODUCT LINE] [PRODUCT DESCRIPTOR] [NET WEIGHT / VOLUME] [BRAND_NAME] · [PRODUCT] BACK PANEL Ingredients: [INGREDIENT_LIST] Best Before: [DATE_CODE] Batch: [BATCH_NO] [BARCODE] RIGHT FLAP TOP FLAP — TUCK / GLUE BOTTOM FLAP — TUCK / GLUE Front: [W]mm Spine: [D]mm Back: [W]mm Total dieline width: ([W]+[D]+[W]+[FLAPS])mm · Custom per product size PACKAGING SPEC QUICK REF Stock: 300–400 GSM board · Finish: Gloss/Matte lamination + Spot UV on logo · Bleed: 3mm · Safe Zone: 5mm from fold lines · Color: CMYK + Pantone spot · Resolution: 300 DPI · Format: AI/PDF + Dieline layer Figma: Separate artboards per panel (Front/Back/Spine/Flaps) · Use variants for different sizes · Export individual panels as PDF/X-1a · [BRAND_NAME] as shared Text Style SECTION B DIGITAL MATERIALS COLOR PROFILE: sRGB · RESOLUTION: 72–144 PPI · FORMAT: SVG / PNG / JPG B1 — Social Media Profiles Profile Picture + Cover/Banner · Platform-specific safe zones · Key platforms PROFILE PIC B 1080×1080px upload Displays at 170–400px LINKEDIN BANNER (1584×396px) PROFILE PIC ZONE [BRAND_NAME] [BRAND TAGLINE] [BRAND_NAME].com 1584px × 396px INSTAGRAM POST (1080×1080px) [BRAND_NAME] [POST HEADLINE] [SUBTEXT / CTA] @[BRAND_HANDLE] 1080×1080px · Also: 1080×1350px (portrait) B1 — SOCIAL MEDIA SPECS PLATFORM PROFILE PIC BANNER LinkedIn 400×400 1584×396 Instagram 320×320 None X / Twitter 400×400 1500×500 Facebook 170×170 851×315 YouTube 800×800 2560×1440 TikTok 200×200 None SAFE ZONE RULES Profile pic: Keep logo in center 80% LinkedIn: Left 76px blocked by profile pic YouTube: TV safe = center 1546×423px Upload: JPG or PNG · Max 5MB per platform Color Profile: sRGB (no CMYK on upload) Export: PNG-24 (transparency for logo) FIGMA TIP Create a Page per platform. Use Figma Components for [BRAND_NAME] mark so all platforms update simultaneously. B2 — Email Signature HTML email signature · Single view · 600px max-width standard SIGNATURE PREVIEW (600px wide) Email Client Simulation Best regards, B [FIRST_NAME] [LAST_NAME] [JOB_TITLE] · [DEPARTMENT] [BRAND_NAME] T: [+XX XXX XXX XXXX] · M: [+XX XXX XXX XXXX] [[email protected]] [BRAND_WEBSITE.COM] [BRAND_NAME] · [REGISTERED ADDRESS] in X IG This email and any attachments are confidential. If you received this in error, please notify [BRAND_NAME] immediately. [LEGAL_TEXT_PLACEHOLDER] 660px render width · 600px safe content max · Scales to mobile at 100% B2 — EMAIL SIGNATURE SPECIFICATIONS SPECIFICATION VALUE / GUIDELINE Max Width 600px (HTML table width) Logo Size (within sig) 100×40px @2x (200×80px file) Total Signature Height Max 200px (avoid scrolling) Font (HTML safe) Arial / Helvetica (web-safe fallbacks) Font Size Name: 14–16px · Body: 11–13px · Legal: 9px Image Format (logo) PNG-24 (transparent bg) · hosted URL Color Profile sRGB · Use HEX codes in HTML Coding Standard Inline CSS · HTML table layout · No JS Mobile Responsive width: 100% min-width: 280px FIGMA SETUP Frame: 600×200px · Use Figma “Inspect” mode to get inline CSS values. Export logo as PNG @2x. Use [BRAND_NAME] master component for consistency. B3 — Website Hero Banner Desktop + Mobile breakpoints · Above the fold · Full-width responsive DESKTOP (1440×800px viewport) https://[BRAND_WEBSITE.COM] B [BRAND_NAME] Home · About · Services · Work · Contact Get Started [BRAND CATEGORY LABEL] [HERO HEADLINE GOES HERE] [SUBHEADLINE — 1–2 sentences describing [BRAND_NAME]’s core value proposition] [PRIMARY CTA] [SECONDARY CTA] [HERO IMAGE / VIDEO] 2400×1600px · JPG @85% ↓ [SCROLL INDICATOR] 1440px width (desktop) · 1280px min-width · Safe content zone: max 1200px centered MOBILE (390×844px) B [BRAND_NAME] ≡ [CATEGORY] [HERO HEADLINE GOES HERE] [Subheadline text shortened for mobile] [HERO IMAGE] [PRIMARY CTA] 390×844px · 44px touch targets 390px (mobile) · 768px (tablet) DESKTOP 1440×800px · min-height 600px · Safe zone: 1200px max-width centered · 80px L/R padding Image: 2560×1440px · JPG @85% · sRGB · Lazy load below fold · WebP format preferred MOBILE 390×700px · 16px L/R padding · Stacked layout · Touch targets: min 44px Image: 828×1104px · JPG @85% · sRGB · Hero image may stack below copy on mobile FIGMA SETUP Frame: 1440×800 (desktop) · 390×844 (mobile) Use Figma Responsive Resize · [BRAND_NAME] component master SECTION C MASTER QUICK REFERENCE TABLE — ALL ASSETS ASSET VIEW SIZE (Print) SIZE (Digital / Figma) BLEED SAFE ZONE PAPER/STOCK RES / DPI COLOR FORMAT PRINT MATERIALS A1 Business Card [BRAND_NAME] · [PERSON] Front 86×54mm (trim) 92×57mm (bleed) 1016×638px (trim) 1083×672px (bleed) 3mm 4mm inset 350–400 GSM Matte / Gloss UV 300 DPI CMYK PDF/AI A1 Business Card [BRAND_NAME] · Logo only Back 86×54mm (trim) 92×57mm (bleed) 1016×638px (trim) 1083×672px (bleed) 3mm 4mm inset 350–400 GSM Spot UV on logo 300 DPI CMYK PDF/AI A2 Letterhead [BRAND_NAME] · A4 Front 210×297mm (A4) 216×303mm (bleed) 2480×3508px @300dpi 2551×3579px (bleed) 3mm 20mm margin 100–120 GSM Uncoated / Silk 300 DPI CMYK PDF/X-1a A3 Packaging Sleeve [BRAND_NAME] · Dieline Front [W]×[H]mm — custom Full dieline per product Custom per product px 1:1 scale at 300 DPI 3mm 5mm from folds 300–400 GSM Matte lam + Spot UV 300 DPI CMYK+Pantone AI+PDF A3 Packaging Sleeve [BRAND_NAME] · Back Back [W]×[H]mm — custom Same as front panel Matches front panel px Barcode: 1200×900px min 3mm 5mm from folds Same stock Matte preferred 300 DPI CMYK+Pantone AI+PDF DIGITAL MATERIALS B1 Profile Picture [BRAND_NAME] · All platforms Single N/A (digital only) 1080×1080px (upload) Displays: 170–400px N/A 80% center safe N/A 72 PPI sRGB PNG / JPG B1 LinkedIn Banner [BRAND_NAME] · Company Single N/A 1584×396px 4:1 ratio N/A L 76px blocked N/A 72 PPI sRGB JPG / PNG B1 Instagram Post [BRAND_NAME] · Feed Single N/A 1080×1080px (sq) 1080×1350 (portrait) N/A 60px all sides N/A 72 PPI sRGB JPG / PNG B2 Email Signature [BRAND_NAME] · HTML Single N/A 600px wide (max) 200px height (max) N/A 20px padding N/A (HTML) 72 PPI (logo) sRGB/HEX HTML+PNG B3 Hero Banner Desktop [BRAND_NAME] · Website Single N/A 1440×800px (frame) 2560×1440 (bg image) N/A 1200px max-width N/A 72–144 PPI sRGB SVG/WebP/JPG B3 Hero Banner Mobile [BRAND_NAME] · Website Single N/A 390×844px (frame) 828×1104 (bg image) N/A 16px padding N/A 144 PPI @2x sRGB WebP/JPG FIGMA PLUG-AND-PLAY CHECKLIST 1. Components Create a Master Component for [BRAND_NAME] logo mark. All artboards use the same instance — update once, updates everywhere. Ctrl+F → Replace [BRAND_NAME] 2. Auto Layout Set all card frames to Auto Layout. Padding = safe zone values above. Content scales without breaking margins when text length changes. Shift+A → Auto Layout 3. Frames & Pages Dedicate 1 Figma Page per asset category: Print / Digital / Social. Match Frame px to dimensions above for 1:1 export fidelity. F → New frame, set exact px 4. Export Settings Print: Export @1x as PDF (300 DPI equiv). Digital: Export @2x PNG for retina. Social: @1x JPG 80% quality. Web hero images: Export as WebP. Ctrl+Shift+E → Export panel CRITICAL COLOUR RULE PRINT → Always convert to CMYK before sending to printer. Pantone (PMS) match for brand colors. Request ICC profile from your print vendor (e.g., FOGRA39 for European offset printing). DIGITAL → Always use sRGB. Never upload CMYK files to social platforms — they convert incorrectly. In Figma: Edit → Document Settings → Color Space = sRGB. VISUAL IDENTITY SYSTEM · TECHNICAL SPECIFICATION GUIDE Plug-and-Play Framework for [BRAND_NAME] · All [BRAND_NAME] references are variable placeholders — swap via Figma Find & Replace (Ctrl+F) FIGMA VARIABLES — CTRL+F TO REPLACE ALL [BRAND_NAME] [TAGLINE] [EMAIL] [WEBSITE] [PHONE] [ADDRESS] [PERSON] [TITLE] Senior Brand Identity Designer · v1.0 · [YEAR] International Standard · ISO / FOGRA39 / WCAG 2.1 Compliant Prepared for: [CLIENT_NAME] · [DATE] 1 of 1 · All assets on single artboard
Share:

Posts

Products