Design System 2026

Satu bahasa visual untuk sistem yang mudah dibangun

Token, komponen, dan pola untuk digibay.id, AIVA, CADIAQ, deck, dan dokumen. Engineering precision, visual clarity.

Proporsi90 / 10

White: #FFFFFF
Dark Navy: #000040
Vibrant Purple: #7B34D2
Deep Blue: #085ED6
Electric Blue: #3CA4F3

v2026.11 · diperbarui 7 Nov 2026

Ringkasan

Source of truth untuk tampilan Digibay di website, aplikasi, pitch deck, company profile, proposal, dan dokumen bisnis. Karakternya clean futuristic systems design: modern, modular, fungsional, approachable, dan trustworthy.

Tagline: Build Systems with Ease
Positioning: AI-Native Systems
Visual tone: Corporate technology yang progresif

01FondasiWarna, tipografi, layout, bentuk, ikon, grafis, dan logo.02KomponenBlok React + Tailwind dari components/ui.03PolaTipe section, gaya penulisan, dan checklist review.

Jika referensi berbeda

1Homepage digibay.id (18 Okt 2026): komposisi, hierarchy, density
2HTML / CSS website terbaru: implementasi UI
3Digibay Style Guide 2026: prinsip brand, palette, komunikasi
4Aset logo resmi: identitas dan proporsi

Prinsip

Bukan cyberpunk, bukan sci-fi dekoratif, bukan AI generik.

01
Clarity first
Hierarchy kuat dan copy terbaca sebelum efek apa pun.
02
Systems over isolated features
Tunjukkan bagaimana bagian-bagian terhubung, beroperasi, dan berkembang.
03
Generous whitespace
Sedikit konten dengan hierarchy jelas lebih baik dari card penuh teks.
04
Purposeful graphics
Diagram menjelaskan sistem, bukan sekadar hiasan.
05
Modular composition
Grid rapi, jarak konsisten, blok yang bisa dirangkai.
06
Human in control
Kontras accessible, fokus terlihat, animasi bisa dimatikan.

Warna

Putih dan Dark Navy mendominasi (sekitar 90%). Biru dan ungu jadi aksen selektif (sekitar 10%). Klik swatch untuk menyalin HEX.

Primary

Accent utama

Accent pendukung

Untuk chart, diagram, dan ilustrasi. Sky Blue dan Bright Violet juga boleh untuk gradient halus dan label di section gelap.

Sky Blue

#6BC9FB

Bright Violet

#B45CF0

Soft Lilac

#8589F6

Pastel Purple

#D67DFA

Dark Purple

#471B80

Warm Purple

#B464D4

Tint navy

Abu-abu, border, dan teks redup dibuat dari Dark Navy dengan opacity, jadi semua warna netral tetap on-brand.

navy/[0.025]Surface soft (section off-white)
navy/10Border card, pemisah
navy/15Border input
navy/45Metadata, label teknis
navy/55Breadcrumb, keterangan
navy/70Body di latar terang (65–70%)
navyHeading, teks utama

Surface

WhiteBawaan

Softnavy 2.5% + putih

Dark NavyStatement, footer

Gradient

Biru–ungu, low-opacity, hanya untuk kedalaman. Jangan jadi efek dominan. Dari ungu ke biru: imajinasi menjadi engineering.

Gunakan · low-opacity

Hindari · full strength

CSS variables

:root {
  --dg-white: #ffffff;
  --dg-navy: #000040;
  --dg-deep-blue: #085ed6;
  --dg-electric-blue: #3ca4f3;
  --dg-sky-blue: #6bc9fb;
  --dg-vibrant-purple: #7b34d2;
  --dg-bright-violet: #b45cf0;

  --dg-surface: var(--dg-white);
  --dg-surface-soft: color-mix(in srgb, var(--dg-navy) 2.5%, white);
  --dg-text: var(--dg-navy);
  --dg-border: rgb(0 0 64 / 10%);
}

Tipografi

Nunito untuk display, heading, dan CTA. Open Sans untuk body, navigasi, form, dan dokumentasi. Monospace untuk label teknis. Diverifikasi lewat getComputedStyle di digibay.id.

AaDisplay · Nunito

Bold–ExtraBold (700–800) untuk heading, SemiBold–Bold (600–700) untuk CTA. Tracking agak rapat.

AaBody · Open Sans

Regular (400). Medium–SemiBold (500–600) hanya untuk penekanan, bukan seluruh paragraf.

AaTechnical · Monospace

Kecil, uppercase, tracking lebar. Nomor section, eyebrow, metadata, label sistem.

