# Sivali Design System · llms-full.txt Sumber: https://design.sivali.co. Gabungan dokumen paket tim desain, apa adanya. --- # Agent instructions This folder is the Sivali Design System (Sivali Cloud Technology / Sivali Corp). Before you design, write or render anything for Sivali: 1. Read `SKILL.md`: brand rules, writing rules, which file to read for each job, and how to render posts and reels. 2. Read `README.md`, the brand book. 3. For social media, read `social-media-kit.md` and `docs/templates.md`, then render with `node tools/render.js`. Treat the rules in `SKILL.md` as hard constraints: white text and the white logo on indigo, no dot markers on eyebrows or chips, partner colours only in co-branded work, no em-dashes, "Canonical" for the product family and "Ubuntu" only for the OS. Never redraw a logo; use the files in `assets/Logos/` and `kits/logos/`. --- --- 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. --- # 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 ``` 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. --- # Template reference Generated from `kits/social/sivali-social.js`. Every field is optional: what you leave out keeps the sample value shown here. A field can be a plain string or `{ "id": "...", "en": "..." }` for both languages. Arrays keep their shape. ## Announcements (announce) ### `partnership`: Partnership announcement / Pengumuman kerja sama Formats: post, square, story, reel · default ground: paper | field | sample (ID) | | --- | --- | | `chip` | KERJA SAMA | | `a` | Sivali Cloud Technology | | `b` | PT Nama Mitra | | `title` | Sivali Cloud Technology dan PT Nama Mitra resmi menjalin kerja sama strategis. | | `lead` | Bersama menghadirkan open cloud yang andal untuk sektor perbankan dan pemerintahan di Indonesia. | | `date` | Jakarta, 12 November 2026 | ### `newpartner`: New partner / Partner baru Formats: post, square, story, reel · default ground: paper | field | sample (ID) | | --- | --- | | `chip` | PARTNER BARU | | `eyebrow` | SELAMAT BERGABUNG | | `name` | PT Nama Partner | | `lead` | Kini resmi tergabung dalam jaringan partner Sivali Cloud Technology untuk solusi Canonical dan Trilio. | | `tags` | [System Integrator, Surabaya, Canonical] | | `cta` | Direktori partner · sivali.co/partners | ### `newvendor`: New vendor / Vendor baru Formats: post, square, story, reel · default ground: night | field | sample (ID) | | --- | --- | | `chip` | VENDOR BARU | | `eyebrow` | KINI DIDISTRIBUSIKAN OLEH SIVALI | | `name` | Nama Vendor | | `line` | Platform backup dan recovery cloud-native untuk OpenStack dan Kubernetes. | | `points` | [Lisensi dan dukungan lokal dalam Rupiah, Engineer tersertifikasi untuk implementasi, Tersedia melalui jaringan partner Sivali] | ### `launch`: Product launch / Produk baru Formats: post, square, story, reel · default ground: night | field | sample (ID) | | --- | --- | | `chip` | PRODUK BARU | | `eyebrow` | DILUNCURKAN HARI INI | | `name` | Nama Produk | | `line` | Satu control plane untuk menjalankan private cloud Anda sendiri, dari rak pertama hingga ratusan node. | | `feats` | [[server, Bare metal, Provisioning otomatis], [layers, Multi-tenant, Isolasi per proyek], [shield, Patuh regulasi, Data tetap di Indonesia]] | | `cta` | Pelajari lebih lanjut | ## Events (event) ### `poster`: Event poster / Poster event Formats: post, square, story, reel · default ground: indigo · Jakarta skyline | field | sample (ID) | | --- | --- | | `chip` | WEBINAR | | `eyebrow` | OPEN CLOUD SERIES · EPISODE 04 | | `title` | Migrasi VMware ke open cloud tanpa downtime | | `date` | Kamis, 26 November 2026 | | `time` | 14.00 - 15.30 WIB | | `place` | Online · Zoom | | `speakers` | [[Nama Pembicara, Jabatan, Perusahaan], [Nama Pembicara, Jabatan, Perusahaan]] | | `cta` | Daftar gratis · sivali.co/event | ### `countdown`: Event countdown / Hitung mundur event Formats: post, square, story, reel · default ground: night · Jakarta skyline | field | sample (ID) | | --- | --- | | `chip` | HITUNG MUNDUR | | `n` | 3 | | `unit` | HARI LAGI | | `title` | Open Cloud Day Jakarta 2026 | | `date` | Kamis, 26 November 2026 · Jakarta | | `cta` | Amankan kursi Anda | ### `recap`: Event recap / Dokumentasi event Formats: post, square, story, reel · default ground: paper | field | sample (ID) | | --- | --- | | `chip` | DOKUMENTASI | | `title` | Terima kasih telah hadir di Open Cloud Day 2026. | | `stats` | [[320, peserta], [12, sesi], [18, partner]] | | `place` | Grand Slipi Tower · 26 November 2026 | ### `speaker`: Speaker card / Kartu pembicara Formats: post, square, story, reel · default ground: indigo | field | sample (ID) | | --- | --- | | `chip` | PEMBICARA | | `name` | Nama Pembicara | | `role` | Jabatan, Perusahaan | | `session` | Membangun private cloud yang patuh regulasi OJK | | `event` | Open Cloud Day 2026 · 26 November | ## Greetings (greeting) ### `holiday`: Holiday greeting / Ucapan hari raya Formats: post, square, story, reel · default ground: indigo | field | sample (ID) | | --- | --- | | `occasion` | idulfitri | | `sign` | Keluarga besar Sivali Corp | ## Education (edu) ### `tipscover`: Tips & tricks · cover / Tips & trik · sampul Formats: post, square, story, reel · default ground: paper | field | sample (ID) | | --- | --- | | `chip` | TIPS & TRIK | | `kicker` | KUBERNETES | | `title` | 5 langkah mengamankan cluster Kubernetes Anda | | `swipe` | Geser untuk membaca | | `page` | 1/6 | ### `tipsslide`: Tips & tricks · slide / Tips & trik · isi Formats: post, square, story, reel · default ground: paper | field | sample (ID) | | --- | --- | | `n` | 02 | | `title` | Aktifkan RBAC dan batasi akses cluster-admin | | `text` | Beri setiap tim namespace dan role sendiri. Akun cluster-admin hanya untuk operator platform. | | `code` | kubectl create rolebinding dev-edit \ --clusterrole=edit \ --group=dev --namespace=team-a | | `page` | 3/6 | ## Brand & careers (brand) ### `quote`: Leadership quote / Kutipan pimpinan Formats: post, square, story, reel · default ground: indigo · Jakarta skyline | field | sample (ID) | | --- | --- | | `chip` | PERSPEKTIF | | `quote` | Cloud seharusnya terbuka. Organisasi Indonesia berhak memegang kendali atas infrastruktur dan datanya sendiri. | | `name` | Nama Pimpinan | | `role` | Jabatan, Sivali Corp | ### `hiring`: We are hiring / Lowongan kerja Formats: post, square, story, reel · default ground: mint | field | sample (ID) | | --- | --- | | `chip` | KARIER | | `eyebrow` | KAMI SEDANG MEREKRUT | | `role` | Cloud Infrastructure Engineer | | `tags` | [Jakarta, Hybrid, Penuh waktu] | | `reqs` | [Pengalaman OpenStack atau Kubernetes, Nyaman bekerja dengan Linux dan Ansible, Sertifikasi CKA atau LFCS jadi nilai tambah] | | `cta` | Lamar di sivali.co/careers | ### `milestone`: Milestone / Pencapaian Formats: post, square, story, reel · default ground: night · Jakarta skyline | field | sample (ID) | | --- | --- | | `chip` | PENCAPAIAN | | `n` | 25+ | | `label` | tahun pengalaman founder di open source | | `text` | Sejak 1999, kami membangun Linux dan open source di Indonesia. Kini melalui tiga bisnis dalam satu grup. | | `facts` | [[3, bisnis dalam grup], [24/7, dukungan teknis]] | ### `cert`: Team certification / Sertifikasi tim Formats: post, square, story, reel · default ground: paper | field | sample (ID) | | --- | --- | | `chip` | SERTIFIKASI | | `badge` | CKA | | `title` | Tim engineer kami kini tersertifikasi Certified Kubernetes Administrator. | | `text` | Satu langkah lagi untuk memastikan setiap implementasi partner ditangani oleh engineer yang tepat. | | `people` | 4 | ## Corporate (corporate) ### `notice`: Service notice / Pemberitahuan layanan Formats: post, square, story, reel · default ground: paper | field | sample (ID) | | --- | --- | | `chip` | PEMBERITAHUAN | | `title` | Pemeliharaan terjadwal portal cloud.sivali.co | | `rows` | [[TANGGAL, Sabtu, 28 November 2026], [WAKTU, 22.00 - 02.00 WIB], [DAMPAK, Portal tiket tidak dapat diakses sementara], [BANTUAN, Dukungan teknis 24/7 tetap tersedia]] | ### `press`: Press release / Siaran pers Formats: post, square, story, reel · default ground: paper | field | sample (ID) | | --- | --- | | `chip` | SIARAN PERS | | `date` | JAKARTA · 12 NOVEMBER 2026 | | `title` | Sivali Corp memperluas distribusi open cloud ke lima negara ASEAN | | `lead` | Ringkasan satu paragraf berisi inti berita: siapa, apa, kapan, dan mengapa ini penting bagi pelanggan dan partner. | ## Video (video) ### `vtitle`: Video · title card / Video · kartu judul Formats: landscape, reel, story · default ground: night | field | sample (ID) | | --- | --- | | `eyebrow` | OPEN CLOUD SERIES · EPISODE 04 | | `title` | Migrasi VMware ke open cloud tanpa downtime | | `date` | 26 November 2026 | ### `vlower`: Video · speaker name / Video · nama narasumber Formats: landscape, reel, story · default ground: night | field | sample (ID) | | --- | --- | | `name` | Nama Narasumber | | `role` | Jabatan | | `company` | Nama Perusahaan | ### `vcompany`: Video · company tag / Video · nama perusahaan Formats: landscape, reel, story · default ground: night | field | sample (ID) | | --- | --- | | `company` | PT Nama Perusahaan | | `tag` | MITRA SIVALI CLOUD TECHNOLOGY | | `city` | Jakarta | ### `vquote`: Video · soundbite caption / Video · kutipan narasumber Formats: landscape, reel, story · default ground: night | field | sample (ID) | | --- | --- | | `quote` | Kami butuh cloud yang bisa kami kendalikan sendiri, tanpa terkunci satu vendor. | | `name` | Nama Narasumber | | `role` | Jabatan, Perusahaan | ### `vchapter`: Video · chapter / Video · bab / segmen Formats: landscape, reel, story · default ground: indigo | field | sample (ID) | | --- | --- | | `n` | 02 | | `title` | Arsitektur referensi | | `sub` | Dari tiga node hingga multi-site | ### `vend`: Video · end card / Video · end card Formats: landscape, reel, story · default ground: night · Jakarta skyline | field | sample (ID) | | --- | --- | | `title` | Terima kasih telah menonton. | | `cta` | Hubungi kami | | `links` | [sivali.co, cloud.sivali.co] | ## Podcast (podcast) ### `pcover`: Podcast · show cover / Podcast · cover show Formats: square · default ground: night · Jakarta skyline | field | sample (ID) | | --- | --- | | `show` | Open Cloud Talk | | `kicker` | PODCAST | | `by` | oleh Sivali Corp | ### `pepisode`: Podcast · new episode / Podcast · episode baru Formats: square, post, story, reel · default ground: indigo | field | sample (ID) | | --- | --- | | `show` | Open Cloud Talk | | `ep` | EP 12 | | `title` | Kedaulatan data dan cloud lokal: apa yang harus disiapkan bank? | | `host` | Nama Host | | `guest` | Nama Tamu | | `guestRole` | Jabatan, Perusahaan | | `date` | Tayang Kamis, 26 November | ### `pguest`: Podcast · guest card / Podcast · kartu tamu Formats: square, post, story, reel · default ground: night · Jakarta skyline | field | sample (ID) | | --- | --- | | `show` | Open Cloud Talk | | `ep` | EP 12 | | `guest` | Nama Tamu | | `role` | Jabatan | | `company` | Nama Perusahaan | | `topic` | Kedaulatan data dan cloud lokal | ### `paudiogram`: Podcast · audiogram / Podcast · audiogram Formats: square, post, story, reel · default ground: night · Jakarta skyline | field | sample (ID) | | --- | --- | | `show` | Open Cloud Talk | | `ep` | EP 12 | | `quote` | Kalau datanya tinggal di Indonesia, kendalinya juga harus di Indonesia. | | `guest` | Nama Tamu | | `role` | Jabatan, Perusahaan | | `time` | 12:48 | ### `pthumb`: Podcast · YouTube thumbnail / Podcast · thumbnail YouTube Formats: landscape · default ground: night · Jakarta skyline | field | sample (ID) | | --- | --- | | `ep` | EP 12 | | `title` | Kedaulatan data untuk bank | | `show` | Open Cloud Talk | ## Co-branding (cobrand) ### `cbdist`: Co-brand · authorised distributor / Co-brand · distributor resmi Formats: post, square, story, reel · default ground: night · Jakarta skyline | field | sample (ID) | | --- | --- | | `partner` | canonical | | `chip` | DISTRIBUTOR RESMI | | `cta` | Hubungi tim Sivali | ### `cbwebinar`: Co-brand · joint webinar / Co-brand · webinar bersama Formats: post, square, story, reel · default ground: night · Jakarta skyline | field | sample (ID) | | --- | --- | | `partner` | canonical | | `chip` | WEBINAR BERSAMA | | `title` | Private cloud yang patuh regulasi, tanpa lock-in | | `date` | Kamis, 3 Desember 2026 | | `time` | 14.00 - 15.30 WIB | | `cta` | Daftar gratis · sivali.co/event | ### `cbspot`: Co-brand · product spotlight / Co-brand · sorotan produk Formats: post, square, story, reel · default ground: night · Jakarta skyline | field | sample (ID) | | --- | --- | | `partner` | canonical | | `chip` | SOROTAN PRODUK | | `title` | Kenapa tim IT memilih | | `note` | Lisensi, implementasi dan dukungan lokal 24/7 dari Sivali. | ## Tech anatomy (anatomy) ### `anatomy`: Technology anatomy / Anatomi teknologi Formats: post, square, story, reel · default ground: night | field | sample (ID) | | --- | --- | | `product` | openstack | | `chip` | ANATOMI | | `tag` | #AnatomiTeknologi | ### `anatomyslide`: Anatomy · layer slide / Anatomi · slide per lapisan Formats: post, square, story, reel · default ground: night | field | sample (ID) | | --- | --- | | `product` | openstack | | `n` | 2 | | `chip` | ANATOMI | ## Lookup values **`data.product` for `anatomy` and `anatomyslide`** (layers listed top to bottom; `anatomyslide` also takes `n` 1 to 4): | product | eyebrow | ground | layers | | --- | --- | --- | --- | | `cloud` | Cloud | night | Layanan (apps) · Virtualisasi (vms) · Jaringan (net) · Pusat data (servers) | | `openstack` | Canonical OpenStack · Canonical | indigo | Layanan mandiri (apps) · Penyimpanan dan jaringan (storenet) · Mesin virtual (vms) · Server standar (servers) | | `kubernetes` | Canonical Kubernetes · Canonical | night | Control plane (brain) · Kontainer (containers) · Jaringan (net) · Node (servers) | | `migrasi` | Migrasi VM · Coriolis | paper | Inventaris (oldvms) · Replikasi (replicate) · Penyesuaian (adapt) · Cutover (newvms) | | `microcloud` | Canonical MicroCloud · Canonical | indigo | LXD (vms) · MicroOVN (net) · MicroCeph (storage) · Mulai dari 3 server (trio) | | `orcastra` | Orcastra · ORCA | night | Siap dijual (package) · Optimasi (brain) · Pooling (pool) · Server CPU dan GPU (gpu) | | `orcahub` | ORCA Hub · ORCA | paper | Pelanggan (users) · Etalase (store) · Meteran (gauge) · Paket layanan (package) | | `ubuntupro` | Ubuntu Pro · Canonical | indigo | Kepatuhan (dome) · Livepatch (pulse) · Patch 10 tahun (pkgs) · Ubuntu LTS (servers) | | `netra` | Netra Runtime · Netra | night | Aplikasi Anda (apps) · API kompatibel OpenAI (api) · Model AI (model) · GPU di Indonesia (gpu) | | `castai` | Cast AI · Cast AI | paper | Konsolidasi (pack) · Rightsizing (bars) · Pemantauan (gauge) · Cluster Kubernetes (containers) | | `trilio` | Trilio · Trilio | night | Pemulihan (restore) · Enkripsi (shield) · Snapshot (snapshot) · Aplikasi dan data (containers) | | `nextcloud` | Nextcloud Hub · Nextcloud | paper | Office (apps) · Talk dan Groupware (chat) · Files (files) · Server Anda (servers) | **`data.partner` for `cbdist`, `cbwebinar`, `cbspot`:** | partner | name | ground | accent | logo file | palette | | --- | --- | --- | --- | --- | --- | | `canonical` | Canonical | `#2C001E` | `#E95420` | `kits/logos/canonical-white.svg` | from the partner's brand page | | `trilio` | Trilio | `#1F2A2E` | `#7AC143` | missing: pass `data.logo` | provisional | | `nextcloud` | Nextcloud | `#0082C9` | `#FFFFFF` | `kits/logos/nextcloud-icon-white.svg` | from the partner's brand page | | `coriolis` | Coriolis | `#0A1F4D` | `#4F8BFF` | `kits/logos/coriolis-white.svg` | provisional | | `castai` | Cast AI | `#0B1B3F` | `#A4FBF6` | missing: pass `data.logo` | from the partner's brand page | | `netra` | Netra Runtime | `#111111` | `#FFFFFF` | missing: pass `data.logo` | provisional | **`data.occasion` for `holiday`:** `idulfitri`, `iduladha`, `natal`, `tahunbaru`, `imlek`, `deepavali`, `nyepi`, `waisak`, `hutri` --- # sivali.co website UI kit Recreation of sivali.co (WordPress marketing site) from the live pages Home, About, Partners, Our Vendors — copy is verbatim from the site (Sept 2026). Click the header nav to switch pages; partner filter tags and the "Ask about our product" form are interactive. Composes components/core (Header, Footer, Card, Button, Tag, Eyebrow, Input, Select, Icon). Files: index.html (shell + router), Home.jsx, About.jsx, Partners.jsx, Vendors.jsx, data.js. Known gaps: hero photo & team photos are placeholders (site images not downloadable); logo shown as wordmark text until SVGs are uploaded; certification logos omitted. --- # Logos The Sivali logo mark as vector files, generated from the exact path and orbit dots used by the Sivali Corp website (`kits/motion/sivali-mark.js`). | File | Ink | Use on | | --- | --- | --- | | `sivali-mark-indigo.svg` | `#39399B` | white, `neutral-50`, `#F5F5F5` | | `sivali-mark-white.svg` | `#FFFFFF` | indigo `#39399B`, `#121212`, photography with an indigo overlay | | `sivali-mark-dark-ui.svg` | `#DCDCED` | dark UI where pure white is too bright (the brand guide's dark variant) | | `sivali-mark-tile.svg` | white on an indigo rounded square | app icons, avatars, favicons, social profile pictures | Single-ink marks: the ink is baked into each file. The wordmark is set in type (Ubuntu Medium, uppercase, tracked 0.18em): `SIVALI CORP` for the holding, `SIVALI` over `CLOUD TECHNOLOGY` for the distributor. The original wordmark SVGs remain on sivali.co (see README, Logo assets). --- The yin-yang of the logo as a content pattern: three cards, each pairing two complementary ideas, an indigo half above and a white half below, with the Sivali mark sitting on the seam like the dot that joins the two halves of the mark. - Section: `#F5F5F5`, eyebrow "IN BALANCE", headline 40px Medium (-0.025em) with a one-line Light intro on the right. - Card: radius 28px, min height 380px, two equal halves. Hover lifts it 4px with an indigo-tinted shadow, turns the mark 180 degrees (the halves swap) and wakes the orbit swirl in the white half. - Indigo half: fade `#4848BA` to `#39399B` to `#2E2E86`, a dot grid fading from the top-right corner, index `01 · A` in mint mono, a 44px Lucide icon tile (white 14% fill, mint glyph), title 24px and one sentence 15px Light, all white. - White half: white with a dot grid fading from the bottom-left and a soft mint glow in the corner, index and icon tile in indigo on `#EBEEFF`, indigo title, `#525252` sentence. - Seam: 64px white disc with a translucent ring, the indigo mark at 44px, placed on the left edge of the seam. - Three cards maximum; one idea per half, a title and one sentence. Cards stack below 900px. Reduced motion: no lift, no turn. --- The Sivali Corp logo animation from the website hero, cut as a video bumper: the orbit dots fly in and settle, the mark fills and glows, then slides left as `SIVALI CORP` reveals. No tagline and no eyebrow: the lockup stands alone. Rendered files (H.264 MP4, 30 fps) live in `assets/Motion/`: | File | Use | | --- | --- | | `sivali-bumper-intro-16x9.mp4` (1920x1080, 4s) | YouTube, webinar recordings, event screens | | `sivali-bumper-intro-9x16.mp4` (1080x1920, 4s) | Reels, Stories, TikTok, Shorts | | `sivali-bumper-intro-1x1.mp4` (1080x1080, 4s) | Feed video, LinkedIn | | `sivali-bumper-outro-*.mp4` (5s, all three ratios) | End of any video: lockup and `sivali.co`, fades to black | | `sivali-bumper-intro-16x9-indigo.mp4`, `-light.mp4` | Indigo and light grounds for decks and bright edits | Timeline (intro, 4s): 0 to 1.3s dots assemble and spin down · 0.6 to 1.4s mark fills with a `primary-100` halo · 1.35 to 2.1s mark slides left, wordmark reveals · hold · 3.55 to 4s fade to ground. The outro adds the URL at 2.6s and fades to `#121212`. Render more from code: `SivaliMark.bumper(ctx, W, H, t, { mode, theme, word, url })` is a pure function of time, so any size can be rendered frame by frame (themes `dark`, `indigo`, `light`, or a theme object `{ bg, ink, glow, accent, end, halo }` for co-branded reels in a partner's colours). Never add a tagline or eyebrow line under the lockup. Keep the bumper unedited: no speed ramps, no recolouring, no music hits that cut the fade. --- Primary call-to-action — indigo fill by default; mint "accent" for the single hero CTA; "secondary" outline for the paired secondary action; "inverse" on indigo bands. ```jsx ``` Sizes sm 32 / md 40 / lg 48. Hover darkens one step (600→700); press scales .98. Never bold — Medium 500 only. --- Content card used for benefits, services, vendors and partners — icon tile, eyebrow, Ubuntu title with › when linked, Body2 copy. ```jsx Preventive maintenance, quick repairs and flexible SLAs. Open Source Linux for Enterprise ``` 16px radius, 24px padding, Neutral-100 border; hover lifts 2px with indigo-tinted shadow. tone="brand" for indigo cards. --- Group footer on `#121212`: lockup and one-line descriptor, then Businesses, Group and Contact columns (12px tracked headings in `#707072`, 14px links in `#DBDBDC` turning white on hover, the support link in mint with an outbound arrow), and a legal row above a `#39383C` rule. Replaces the older indigo four-column Footer for Sivali Corp pages; the sivali.co Footer stays for Sivali Cloud Technology pages. --- Sticky 72px header of the Sivali Corp site in its two states: **glass** over the dark animated hero (`rgba(18,18,18,.28)`, 12px blur, white text) and **solid** once the page scrolls (`rgba(255,255,255,.92)`, `#E5E5E5` rule). Hovering a nav item with children opens the mega menu below it. Anatomy: lockup (mark 36px + `SIVALI CORP`, tracked 0.18em) · nav items 15px with 14px side padding, active item in `#39399B` with a 2px inset underline · EN/ID segmented pill · primary button "Find Partners" (`#39399B`, hover `#393987`, radius 10px). Mega menu: white panel, 260px intro column (title 20px Medium, 14px description, indigo link with arrow) divided by a `#E5E5E5` rule from a two-column grid of link cards (title 15px Medium + 13px description, `#F5F5F5` on hover, optional 40px logo tile). On the hero the logo in the header is hidden while the hero lockup animates up into its place (scroll range `min(20% of hero, 160px)`), then the header logo appears. Below 820px the nav collapses to a 44px menu button. --- The home hero of the Sivali Corp site: a full-height `#121212` stage with the animated logo lockup top-left, eyebrow, H1, bold-led lead, accent + ghost buttons and a frosted stat bar at the bottom. - Background: the live site renders a Jakarta skyline as 3D line art (Monas centre, indigo grid, mint pulses travelling between towers) with a left-to-right `#121212` fade for legibility. This preview stands in with dotted orbit rings; any background must keep the left 60% dark enough for white body text. - Lockup: `SivaliMark.draw` at 96 to 140px (`clamp(96px,10vw,140px)`), glowing; on scroll it shrinks and travels into the header logo slot. - Type: eyebrow 12px tracked 0.18em in `#ADFCB9` · H1 `clamp(40px,4.4vw,60px)`/1.06 Medium, tracking -0.025em · lead 17px/1.65 `#DBDBDC` with the opening clause in Bold white. - Buttons: accent mint (`#ADFCB9` on `#015B6A`) for the one primary action, ghost glass for the secondary. - Stat bar: see StatBar. Alternative "split" hero (yin-yang): indigo left half with `border-radius:0 0 280px 0`, photo right half with `280px 0 0 0`, white and indigo dots marking the two eyes. --- The closing call to action above the footer: one dark rounded panel that asks the question once, then splits into two lanes, one per audience. - Panel: `#121212`, radius 32px, padding 56px, a soft indigo glow top-right and a faint mint glow bottom-left (radial fades, no hard gradients). Headline 44px Medium, -0.025em, max 640px; a one-line promise in 16px Light `#ADADAE` on the right. - Partner lane: glass card (`rgba(255,255,255,.07)` fading to `.02`, 1px white 12% border), mint eyebrow and icon tile, mint pill button "Find Partners". - Enterprise lane: indigo card fading `#4848BA` to `#39399B`, mint eyebrow, white pill button "Talk to us". - Both lanes: radius 24px, Lucide icon in a 48px tile, statement 26px Medium, the dark orbit swirl (`SivaliMark.swirl`, tone `dark`) that brightens on hover, 3px lift and border highlight on hover. The whole lane is the link. - Stack the lanes below 840px. Keep exactly two audiences; a third lane belongs in the contact page. --- ALL-CAPS 12px section label that precedes every heading on sivali.co ("WHY TO CHOOSE US", "OUR VENDORS"). ```jsx What can we do for you

We are Cloud Technology Enabler

``` Only place uppercase is allowed. tone="accent" (mint) on indigo bands. --- A process told in three verbs on an indigo band (`#39399B`): eyebrow in mint, H2 up to 760px wide, then three columns under a `rgba(255,255,255,.25)` rule. Each step: tracked index label in white Medium, verb phrase 26px Medium, one sentence 15px Light in white, owner in mint 13px. Keep it to three or four steps; the verb phrase does the work, the sentence proves it. On indigo every line of text is white; mint `#ADFCB9` only for the eyebrow and the owner label. No grey or lavender text on indigo. --- Four-column indigo footer: logo + social, Company, Vendors, Contact (24/7 Support, Jakarta address), copyright bar. ```jsx