# Social media kit

Templates for Sivali Corp and its businesses on Instagram, LinkedIn, Facebook, TikTok and YouTube. Every template exists in Bahasa Indonesia and English and can carry either the Sivali Corp lockup or the Sivali Cloud Technology lockup.

## Formats

| Format | Size | Where | Safe area |
| --- | --- | --- | --- |
| `post` | 1080x1350 (4:5) | Instagram and Facebook feed, LinkedIn | 72px top, 80px sides, 64px bottom |
| `square` | 1080x1080 (1:1) | LinkedIn, X, carousel | 64px / 72px / 56px; lead paragraphs and checklists hide |
| `story` | 1080x1920 (9:16) | Instagram and Facebook Stories | 200px top, 88px sides, 280px bottom for app UI and link stickers |
| `reel` | 1080x1920 (9:16), animated | Reels, TikTok, YouTube Shorts | as story; captions above the bottom 280px |
| `landscape` | 1920x1080 (16:9) | YouTube, webinar recordings, event screens | 88px top, 120px sides |

## Templates by need

| Need | Template id | Notes |
| --- | --- | --- |
| Pengumuman kerja sama / partnership | `partnership` | two logos on white plates joined by the mint knob on the indigo half; headline names both parties |
| Partner baru / new partner | `newpartner` | partner logo, segment, city, vendor tags; link to the directory |
| Vendor baru / new vendor | `newvendor` | vendor logo on a white plate, one-line value, three checks |
| Produk baru / product launch | `launch` | glowing mark in the orbit, product name, three feature tiles, one button |
| Poster event | `poster` | series eyebrow, title, date, time, place, up to two speakers, register button |
| Kartu pembicara / speaker | `speaker` | portrait in a mint ring, name, role, session |
| Hitung mundur / countdown | `countdown` | one big number (days, or a date like 01.12) inside a mint orbit |
| Dokumentasi event / recap | `recap` | three photo slots, a thank-you line, three real numbers |
| Ucapan hari raya / greetings | `holiday` | editions with their own colour pair: idulfitri (Lebaran), iduladha, natal, tahunbaru, imlek, deepavali, nyepi, waisak, hutri (the flag is always red on top, white below) |
| Tips & trik | `tipscover`, `tipsslide` | carousel: cover with the big number, then one tip per slide with an optional code block |
| Perspektif pimpinan / quote | `quote` | a real, approved quote with the person's name and title |
| Karier / hiring | `hiring` | role, location tags, three requirements, apply link; mint ground |
| Pencapaian / milestone | `milestone` | one verified number, a label, two supporting facts |
| Sertifikasi / certification | `cert` | badge, achievement line, team portraits |
| Pemberitahuan layanan / notice | `notice` | date, time, impact, support table; formal tone |
| Siaran pers / press release | `press` | dateline, headline, summary, link to the newsroom |
| Video | `vtitle`, `vcompany`, `vlower`, `vquote`, `vchapter`, `vend` | 16:9 and 9:16; company name, speaker name and soundbite supers |
| Co-branding dengan vendor | `cbdist`, `cbwebinar`, `cbspot` | `data.partner`: canonical, trilio, nextcloud, coriolis, castai, netra. Partner colours only (no Sivali indigo or mint); the white Sivali lockup, Ubuntu type, the orbit and the skyline in the partner's colours keep Sivali recognisable. See SocialCobrand |
| Podcast | `pcover`, `pepisode`, `pguest`, `paudiogram`, `pthumb` | show cover, episode, guest, animated audiogram, YouTube thumbnail |
| Anatomi teknologi / tech explainer | `anatomy`, `anatomyslide` | `data.product`: cloud, openstack, kubernetes, migrasi, microcloud, orcastra, orcahub, ubuntupro, netra, castai, trilio, nextcloud. Plain question, four numbered layers over a live 3D stack, one checked fact, an everyday comparison. Carousel: cover then one slide per layer (`data.n`). Reel: `anatomyReel(product)`. See SocialAnatomy |

## Using the engine

```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=Ubuntu+Mono&display=swap">
<link rel="stylesheet" href="kits/social/social.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="kits/motion/sivali-mark.js"></script>
<script src="kits/motion/sivali-city.js"></script>
<script src="kits/social/sivali-social.js"></script>
<script>
  const post = SivaliSocial.frame('partnership', {
    format: 'post', lang: 'id', brand: 'cloud',
    data: { b: 'PT Contoh Mitra', logoB: 'mitra.svg', title: 'Sivali Cloud Technology dan PT Contoh Mitra menjalin kerja sama.' }
  });
  document.body.append(post);              // native 1080x1350, export as PNG at 1x
  const reel = SivaliSocial.reel(el, { format: 'reel', lang: 'en', scenes: [{ id: 'launch', dur: 4.5 }, { id: 'countdown', dur: 3.5 }] });
  reel.play();                               // or reel.seek(t) frame by frame to render MP4
</script>
```

Every `data` key overrides the template's sample copy; a value may be a string or `{ id, en }`. Image keys (`logo`, `logoA`, `logoB`, `photo`) fill the dashed slots; an empty slot stays dashed so it cannot ship by accident.

## Writing

- One message per post. The headline carries it: three lines at most in 4:5, two in 1:1.
- Formal, warm, specific. Name the partner, the vendor, the date. No emoji, no exclamation marks, no hype words ("revolusioner", "game changer").
- Numbers only when verified and current. Sample figures and names in the templates are placeholders.
- Bahasa Indonesia first for local channels, English for LinkedIn and regional audiences; never mix languages inside one frame.
- Hashtags in the caption, not in the artwork, except the series tag on event posters.
- Terminology: "Canonical" for the company and product family; "Ubuntu" only for the OS and OS-branded products.

## Look

- Grounds: night `#121212`, indigo `#39399B`, paper `#F5F5F5`, mint `#ADFCB9` (careers only). Alternate grounds across a feed grid so neighbours differ.
- The dotted orbit ring and the Jakarta line-art skyline (`kits/motion/sivali-city.js`) are the decorations, with soft glows. White grounds always carry the skyline or the fading dot grid: never a flat white frame. No stock gradients, no clip art, no left-border accent bars.
- On indigo every text is white. The logo is white on indigo and dark grounds, indigo on white and light grounds.
- Lockup top-left at 60px, category chip top-right. The footer carries `sivali.co` in a glass pill with an arrow and, opposite, a date, hashtag or page count in Ubuntu Mono; no rule, no grey. Chips and eyebrows are plain tracked text: no dots.
- Partner and vendor logos sit on white plates in their own colours; never recolour another company's mark.
- Photos: real people and real events, cool-toned; avoid stock handshakes.

## Motion

- Open with the intro bumper (2.6s inside reels, 4s standalone), close with the outro (3.2s inside reels, 5s standalone). The bumper shows the lockup only: no tagline, no eyebrow.
- In stories and reels the skyline animates: camera sway, travelling pulses, turning Monas flame.
- Inside a scene, elements rise 46px and fade in over 0.7s, 0.12s apart; scenes cross-fade over 0.4s; orbit rings turn slowly.
- 3.5 to 5s per scene, 15 to 30s per reel. Instrumental music only, under speech.