SIVALICLOUD TECHNOLOGYDesign System
Sivali Design System · pedoman resmi

Satu sistem desain
untuk semua karya
Sivali.

Pedoman desain resmi Sivali Cloud Technology dan Sivali Corp untuk post sosial, carousel, story, reel, video, podcast, co-branding partner, situs, deck dan dokumen. Indigo untuk brand, mint sebagai satu-satunya aksen, Ubuntu untuk tipe.

Baca brand bookLihat templateUntuk AI

Ini sumber resmi. Semua desain Sivali mengikuti paket tim desain yang disajikan apa adanya di situs ini. Agen AI: mulai dari AGENTS.md lalu SKILL.md; ringkasan di llms.txt. Katalog visual asli paket ada di catalog.html.

Brand bookWarna, tipe, logo, suara, situs Sivali CorpDocs7 dokumen, HTML + MarkdownKomponen33 komponen dengan previewTemplate sosial33 template post, story, reel, video, podcastKatalog visualSemua kartu pedoman dan komponenUI kit sivali.coHome, About, Partners, VendorsUntuk AIAGENTS.md, SKILL.md, llms.txtTokentokens.json dan tokens.css

Template siap pakai

33 template di engine SivaliSocial, dwibahasa (ID/EN), dengan lockup Sivali Corp atau Sivali Cloud Technology. Nama dan angka di contoh adalah placeholder: ganti sebelum terbit.

Produk baru
launchProduk baru
Anatomi teknologi
anatomyAnatomi teknologi
Poster event
posterPoster event
Ucapan hari raya
holidayUcapan hari raya
Co-brand · distributor resmi
cbdistCo-brand · distributor resmi
Tips & trik · sampul
tipscoverTips & trik · sampul
Podcast · episode baru
pepisodePodcast · episode baru
Video · kartu judul
vtitleVideo · kartu judul

Semua template

Warna

indigo #39399B
mint #ADFCB9
teal #015B6A
night #121212
paper #F3F4FB

Format

post · 1080×1350square · 1080×1080story · 1080×1920reel · 1080×1920landscape · 1920×1080

Pakai di halaman sendiri

<link rel="stylesheet" href="https://design.sivali.co/vendor/fonts.css">
<link rel="stylesheet" href="https://design.sivali.co/kits/social/social.css">
<script src="https://design.sivali.co/vendor/three.min.js"></script>
<script src="https://design.sivali.co/kits/motion/sivali-mark.js"></script>
<script src="https://design.sivali.co/kits/motion/sivali-city.js"></script>
<script src="https://design.sivali.co/kits/motion/sivali-anatomy.js"></script>
<script src="https://design.sivali.co/kits/social/sivali-social.js"></script>
<script>
  var el = SivaliSocial.frame('launch', { format: 'post', lang: 'id', brand: 'cloud',
    data: { name: 'Nama Produk', line: 'Satu kalimat manfaat.' } });
  document.body.appendChild(el);
</script>
<!-- atau render PNG/MP4: node tools/render.js png --template launch --format post --lang id --out out/launch.png -->