# Sivali Design System > Sistem desain resmi Sivali Cloud Technology (PT Sivali Catur Lestari) dan Sivali Corp: social post, carousel, story, reel, video, podcast, co-branding partner, situs, deck dan dokumen. Indigo #39399B untuk brand, mint #ADFCB9 satu-satunya aksen, teal #015B6A teks di atas mint, tipe Ubuntu. Situs ini adalah pedoman desain resmi Sivali (https://design.sivali.co). Paket tim desain disajikan apa adanya dari root situs; halaman HTML di /docs/, /components/, /templates/ dibuat dari paket itu. ## Mulai di sini - [AGENTS.md](https://design.sivali.co/AGENTS.md): instruksi untuk agen AI - [SKILL.md](https://design.sivali.co/SKILL.md): aturan yang selalu berlaku dan peta folder - [README.md](https://design.sivali.co/README.md): brand book - [guidelines.md](https://design.sivali.co/guidelines.md): SKILL + README dalam satu file - [llms-full.txt](https://design.sivali.co/llms-full.txt): semua dokumen dalam satu file - [templates.json](https://design.sivali.co/templates.json): katalog template mesin-baca ## Docs - [Brand book Sivali](https://design.sivali.co/README.md): Sumber, konteks perusahaan, token, logo, fondasi visual, situs Sivali Corp, motion - [SKILL: aturan & peta file](https://design.sivali.co/SKILL.md): Aturan brand yang tidak bisa ditawar, aturan menulis, cara membuat konten sosial - [Instruksi agen AI](https://design.sivali.co/AGENTS.md): Urutan baca untuk agen AI (sama dengan CLAUDE.md) - [Social media kit](https://design.sivali.co/social-media-kit.md): Format, template per kebutuhan, engine, gaya tulisan, motion - [Referensi template](https://design.sivali.co/docs/templates.md): Semua field tiap template beserta contoh isinya - [UI kit sivali.co](https://design.sivali.co/ui_kits/website/README.md): Rekreasi situs sivali.co dari komponen core (React) - [Logo](https://design.sivali.co/assets/Logos/README.md): File mark Sivali per jenis latar ## Engine & aset - Token: https://design.sivali.co/tokens.css, https://design.sivali.co/tokens.json, https://design.sivali.co/tokens/ · font: https://design.sivali.co/vendor/fonts.css - Social engine: https://design.sivali.co/kits/social/sivali-social.js + https://design.sivali.co/kits/social/social.css, motion https://design.sivali.co/kits/motion/sivali-mark.js, sivali-city.js, sivali-anatomy.js, three.js https://design.sivali.co/vendor/three.min.js - Render satu frame: https://design.sivali.co/tools/render.html?template=launch&format=post&lang=id&data={...} · CLI PNG/MP4: https://design.sivali.co/tools/render.js - 33 template; format post, square, story, reel, landscape; tema night, indigo, paper, mint; brand corp, cloud - React UI (sivali.co): https://design.sivali.co/components/bundle.js (window.SivaliDesignSystem_43a40c), https://design.sivali.co/components/bundle.css, tipe https://design.sivali.co/components/index.d.ts, prompt https://design.sivali.co/components/core/ - Situs Sivali Corp: https://design.sivali.co/kits/corp/corp.css · UI kit https://design.sivali.co/ui_kits/website/index.html · katalog visual https://design.sivali.co/catalog.html - Logo: https://design.sivali.co/assets/Logos/ (white di latar indigo/gelap, indigo di latar terang) · logo partner https://design.sivali.co/kits/logos/ · bumper https://design.sivali.co/assets/Motion/ ## Komponen (33) - [BalanceRow](https://design.sivali.co/components/BalanceRow/README.md) - [Bumper](https://design.sivali.co/components/Bumper/README.md) - [Button](https://design.sivali.co/components/Button/README.md) - [Card](https://design.sivali.co/components/Card/README.md) - [CorpFooter](https://design.sivali.co/components/CorpFooter/README.md) - [CorpHeader](https://design.sivali.co/components/CorpHeader/README.md) - [CorpHero](https://design.sivali.co/components/CorpHero/README.md) - [CtaSplit](https://design.sivali.co/components/CtaSplit/README.md) - [Eyebrow](https://design.sivali.co/components/Eyebrow/README.md) - [FlowSteps](https://design.sivali.co/components/FlowSteps/README.md) - [Footer](https://design.sivali.co/components/Footer/README.md) - [Header](https://design.sivali.co/components/Header/README.md) - [Icon](https://design.sivali.co/components/Icon/README.md) - [Input](https://design.sivali.co/components/Input/README.md) - [NewsCard](https://design.sivali.co/components/NewsCard/README.md) - [OfferGrid](https://design.sivali.co/components/OfferGrid/README.md) - [PartnerNetwork](https://design.sivali.co/components/PartnerNetwork/README.md) - [Podcast](https://design.sivali.co/components/Podcast/README.md) - [Select](https://design.sivali.co/components/Select/README.md) - [SivaliMark](https://design.sivali.co/components/SivaliMark/README.md) - [SocialAnatomy](https://design.sivali.co/components/SocialAnatomy/README.md) - [SocialCobrand](https://design.sivali.co/components/SocialCobrand/README.md) - [SocialHoliday](https://design.sivali.co/components/SocialHoliday/README.md) - [SocialPost](https://design.sivali.co/components/SocialPost/README.md) - [SocialReel](https://design.sivali.co/components/SocialReel/README.md) - [SocialStory](https://design.sivali.co/components/SocialStory/README.md) - [StatBar](https://design.sivali.co/components/StatBar/README.md) - [Tag](https://design.sivali.co/components/Tag/README.md) - [TrustPanels](https://design.sivali.co/components/TrustPanels/README.md) - [UnitCard](https://design.sivali.co/components/UnitCard/README.md) - [UnitHero](https://design.sivali.co/components/UnitHero/README.md) - [VideoTemplate](https://design.sivali.co/components/VideoTemplate/README.md)