---
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
<link rel="stylesheet" href="vendor/fonts.css"><link rel="stylesheet" href="kits/social/social.css">
<script src="vendor/three.min.js"></script><script src="kits/motion/sivali-mark.js"></script>
<script src="kits/motion/sivali-city.js"></script><script src="kits/motion/sivali-anatomy.js"></script>
<script src="kits/social/sivali-social.js"></script>
<script>
  const el = SivaliSocial.frame('anatomy', { format: 'post', lang: 'id', brand: 'cloud', data: { product: 'microcloud' } });
  document.body.appendChild(el); SivaliSocial.paintCity(el, 6, 1);   // draw the 3D after it is in the page
  const player = SivaliSocial.reel(document.getElementById('box'), SivaliSocial.anatomyReel('netra')); player.play();
</script>
```

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.