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/<Comp>/ — 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, <Comp>.d.ts, preview.html in components/<Comp>/: - 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.

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.