Skala di digibay.id

Hero H1Build Systems with Easetext-4xl · md:text-6xl · lg:text-[4.25rem]

Section H2Build Systems with Easetext-3xl · md:text-5xl

H3Build Systems with Easetext-2xl · text-2xl

LeadDigibay makes complex systems easier to build.text-base · md:text-lg

BodyDigibay makes complex systems easier to build.text-base · text-base

CTABuild Systems with Easetext-[0.95rem] · font-semibold

EyebrowAI-Native Systemstext-xs / text-sm · uppercase, tracked

CSS

:root {
  --font-display: "Nunito", sans-serif;
  --font-body: "Open Sans", sans-serif;
  --font-technical: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

Layout & Spacing

Grid 12 kolom di desktop, satu kolom di mobile. Konten selalu di container terpusat (.container-dg, maks 1320px, gutter 16px di mobile).

Grid 12 kolom

Split yang umum

Hero 5 / 7

Editorial 7 / 5

Seimbang 6 / 6

Ritme section

py-20 md:py-28: sekitar 80px di mobile dan 112px di desktop.

80px

mobile · py-20

112px

desktop · md:py-28

Skala spacing (px)

4
8
12
16
24
32
48
64
80
112

Bentuk & Surface

Terkendali. Blok sistem persegi atau nyaris persegi, radius kecil di tombol, border navy tipis, dan shadow minimal.

Radius

rounded-none · 0

Card, modul, input

rounded-sm · 4px

Tag

rounded-md · 6px

Tombol

Border & shadow

Border

Card dan modul (bawaan)

Action

Hanya tombol primer

Floating

Toast, menu

Ikonografi

Sederhana, geometris, modular, konsisten, dan fungsinya jelas. Ikon Lucide, garis 2px; 16px sejajar teks, 20–24px berdiri sendiri. Boleh warna aksen selama hierarchy terjaga. Ikon dekoratif diberi aria-hidden.

network

cpu

database

workflow

plug

layers

boxes

git-branch

shield-check

arrow-right

Grafis & Motion

Grafis menunjukkan bagaimana sistem dibangun dan terhubung. Motion menjelaskan perubahan state dan hubungan, lalu tidak mengganggu.

System diagram

Gunakan

Node, connector, modular blocks
Diagram sistem dan garis data-flow
Grid background halus, garis lurus
Gradient biru–ungu low-opacity
Software, hardware, IoT, engineer yang nyata

Hindari

Neon berlebihan, cyberpunk
Dark UI di semua section
Hologram otak AI, 3D tanpa makna
Glassmorphism berat, shadow keras
Card terlalu rounded, gradien mencolok

Motion

Transisi pendek, lembut, fungsional (150–300ms). Hover card dan link tidak mengganggu keterbacaan. Hormati prefers-reduced-motion; konten tidak bergantung pada animasi.

150ms · ease-outArahkan kursor

200ms · ease-outArahkan kursor

300ms · ease-outArahkan kursor

Logo

Hexagon tertutup (struktur, keterhubungan, “bay”), modul terfragmentasi di tengah, dan gradasi ungu ke biru: ide menjadi sistem. Pakai hanya file resmi di /brand.

Primary · di latar putih

Secondary · di Dark Navy

Ikon saja · favicon, avatar, ruang kecil

Clear space

Minimal setinggi huruf “d” pada logotype di setiap sisi.

Ukuran minimum

Lebar 24px di layar, 10mm di cetak. Di bawah itu, pakai ikon.

Hindari

Mengubah proporsi
Memutar logo
Mengganti warna di luar palet
Menambah bayangan
Menaruh di latar kontras rendah
Mengubah susunan simbol dan logotype
Menambah elemen di clear space

Button

Nunito SemiBold, rounded-md, h-12 px-5 untuk CTA utama. Hover mengubah warna, border, atau shadow secara halus, bukan animasi besar.

Varian

primary

Navy solid. Satu aksi utama per tampilan.

secondary

Transparan dengan outline navy tipis.

ghost

Aksi dengan penekanan rendah.

inverse

Putih di section gelap.

Ukuran · Status

Kode

import { Button } from "@/components/ui/button";

<Button href="/contact">Talk to Digibay</Button>
<Button variant="secondary" href="/products">Explore Products</Button>
<Button variant="inverse" size="lg">Talk to Digibay</Button>

Section Heading

Technical eyebrow → heading besar → supporting text pendek. Rata kiri secara bawaan.

SectionHeading

AI-Native Systems

Systems, not isolated features.

Digibay membuat sistem kompleks lebih mudah dibangun, dihubungkan, dipahami, dioperasikan, dan dikembangkan.

SectionHeading · dark

AI-Native Systems

Systems, not isolated features.

Digibay membuat sistem kompleks lebih mudah dibangun, dihubungkan, dipahami, dioperasikan, dan dikembangkan.

Kode

import { SectionHeading } from "@/components/ui/section";

<SectionHeading
  eyebrow="AI-Native Systems"
  title="Systems, not isolated features."
  description="Digibay makes complex systems easier to build…"
/>

Tag

Label mono uppercase untuk kategori, format, dan status sistem.

Tag

Web App
IoT
Mobile
AI Agent
Neutral

Kode

<span className="rounded-sm border border-purple/20 bg-purple/[0.05] px-2 py-1
  font-mono text-[0.7rem] uppercase tracking-[0.12em] text-purple">
  Web App
</span>

Card

Putih, border tipis navy/10, sudut persegi, tanpa shadow. Urutan isi: technical label → title → deskripsi ringkas → aksi opsional.

Card

Produk · 01CADIAQAI-Native SCADA Builder untuk monitoring dan kontrol industri.Lihat produk Produk · 02AIVAAsisten virtual AI yang menjawab, mengarahkan, dan bertindak di berbagai kanal.Lihat produk

Kode

<Link href="/products/cadiaq"
  className="group flex flex-col border border-navy/10 bg-white p-7 transition-colors hover:border-navy/35">
  <span className="font-mono text-[0.7rem] uppercase tracking-[0.14em] text-navy/45">Product · 01</span>
  <h3 className="mt-4 text-2xl">CADIAQ</h3>
  <p className="mt-2 text-sm text-navy/65">AI-Native SCADA Builder…</p>
</Link>

Input Field

Tinggi 48px, persegi, border navy/15, Electric Blue saat fokus. Label di atas, error di bawah dengan Vibrant Purple.

Input

Nama lengkap *

Email kantor *

Masukkan alamat email yang valid.

Apa yang Anda butuhkan?

Kode

<label htmlFor="name" className="mb-2 block text-sm font-medium text-navy">
  Full name <span className="text-purple">*</span>
</label>
<input id="name"
  className="h-12 w-full border border-navy/15 bg-white px-3 text-navy outline-none focus:border-electric" />

Tipe section

Halaman berganti antara putih, off-white soft, dan navy solid. Tujuh tipe ini mencakup seluruh situs.

01 · lightHero lightPutih, technical eyebrow, headline besar, copy pendek, CTA, product showcase.
02 · softEditorial splitHeading besar di satu sisi, penjelasan di sisi lain (7/5 atau 6/6).
03 · softCapability networkOff-white, grid modular, connector, grid background halus.
04 · lightProduct showcaseNama produk, descriptor uppercase, penjelasan teknis singkat, CTA langsung.
05 · darkDark statementNavy solid, heading putih besar, paragraf pendek, grid kontras rendah.
06 · lightInsights / cardsTiga kolom di desktop: eyebrow kategori, judul, metadata, ringkasan.
07 · darkDark CTA / footerNavy, info ringkas, logo putih, link dan copyright yang tenang.

Gaya penulisan

Clear, confident, modern, friendly, practical, precise. Headline pendek dan kuat, paragraf ringkas, CTA eksplisit. Bedakan kemampuan saat ini dengan arah ke depan.

Headline: Build Systems with Ease
Positioning: AI-Native Systems
Product descriptor: AI-Native SCADA Builder
Systems principle: Systems, not isolated features.
CTA: Explore Products / Talk to Digibay

Umum

Approachable dan inspiratif, kata-kata sederhana.

B2B

Efisien, konkret, berorientasi solusi, dapat diverifikasi.

Engineering

Akurat: validasi, batasan, risiko, permission, human approval.

Satu bahasa visual untuk sistem yang mudah dibangun

Ringkasan

Jika referensi berbeda

Prinsip

Clarity first

Systems over isolated features

Generous whitespace

Purposeful graphics

Modular composition

Human in control

Warna

Primary

Accent utama

Accent pendukung

Tint navy

Surface

Gradient

Tipografi

Skala di digibay.id

Layout & Spacing

Grid 12 kolom

Split yang umum

Ritme section

Skala spacing (px)

Bentuk & Surface

Radius

Border & shadow

Ikonografi

Grafis & Motion

Motion

Logo

Button

Section Heading

Systems, not isolated features.

Systems, not isolated features.

Tag

Card

Input Field

Breadcrumb

Tipe section

Gaya penulisan

Checklist