--- name: sivali-design-system description: Use for anything branded Sivali (Sivali Cloud Technology, Sivali Corp, PT Sivali Catur Lestari) - social posts, carousels, stories, reels, videos, podcast art, partner co-branding, web sections, decks and documents. Holds the tokens, brand rules, logos, motion bumpers and a template engine that renders posts to PNG and reels to MP4. --- # Sivali Design System This folder is the complete Sivali Design System, offline. Everything it needs (fonts, three.js, React) is in `vendor/`. Read this file first, then the file for the job: | Job | Read | Use | | --- | --- | --- | | Any Sivali deliverable | this file, `README.md` (brand book) | `tokens.json` / `tokens.css`, `assets/Logos/` | | Social post, carousel, story, reel | `social-media-kit.md`, `docs/templates.md` | `kits/social/`, `tools/render.js` | | Tech explainer ("anatomy") posts | `components/SocialAnatomy/README.md` | templates `anatomy`, `anatomyslide` | | Post with a vendor partner | `components/SocialCobrand/README.md` | templates `cbdist`, `cbwebinar`, `cbspot` | | Holiday greeting | `components/SocialHoliday/README.md` | template `holiday` | | Video, podcast | `components/VideoTemplate/README.md`, `components/Podcast/README.md` | `v*` and `p*` templates, `assets/Motion/` bumpers | | Website section (Sivali Corp site) | `README.md` section "Sivali Corp website", `components/Corp*/`, `components/*/README.md` | `kits/corp/corp.css`, `kits/motion/sivali-mark.js` | | sivali.co UI (React) | `components/core/*.prompt.md`, `components/index.d.ts` | `components/bundle.js` (`window.SivaliDesignSystem_43a40c`), `ui_kits/website/` | | Slides or documents | this file (rules), `README.md` | tokens, logos, Ubuntu type | Open `index.html` in a browser for a visual catalogue of every component. Serve the folder over HTTP (`python3 -m http.server` in this folder, then http://localhost:8000) rather than opening files directly: browsers block fonts and the JSX UI kit on `file://`. ## The company, in one paragraph Sivali Cloud Technology (PT Sivali Catur Lestari, Grand Slipi Tower, Jakarta) is an open-source cloud technology enabler and Canonical-authorised distributor for Indonesia and Asia-Pacific. Its vendor portfolio is Canonical (Ubuntu Pro, OpenStack, Kubernetes, Ceph, MicroCloud), Trilio and Cloudbase Coriolis, and it co-brands with partners including Nextcloud, Cast AI and Netra Runtime. It sells through system integrators, MSPs, ISPs, data centres, telcos and education partners. Sivali Corp is the holding (Sivali Cloud Technology, CloudinAsia, ORCA). ORCA turns CPU, GPU and data-centre capacity into IaaS, GPUaaS and AI inference services: Orcastra orchestrates the capacity, ORCA Hub sells it. ## Non-negotiable brand rules 1. **Colours.** Indigo `#39399B` is the brand; mint `#ADFCB9` is the only accent; teal `#015B6A` is text on mint. Grounds: night `#121212`, indigo `#39399B`, paper (white to `#F3F4FB`), mint for careers only. Full scales in `tokens.json`. 2. **On indigo and dark grounds every text is white**, secondary text and links included. No grey or lavender text on indigo. Mint only for eyebrows, icons and one accent. 3. **Logo by ground.** White mark on indigo, dark and photo grounds (`assets/Logos/sivali-mark-white.svg`); indigo mark on white and light grounds (`sivali-mark-indigo.svg`). Never recolour, crop, stretch or redraw it. The wordmark is set in Ubuntu Medium, uppercase, tracked 0.18em: `SIVALI CORP`, or `SIVALI` over `CLOUD TECHNOLOGY`. 4. **Type.** Ubuntu for headings and, on the Sivali Corp site and social kit, for everything (Light 300 for leads); Ubuntu Mono for numbers, indexes and footers; Open Sans for body copy on sivali.co. 5. **Eyebrows and chips are plain tracked uppercase text.** No dot markers, no bars. 6. **No left-border accent bars** on cards or text blocks. Use cards with fade gradients, dot grids and real icons (Lucide, 1.5 to 1.75px stroke). 7. **White grounds are never flat**: fading dot grid, soft lavender and mint glows, the Jakarta line-art skyline or the large watermark mark. 8. **Co-branding uses only the partner's colours.** No Sivali indigo, no mint, no white plates behind logos. Sivali stays recognisable through the white Sivali lockup, Ubuntu type, the layout, the dotted orbit and the skyline drawn in the partner's colours. Both logos sit on the ground, split by a thin white rule. 9. **Never draw or approximate another company's logo.** Use the files in `kits/logos/`. Missing today: Trilio, Cast AI, Netra Runtime, Indosat, XLSmart, Mastersystem; leave the dashed slot or pass the official file as `data.logo`, and say so. 10. **The Indonesian flag is red on top, white below.** Always. 11. **Bumpers show the lockup only**: no tagline, no eyebrow. Open videos with the intro bumper, close with the outro. 12. **Footer of a social frame**: `sivali.co` in a glass pill with an arrow, and opposite it a date, hashtag or page count in Ubuntu Mono in the ink colour. No hairline, no grey. ## Writing rules - Bilingual: Bahasa Indonesia first for local channels, English for LinkedIn and regional audiences. Never mix languages inside one frame. - Sound like a person speaking: formal, warm, specific. "Kami/we" for Sivali, "Anda/you" for the reader. Sentence-case headlines. - No em-dashes (use a colon, comma or middle dot `·`), no emoji, no exclamation marks, no hype words ("revolusioner", "game changer"). - Terminology: "Canonical" for the company and product family (Canonical OpenStack, Canonical Kubernetes, Canonical MicroCloud); "Ubuntu" only for the OS and OS-branded products (Ubuntu Pro, Ubuntu Server, Ubuntu LTS). - Numbers only when verified and current; never invent statistics, customers or quotes. Sample names in templates (PT Nama Mitra, Nama Pembicara) are placeholders: replace them before publishing. - Customer-facing material is evidence-led, not salesy. Presentation slides carry no source notes, draft notes or presenter coaching. - One message per post; headline at most three lines in 4:5, two in 1:1. ## Making social content The engine is plain JavaScript: `kits/social/sivali-social.js` + `kits/social/social.css`, with `kits/motion/sivali-mark.js`, and for 3D `vendor/three.min.js` + `kits/motion/sivali-city.js` + `kits/motion/sivali-anatomy.js`. Formats: `post` 1080x1350 (4:5), `square` 1080x1080, `story` and `reel` 1080x1920 (safe area: 200px top, 280px bottom), `landscape` 1920x1080 (video only). **Fastest path: the renderer** (Node 18+, `npm i playwright && npx playwright install chromium`, ffmpeg for MP4): ```bash node tools/render.js list # templates, anatomy products, partners, holidays node tools/render.js png --template launch --format post --lang id \ --data '{"name":"Nama Produk","line":"Satu kalimat manfaat."}' --out out/launch.png node tools/render.js png --template anatomy --format story --lang en --data '{"product":"kubernetes"}' --out out/k8s-story.png node tools/render.js png --template anatomyslide --data '{"product":"trilio","n":2}' --out out/trilio-2.png node tools/render.js png --template cbspot --format square --data '{"partner":"nextcloud"}' --out out/nextcloud.png node tools/render.js png --template holiday --data '{"occasion":"imlek"}' --out out/imlek.png node tools/render.js mp4 --reel anatomy:openstack --out out/openstack-reel.mp4 node tools/render.js mp4 --reel cobrand:canonical --out out/canonical-reel.mp4 node tools/render.js mp4 --reel '{"format":"reel","scenes":[{"id":"poster","dur":4.5},{"id":"countdown","dur":3.5,"data":{"n":"3"}}]}' --out out/event.mp4 ``` Every field of every template, with its sample value, is in `docs/templates.md`. Fields you leave out keep the sample, so always pass real content. A field may be `"text"` or `{"id":"...","en":"..."}`. Image slots: `logo` (most templates), `logoA`/`logoB` (partnership), `photo` (speaker, quote, guest), `hostPhoto`/`guestPhoto` (podcast episode); a path relative to `tools/` or a URL. An empty slot shows a dashed placeholder: never deliver a post with one. **In a page of your own:** ```html ``` API: `frame(id, {format, lang, brand: 'corp'|'cloud', theme, data, t})`, `paintCity(el, t, scale)`, `gallery(root, {format, lang, items, cols, width, animate})`, `reel(root, {format, scenes:[{id, dur, data}], lang, brand, background, bumperTheme})` returning `{duration, seek(t), play(), stop()}`, `anatomyReel(product)`, `coReel(partner)`, plus the data tables `TEMPLATES`, `ANATOMY`, `PARTNERS`, `HOLIDAYS`. **Picking a template.** Partnership, new partner, new vendor, product launch, event poster, speaker, countdown, event recap, holiday, tips carousel, leadership quote, hiring, milestone, certification, service notice, press release, video supers, podcast, co-brand, tech anatomy. The table "Templates by need" in `social-media-kit.md` maps each need to an id. **Adding a tech explainer.** Add an entry to `ANATOMY` in `kits/social/sivali-social.js`: a plain question, a two-line lead, four layers top to bottom as `[kind, title, one line]` (kinds in `components/SocialAnatomy/README.md`), an everyday comparison, and one checked fact or `null`. ## Website and UI - Sivali Corp site sections: `kits/corp/corp.css` (`sc-*` classes) and the live previews in `components/Corp*`, `UnitCard`, `BalanceRow`, `FlowSteps`, `PartnerNetwork`, `TrustPanels`, `NewsCard`, `UnitHero`, `OfferGrid`, `CtaSplit`, `StatBar`. Each README gives the exact sizes, colours and behaviour; copy from the preview markup. - The animated mark: `SivaliMark.mount(canvas, {...})`, `SivaliMark.svg({ink, size})`, `SivaliMark.swirl(canvas)`, `SivaliMark.bumper(ctx, W, H, t, {mode:'intro'|'outro', theme})`. Respect `prefers-reduced-motion` with one still frame. - sivali.co React components (Button, Card, Eyebrow, Footer, Header, Icon, Input, Select, Tag): load `tokens.css`, `components/bundle.css`, React 18 (`vendor/`), then `components/bundle.js`; read `components/index.d.ts` for props. - Tokens: `tokens.json` (source, with a usage note per token) and `tokens.css` (CSS variables). Use the semantic names (`surface-brand`, `text-inverse`, `action-primary`, `action-accent`) rather than raw hex where you can. ## Motion files `assets/Motion/` holds rendered MP4s: intro and outro bumpers (16:9, 9:16, 1:1; night, indigo, light), example reels (launch, event, podcast, interview, webinar), co-brand reels (Canonical, Nextcloud, Coriolis, Cast AI) and anatomy reels (OpenStack, Netra Runtime). Example reels carry placeholder copy: re-render with real content before posting. ## Before you deliver - Render it and look at it. Check: text on indigo is white, the logo matches the ground, no placeholder text or dashed slot is left, nothing overlaps, the headline fits its line limit, both language versions read naturally. - Check every number and claim against the vendor's own material. Keep the vendor's product names exact. - For co-branded work: partner colours only, the partner's official logo file, and joint content approved by the partner's marketing team before it goes out. ## Licences of bundled files Ubuntu and Ubuntu Mono fonts: Ubuntu Font Licence 1.0. Open Sans: SIL Open Font Licence 1.1. three.js r128, React 18.3.1, Babel standalone 7.29.0: MIT. Texts in `vendor/licenses/`. Partner and client logos belong to their owners and are used only to show the relationship. Package built 12 November 2026 from version 22 of the Sivali Design System. To set up the renderer once: `npm run setup` (installs Playwright and Chromium), and install ffmpeg for MP4. --- # Sivali Design System Design system for **Sivali Cloud Technology** (PT Sivali Catur Lestari, Jakarta) — open-source cloud technology enabler/distributor for Indonesia & Asia-Pacific. Two tracks: (1) **Current** brand as defined in the Figma design system, and (2) **Modernisation ("peremajaan")** proposal. ## Sources - Brand guidelines page: https://sivali.co/en/brand-guidelines/ ✅ read - Full brand guide (Drive folder): https://drive.google.com/drive/folders/1CsA4HQQyPS7S_vtw4UWRA2UKbwhkLz3p — reached via Drive search ✅ - "Design System - Sivali.pdf" (Color page) + "Design System - Sivali (1).pdf" (Typography page) — Figma PDF exports of the design-system file; values below come from them. - "Sivali Logo References" (Slides): creative brief — Yin-Yang style, represents SCL, futuristic/high-tech, cloud accents. - Logo folders "Logo Sivali SVG All" / "SVG V.2": Light, Dark, Circle Light/Dark SVGs (mark = indigo #39399B circle with S-swoosh cutout + dotted orbit ring; dark variant fill #DCDCED). - Figma design system: https://www.figma.com/design/iSE1eIvFpVg0XTa5PJLf4B/Design-System---Sivali?node-id=3-2 — no Figma access this session ❌ (only Color + Typography pages known via PDF; **component inventory unknown**). - No product codebase provided. Surfaces: sivali.co marketing site (WordPress, EN/ID), cloud.sivali.co client portal (WHMCS ticketing). ## Company context - Positioning: "Cloud Technology Enabler", "Your Trusted Partner in Cloud Solutions", "Your Cloud, Your Way". Tagline: "Innovate. Integrate. Inspire." - Services: Consultation, Implementation, Maintenance Support, Managed Service, Migration. - Vendors: Canonical (Ubuntu), Coriolis, Trilio, Nextcloud. Partner segments: SIs, MSPs, Telco, Education. - Values acronym SIVALI: Spirit, Integrity, Vision, Action, Loyalty, Innovation. ## Brand tokens (from Figma PDF export) Black #121212 · White #FFFFFF Neutral 700→50: #201F24 #39383C #545356 #707072 #8E8D90 #ADADAE #DBDBDC #F5F5F5 Primary (Indigo) 700→50: #393987 #39399B(600, brand) #4848BA #5C5CE8 #7F7FF4 #95A5FF #C7CFFF #EBEEFF Auxiliary ("Cyan", actually mint) 700→50: #015B6A #ADFCB9(600, brand) #C8FFD0 #D5FFDB #E3FFE7 #EBFFEE #F1FFF3 #F5FFF7 Type: Headings **Ubuntu**, body **Open Sans**; weights Regular + Medium. Scale (size/line-height): H1 40/48 · H2 32/40 · H3 24/32 · Title 20/28 · Subtitle 18/24 · Body1 16/24 · Body2 14/22 · Caption 12/18. ## Logo assets Direct download of the SVGs is blocked from this environment (sivali.co & Drive binary both truncated). Cards reference the public URLs on sivali.co: - Mark light: https://sivali.co/wp-content/uploads/2025/09/Logo-Sivali-Circle-Light-Version-1.svg - Mark dark: https://sivali.co/wp-content/uploads/2025/09/Logo-Sivali-Circle-Dark-Version-3.svg - Wordmark light: https://sivali.co/wp-content/uploads/2025/09/Logo-Sivali-Light-Version.svg - Wordmark dark: https://sivali.co/wp-content/uploads/2025/09/Logo-Sivali-Dark-Version-3.svg - Alt: https://sivali.co/wp-content/uploads/2025/09/Logo-Sivali-Light-Version-1.svg - Legacy header PNG: https://sivali.co/wp-content/uploads/2023/10/Logo-SCL-Dark.png **TODO: user to upload the SVGs into `assets/` so they ship offline.** The logo **mark** now ships offline: `assets/Logos/` holds SVGs generated from the exact path and orbit dots of the Sivali Corp website, and `kits/motion/sivali-mark.js` draws it live. The wordmark is set in type (Ubuntu Medium, uppercase, tracked 0.18em) until the original wordmark SVGs are uploaded. ## Content fundamentals - Bilingual EN/ID; formal-professional B2B voice. "We"/"our" for Sivali, "you/your" for partners & customers ("Your Cloud, Your Way"). - Sentence-case headings; ALL-CAPS 12px eyebrow labels ("WHY TO CHOOSE US", "OUR VENDORS"). - Benefit-led triads and short noun phrases; verbs: Innovate/Integrate/Inspire, Consult/Implement/Migrate. - No emoji, no exclamation marks. Numbers as trust signals ("since 1999", "24/7 Support"). ## Visual foundations (current) - Colour: Indigo dominant on white; mint (#ADFCB9) as the single accent (CTAs, highlights). Deep teal #015B6A is the only dark aux shade — use for text on mint. - Type: Ubuntu headings (rounded, humanist — echoes the Canonical/Ubuntu partnership), Open Sans body. Only Regular/Medium — no bold shouting. - Backgrounds: flat white / Neutral-50; indigo section bands; photo hero with indigo protection overlay. No textures, no gradients. - Corners: 8px on controls, 12–16px on cards (inferred; Figma radius tokens not exported). - Shadows: none/very light (0 1px 2px rgba(18,18,18,.06)); borders Neutral-200 #DBDBDC. - Motion: subtle 150–200ms ease-out fades; hover darkens primary one step (600→500 lighter on dark bg, 600→700 on light). - Imagery: cool-toned tech/cloud photography, indigo duotone overlays. - Iconography: no proprietary set found — use **Lucide** (1.5px stroke) via CDN; substitution flagged. - Dotted orbit ring from the logo is the one brand motif — may be used as a decorative device. ## Iconography - sivali.co uses **outline stroke icons, 1.5px, #333** (inline SVG per partner card; service/certification icons follow the same theme set). Files could not be pulled from the site (CDN blocks direct fetch) — **substituted with Lucide** (stroke 1.5px) via CDN `https://unpkg.com/lucide@latest`; mapping in `components/core/Icon.jsx`. Flagged for replacement when originals are uploaded to `assets/icons/`. - Chevron "›" after link labels ("ABYRES SDN BHD ›"); no emoji; no unicode glyphs beyond › and ✕ (menu close). - Social: Instagram, Facebook, LinkedIn, YouTube — brand glyphs via Lucide/Simple Icons. ## Site structure (sivali.co, Sept 2026) - **Header**: white bar, legacy PNG logo left, nav Home · Our Vendors ▾ · Company ▾ · Contact · Privacy Policy; right CTA "Find Partners". Mega-menu with 2-line link cards (title + description). - **Home**: hero (photo, H1 "Sivali Cloud Technology", bold lead "With over 25 years of experience…", button "Discover more") → eyebrow "WHY TO CHOOSE US" + 3 benefit cards → "WHAT CAN WE DO FOR YOU / We are Cloud Technology Enabler" + 5 service cards (Consultation, Implementation, Maintenance Support, Managed Service, Migration) → "WE ARE CERTIFIED CLOUD ENGINEER" logo row → "Our Vendors" 4 cards → CTA band "We are part of Digital Transformation since 1999" + 2 buttons. - **About**: title, tagline, VALUES paragraph, 6 value tiles (big initial + name + line), team grid (photo, name, role). - **Partners**: intro, industry filter tags (Telco, SI, MSP, Education), partner list (logo, industry tag, "Name ›", description), "Can't find your company?" → Partner Registration. - **Our Vendors**: 4 vendor cards (name + one-liner), Value Added Services (5), "Ask about our product" form with topic select (Private Cloud … ZStack Cloud, Other). - **Footer**: logo, "Find us here" social row, Company / Vendors link columns, Contact (24/7 Support, address, email), copyright. ## Index - `README.md` — this guide · `SKILL.md` (agent entry) · `styles.css` → `tokens/{colors,typography,spacing,modern}.css` - `guidelines/` — foundation cards (Colors ×4, Type ×3, Spacing ×3, Brand ×4) - `components//` — `preview.html` specimen - `ui_kits/website/` — sivali.co recreation (Home, About, Partners, Vendors), interactive - `components/Cover/preview.html` — project tile ## Components Standard set (no Figma component inventory was readable — see Sources). Each has `.jsx` in `components/core/`, and `README.md`, `.d.ts`, `preview.html` in `components//`: - Button — primary / accent / secondary / ghost / inverse; sm / md / lg - Card — default / subtle / brand; icon tile, eyebrow, linked title with › - Eyebrow — ALL-CAPS 12px section label - Footer — four-column indigo footer - Header — 72px top bar with nav + CTA - Icon — Lucide-style outline glyphs (substitute, see Iconography) - Input — text field / textarea with label, hint, error - Select — native select styled to Input - Tag — pill label / filter chip Intentional additions: Icon (glyph wrapper, no brand icon files available), Eyebrow (recurring site pattern). ## Modernisation proposal (peremajaan) See `guidelines/brand-modern.html` and the "Modern" toggle in components/cards. ## Using this system - Load `tokens.css`, then `components/bundle.css`, then React 18 and `components/bundle.js`; mount components from `window.SivaliDesignSystem_43a40c`. - Two themes: `current` is the live brand and the fallback; `modern` is the peremajaan proposal, opted into with `data-theme="modern"` on any container. In `modern`, `components/bundle.css` also raises `radius-md`, `radius-lg`, `radius-xl` and `radius-2xl` and adds `--gradient-hero`, `--glass` and `--glass-blur`. - Set headings in `h1`, `h2`, `h3`, `title` or `subtitle` with `text-heading`; body copy in `body1` or `body2` with `text-body`; captions and hints in `caption` with `text-muted`. Every one of these reads on `surface-page`, `surface-subtle` and `surface-card`, except `text-muted` on `surface-subtle` in `modern` (4.4:1): keep muted text off that ground there. - Fill the primary action with `action-primary`, label in `text-inverse`, hover `action-primary-hover`. Mint is the single accent: `action-accent` or `surface-accent` for one hero CTA per view, label in `text-on-accent`; never set `aux-600` as text on white. - On indigo (`surface-brand`, `primary-700`) every text is white (`text-inverse`), secondary text and links included; eyebrows and icons in `aux-600`. No grey or lavender (`primary-100`) text on indigo. - **Logo by ground, always**: on indigo, teal, `#121212` and photography use the white mark and white wordmark (`assets/Logos/sivali-mark-white.svg`); on white and light grounds use the indigo mark (`sivali-mark-indigo.svg`). Never the indigo logo on indigo, never a grey logo. - `success` and `danger` differ in hue more than in lightness: always pair a status colour with a word or an icon. `success` (4.2:1) and `warning` (3.6:1) are for text at 24px and up, bold 19px and up, or icons. - Kept from the source below 3:1: `border-strong` as the input border (2.2:1 on white) and `--focus-ring` (a `primary-100` ring, 1.5:1 on white). Do not rely on either alone to show a control or focus. - `components/bundle.css` holds the values `tokens.json` has no family for: the type-scale variables `--h1-size` to `--caption-line` (they mirror the type styles: change both together), `--weight-regular`, `--weight-medium`, `--eyebrow-tracking`, `--control-h-sm`/`md`/`lg`, `--container`, `--gutter`, the motion values `--ease-out` and `--dur-*`, and `--focus-ring`. ## Sivali Corp website (holding, v2) The group site for Sivali Corp (Sivali Cloud Technology, CloudinAsia, ORCA), from the "Revamp Sivali Holding Website" project, page *Sivali Corp v2*. It is a sibling of the sivali.co track above and differs on purpose: - **Type**: Ubuntu for everything (Light 300 for leads, Regular, Medium for headings, Bold only for the lead-in clause), Ubuntu Mono for indexes like `01 / Distribution`. - **Grounds**: white, `#F5F5F5`, night `#121212`, indigo `#39399B` bands, mint `#ADFCB9` only in the closing CTA half. Radius 20px on cards, 10px on buttons, 999px on pills. - **The yin-yang**: the logo's two halves drive layout. Light-dark-light card rows, BalanceRow halves joined by a mint knob, the split hero with 280px quarter-circle corners, the CTA halves biting into each other with a 160px corner. - **Motion**: the animated mark in the hero (orbit dots turning, pushed by the pointer, the lockup flying into the header on scroll) and the dotted orbit swirl on cards that brightens on hover. Respect `prefers-reduced-motion`: one still frame. - **Voice**: same as above, plus the group framing: "three businesses, one open cloud ecosystem"; verbs Inform, Distribute, Build. Components (group *Website*, each with `README.md` and a live `preview.html`): CorpHeader, CorpHero, StatBar, UnitCard, BalanceRow, FlowSteps, PartnerNetwork, TrustPanels, NewsCard, UnitHero, OfferGrid, CtaSplit, CorpFooter. Shared styles in `kits/corp/corp.css` (classes `sc-*`). Partner figures in the previews match the site's partner data (60 partners: Indonesia 55, Malaysia 3, Singapore 1, Vietnam 1; 21 SI, 14 MSP, 2 Telco, 2 Education). News headlines are placeholders. ## Motion: logo mark and bumper - `kits/motion/sivali-mark.js` exposes `window.SivaliMark`: `svg()`, `draw()`, `mount()`, `bumper()`, `swirl()`, `lockup()`. No dependencies. - **SivaliMark** (group *Brand*) shows the live mark; **Bumper** (group *Motion*) plays the intro and outro (lockup only: no tagline, no eyebrow) and links the rendered MP4s in `assets/Motion/` (16:9, 9:16, 1:1; night, indigo and light grounds). - Open every video with the intro bumper and close with the outro. Never speed-ramp, recolour or crop into the mark. ## Social media kit Templates for enterprise social channels, bilingual (Bahasa Indonesia and English), under either the Sivali Corp or the Sivali Cloud Technology lockup. Engine: `kits/social/sivali-social.js` + `kits/social/social.css` (needs `sivali-mark.js`). Full guide: `social-media-kit.md`. | Component | Formats | Templates | | --- | --- | --- | | SocialPost | 4:5 1080x1350, 1:1 1080x1080 | partnership, newpartner, newvendor, launch, poster, speaker, countdown, recap, tipscover, tipsslide, quote, hiring, milestone, cert, notice, press | | SocialStory | 9:16 1080x1920 | the same set plus holiday, with story safe areas | | SocialReel | 9:16 1080x1920, animated | scenes from any template between the intro and outro bumper | | VideoTemplate | 16:9 1920x1080 and 9:16 1080x1920 | vtitle, vcompany (company name), vlower (speaker name), vquote (soundbite), vchapter, vend | | Podcast | 1:1, 4:5, 9:16, 16:9 | pcover, pepisode, pguest, paudiogram (animated waveform), pthumb | | SocialCobrand | 4:5, 1:1, 9:16 | cbdist (authorised distributor), cbwebinar (joint webinar), cbspot (product spotlight) for Canonical, Trilio, Nextcloud, Coriolis, Cast AI, Netra Runtime: partner colours only, Sivali kept by the white lockup, Ubuntu, orbit and skyline in partner colours | | SocialAnatomy | 4:5, 1:1, 9:16, reel | anatomy (cover), anatomyslide (one layer per carousel slide): Cloud, Canonical OpenStack, Canonical Kubernetes, VM migration (Coriolis), Canonical MicroCloud, Orcastra, ORCA Hub, Ubuntu Pro, Netra Runtime, Cast AI, Trilio, Nextcloud Hub, explained in four layers for a general audience over a live three.js stack | | SocialHoliday | 4:5, 1:1, 9:16 | Editions with their own colour pair: Lebaran (Idul Fitri), Iduladha, Natal, Tahun Baru, Imlek, Deepavali, Nyepi, Waisak, HUT RI | **Jakarta skyline.** `kits/motion/sivali-city.js` (needs three.js r128 from cdnjs) renders the 3D line-art Jakarta from the website hero (Monas, towers, data arcs with travelling pulses) into any canvas, in `night`, `indigo`, `paper` and `mint` palettes. The social kit lays it along the bottom of every white (paper) post, every story and reel (animated), and selected dark posts, fading in from the top. White grounds also get a fading dot grid and soft lavender and mint glows, so no frame is flat white. **Anatomy stacks.** `kits/motion/sivali-anatomy.js` (three.js r128) draws exploded line-art stacks, one slab per layer with its own 3D object (servers, GPUs, VMs, containers, storage, network, shield, API tunnel and more), travelling data pulses and leader lines to the captions. Used by SocialAnatomy. **Footer.** Every social frame ends with the web address in a glass pill with an arrow (mint on dark and indigo, indigo on white) and, opposite it, a date, hashtag or page count in Ubuntu Mono in the ink colour. No hairline, no grey text. **Logos and flags in the kit.** `kits/logos/` holds vector vendor and client logos from the Revamp Sivali.co Figma (Canonical, Coriolis, Fujitsu, Telkom Group, Mitsubishi Motors, Bank Maspion); `kits/flags/` holds country flags (id, my, sg, vn). Logos for Trilio, Cast AI, Netra Runtime, Indosat, XLSmart and Mastersystem still need their official files.