Design System 2026

One visual language for systems built with ease

Tokens, components and patterns for digibay.id, AIVA, CADIAQ, decks and documents. Engineering precision, visual clarity.

Start with the foundations Browse components

Proportion90 / 10

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

v2026.11 · updated 7 Nov 2026

Overview

The source of truth for how Digibay looks across the website, apps, pitch decks, company profile, proposals and business documents. The character is clean futuristic systems design: modern, modular, functional, approachable and trustworthy.

Tagline: Build Systems with Ease
Positioning: AI-Native Systems
Visual tone: Progressive corporate technology

01FoundationsColor, type, layout, shape, icons, graphics and the logo.02ComponentsReact + Tailwind building blocks from components/ui.03PatternsSection types, writing style and a review checklist.

When references disagree

1digibay.id homepage (18 Oct 2026): composition, hierarchy, density
2Latest website HTML / CSS: UI implementation
3Digibay Style Guide 2026: brand principles, palette, communication
4Official logo assets: identity and proportions

Principles

Not cyberpunk, not decorative sci-fi, not generic AI.

01
Clarity first
Strong hierarchy and readable copy before any effect.
02
Systems over isolated features
Show how parts connect, operate and scale together.
03
Generous whitespace
Less content with a clear hierarchy beats full cards.
04
Purposeful graphics
Diagrams explain the system; they never just decorate.
05
Modular composition
Tidy grids, consistent gaps, blocks that combine.
06
Human in control
Accessible contrast, visible focus, motion that can be turned off.

Color

White and Dark Navy dominate (about 90%). Blue and purple are selective accents (about 10%). Click a swatch to copy its HEX.

Primary

Main accents

Supporting accents

For charts, diagrams and illustrations. Sky Blue and Bright Violet may also be used for soft gradients and labels on dark sections.

Sky Blue

#6BC9FB

Bright Violet

#B45CF0

Soft Lilac

#8589F6

Pastel Purple

#D67DFA

Dark Purple

#471B80

Warm Purple

#B464D4

Navy tints

Greys, borders and muted text are Dark Navy at an opacity, so every neutral stays on-brand.

navy/[0.025]Soft surface (off-white sections)
navy/10Card border, divider
navy/15Input border
navy/45Metadata, technical labels
navy/55Breadcrumbs, captions
navy/70Body copy on light (65–70%)
navyHeadings, primary text

Surfaces

WhiteDefault

Softnavy 2.5% + white

Dark NavyStatements, footer

Gradient

Blue–purple, low-opacity, for depth only. Never a dominant effect. Purple to blue: imagination becoming engineering.

Do · low-opacity

Avoid · 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%);
}

Typography

Nunito for display, headings and CTAs. Open Sans for body, navigation, forms and documentation. Monospace for technical labels. Verified with getComputedStyle on digibay.id.

AaDisplay · Nunito

Bold–ExtraBold (700–800) for headings, SemiBold–Bold (600–700) for CTAs. Slightly tight tracking.

AaBody · Open Sans

Regular (400). Medium–SemiBold (500–600) for emphasis only, not whole paragraphs.

AaTechnical · Monospace

Small, uppercase, wide tracking. Section numbers, eyebrows, metadata, system labels.

Scale on 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

A 12-column grid on desktop, one column on mobile. Content always sits in the centered container (.container-dg, max 1320px, 16px gutter on mobile).

12-column grid

Common splits

Hero 5 / 7

Editorial 7 / 5

Even 6 / 6

Section rhythm

py-20 md:py-28: about 80px on mobile and 112px on desktop.

80px

mobile · py-20

112px

desktop · md:py-28

Spacing scale (px)

4
8
12
16
24
32
48
64
80
112

Shape & Surface

Restrained. Square or nearly square system blocks, a small radius on buttons, thin navy borders and minimal shadow.

Radius

rounded-none · 0

Cards, modules, inputs

rounded-sm · 4px

Borders & shadow

Border

Cards and modules (default)

Action

Primary button only

Floating

Toasts, menus

Iconography

Simple, geometric, modular and consistent, with a clear function. Lucide icons, 2px stroke; 16px inline with text, 20–24px standalone. Accent color is fine if hierarchy holds. Decorative icons get aria-hidden.

network

cpu

database

workflow

plug

layers

boxes

git-branch

shield-check

arrow-right

Graphics & Motion

Graphics show how systems are built and connected. Motion explains state changes and relationships, then gets out of the way.

System diagram

Nodes, connectors, modular blocks
System diagrams and data-flow lines
Fine grid backgrounds, straight lines
Low-opacity blue–purple gradient
Real software, hardware, IoT, engineers

Avoid

Heavy neon, cyberpunk
Dark UI on every section
AI-brain holograms, meaningless 3D
Heavy glassmorphism, hard shadows
Over-rounded cards, loud gradients

Motion

Short, soft, functional transitions (150–300ms). Card and link hovers never hurt legibility. Respect prefers-reduced-motion; content never depends on animation.

150ms · ease-outHover me

200ms · ease-outHover me

300ms · ease-outHover me

Logo

A closed hexagon (structure, connection, the “bay”), fragmented modules inside, and a purple-to-blue gradient: ideas becoming systems. Use the official files in /brand only.

Primary · on white

Secondary · on Dark Navy

Icon only · favicon, avatars, small spaces

Clear space

At least the height of the “d” in the logotype on every side.

Minimum size

24px wide on screen, 10mm in print. Below that, use the icon.

Avoid

Change proportions
Rotate
Recolor outside the palette
Add shadows
Place on low-contrast backgrounds
Rearrange symbol and logotype
Put elements inside the clear space

Button

Nunito SemiBold, rounded-md, h-12 px-5 for main CTAs. Hover changes color, border or shadow subtly, never a big animation.

Variants

primary

Solid navy. One main action per view.

secondary

Transparent with a thin navy outline.

ghost

Low-emphasis actions.

inverse

White on dark sections.

Sizes · States

Code

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 → large heading → short supporting text. Left-aligned by default.

SectionHeading

AI-Native Systems

Systems, not isolated features.

Digibay makes complex systems easier to build, connect, understand, operate and grow.

SectionHeading · dark

AI-Native Systems

Systems, not isolated features.

Digibay makes complex systems easier to build, connect, understand, operate and grow.

Code

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

Mono, uppercase labels for categories, formats and system states.

Tag

Web App
IoT
Mobile
AI Agent
Neutral

Code

<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

White, thin navy/10 border, square corners, no shadow. Content order: technical label → title → concise description → optional action.

Card

Product · 01CADIAQAI-Native SCADA Builder for industrial monitoring and control.View product Product · 02AIVAAI virtual assistant that answers, routes and acts across your channels.View product

Code

<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

48px tall, square, navy/15 border, Electric Blue on focus. Labels above, errors below in Vibrant Purple.

Input

Full name *

Work email *

Enter a valid email address.

What do you need?

Code

<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" />

Section types

Pages alternate between white, soft off-white and solid navy. Seven types cover the site.

01 · lightHero lightWhite, technical eyebrow, large headline, short copy, CTA, product showcase.
02 · softEditorial splitLarge heading on one side, explanation on the other (7/5 or 6/6).
03 · softCapability networkOff-white, modular grid, connectors, subtle grid background.
04 · lightProduct showcaseProduct name, uppercase descriptor, short technical explanation, direct CTA.
05 · darkDark statementSolid navy, large white heading, short paragraph, low-contrast grid.
06 · lightInsights / cardsThree columns on desktop: category eyebrow, title, metadata, excerpt.
07 · darkDark CTA / footerNavy, concise info, white logo, understated links and copyright.

Writing

Clear, confident, modern, friendly, practical, precise. Short strong headlines, concise paragraphs, explicit CTAs. Separate what exists today from future direction.

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

General

Approachable and inspiring, simple words.

B2B

Efficient, concrete, solution-oriented, verifiable.

Engineering

Accurate: validation, constraints, risks, permissions, human approval.

One visual language for systems built with ease

Overview

When references disagree

Principles

Clarity first

Systems over isolated features

Generous whitespace

Purposeful graphics

Modular composition

Human in control

Color

Primary

Main accents

Supporting accents

Navy tints

Surfaces

Gradient

Typography

Scale on digibay.id

Layout & Spacing

12-column grid

Common splits

Section rhythm

Spacing scale (px)

Shape & Surface

Radius

Borders & shadow

Iconography

Graphics & Motion

Motion

Logo

Button

Section Heading

Systems, not isolated features.

Systems, not isolated features.

Tag

Card

Input Field

Breadcrumb

Section types

Writing

Checklist