Design System · v1.0.0

CRIUS DESIGN
SYSTEM

Design language lengkap untuk produk digital PT Crius Sinergi Indonesia. Industrial precision, angularly sharp, built for scale.

Brand Identity
Blue · Grey · Cyan
Shape Language
Angular Chamfer
Typography
Montserrat Only
Components
60+ Elements
00 — Introduction

Overview

Crius Design System mendefinisikan visual language yang konsisten untuk seluruh produk digital PT Crius Sinergi Indonesia. Terinspirasi dari estetika industri berat — presisi angular, typografi teknikal, palet warna yang tegas.

Core Principles
P-01
Industrial Precision

Setiap elemen mencerminkan presisi dunia industri. Angular chamfer menggantikan radius bulat. Grid ketat menggantikan layout organik.

P-02
Technical Authority

Typografi monospace untuk data teknis. Label uppercase dengan letter-spacing. Nomor seri di setiap komponen kontekstual.

P-03
Scalable Architecture

Token berbasis CSS variables. Komponen composable dan modular. Dark/light mode-ready dengan minimal override.

01 — Introduction

Design Tokens

Design tokens adalah atom terkecil dari sistem desain kami. Mereka menyimpan nilai visual seperti warna, tipografi, dan spasi dalam variabel yang terpusat.

Implementation
ℹ
Gunakan CSS Variables
Selalu referensikan token melalui CSS variable (--crius-navy, --crius-blue-light, dll) — jangan hardcode nilai hex langsung. Ini memudahkan theming dan override.
Token Group CSS Variable Prefix Usage
Colors --crius-[color-name] Brand, semantic, and neutral colors.
Typography --crius-font-[type] Font families for display, body, and mono.
Shapes --crius-chamfer-[size] Polygon clip-paths for industrial corners.
Radius --crius-radius-[size] Subtle rounding for 'softened' industrial look.
02 — Foundations

Color Palette

Core brand tokens, semantic colors, dan extended neutrals. Seluruh warna terdefinisi sebagai CSS custom property di :root.

Brand Core
Deep Blue
--crius-navy · #0A192F
Primary dark blue surface, headers, navbars.
Deepest Blue
--crius-navy-deep · #020C1B
Darkest blue, modal overlays.
Royal Blue
--crius-blue · #0052CC
Brand Royal Blue, primary interactive base.
Royal Blue Mid
--crius-blue-mid · #0065FF
Hover state for brand blue.
Royal Blue Light
--crius-blue-light · #2684FF
Primary CTA, interactive elements.
Royal Blue Pale
--crius-blue-pale · #DEEBFF
Light tinted backgrounds.
Accent Cyan
--crius-accent · #00B8D9
Cyan accent, featured highlights.
Accent Cyan Deep
--crius-accent-deep · #008DA6
Pressed state for accent cyan.
Neutrals
White
--crius-white · #ffffff
Off White
--crius-off-white · #F7F9FB
Grey 100
--crius-grey-100
Grey 200
--crius-grey-200
Grey 400
--crius-grey-400
Grey 600
--crius-grey-600
Secondary brand color (Grey), secondary actions.
Grey 800
--crius-grey-800
Grey 900
--crius-grey-900
Semantic Colors
Success
--crius-success · #1A8050
Warning
--crius-warning · #C47B00
Danger
--crius-danger · #C0392B
Info
--crius-info · #0052CC
03 — Foundations

Typography

Satu typeface universal: Montserrat digunakan secara konsisten untuk display, branding, body copy, serta data teknis & labels.

Display — Montserrat
display-2xl96px / 700 / 0.92
EXTREME PRESSURE
display-xl72px / 700 / 0.95
Industrial Solutions
display-md36px / 700 / 1.0
Card Title, Subsections
Body — Montserrat
body-md15px / 400 / 1.65
Default body text. Dipakai di konten artikel, deskripsi produk, dan copy umum. Kontras optimal untuk keterbacaan panjang.
Mono / Data — Montserrat
mono-data13px / 400
KEV-350 · 350bar · 12.5m³/min · 185kW
04 — Foundations

Spacing Scale

Berbasis 4px grid dengan 8px sebagai unit standar. Semua spacing tersedia sebagai Tailwind utility.

4px
8px
16px
32px
48px
64px
05 — Foundations

Elevation & Shadows

Lima level elevation untuk surface hierarchy. Semakin tinggi level, semakin prominent komponen tersebut.

L0 · Flat
L1 · Card
L2 · Raised
L3 · Floating
L4 · Modal
06 — Foundations

Shape Language

Crius Design System menggunakan Professional Rounded — sistem sudut melengkung yang halus untuk memberikan kesan modern, premium, dan profesional.

rounded-md (8px)
rounded-xl (12px)
rounded-3xl (24px)
rounded-full (pill)
07 — Components

Buttons

Tombol menggunakan Montserrat uppercase dengan professional rounded pill shape. Varian dan state tersedia lengkap.

Variants
Sizes
08 — Components

Inputs & Forms

Form elements menggunakan chamfer subtle. Focus state menampilkan border biru dengan glow.

Form Controls
09 — Components

Cards

Kontainer konten modular dengan berbagai level shadow dan header style.

Standard Card

Konten card standard untuk informasi general atau list item.

Blue Surface

Card dengan background dark blue untuk prominence tinggi atau dashboard metrics.

10 — Components

Badges & Tags

Label status dan metadata ringkas dengan palet warna semantik.

New Release Industrial Featured In Stock Out of Stock
11 — Components

Alerts & Toasts

Feedback sistem untuk sukses, peringatan, atau error.

Informasi
Sistem akan melakukan maintenance pada hari Minggu jam 02:00 WIB.
Sukses
Data unit berhasil diperbarui ke server pusat.
12 — Components

Tables

Data tabular dengan header dark blue dan hover states.

Serial Number Product Name Pressure Status
KEV-350-001 KEV Mining Series 350 bar Active
KOW-250-003 KOW Oilfield Series 250 bar Pending
13 — Components

Modals & Drawers

Dialog box dan slide-out panels untuk interaksi fokus.

Filter Data

Gunakan panel ini untuk memfilter data unit berdasarkan lokasi, status, atau rentang tanggal.

15 — Components

Progress & Loading

Visual feedback untuk proses yang sedang berjalan.

Uploading Data...75%
Processing inquiry...
16 — Components

Avatars

Visual representation for users or entities using angular chamfer containers.

JD
AS
MK
RS
BT
17 — Components

Tooltips

Brief informative messages that appear on hover.

System Calibration Required
All units operational
18 — Components

Misc & Utilities

Miscellaneous UI elements including skeletons and spinners.

19 — Patterns

Hero Patterns

Komposisi halaman depan untuk brand impact yang maksimal.

Authorized Distributor

RELIABLE
INDUSTRIAL POWER.

Reliable Air. Real Performance terintegrasi untuk efisiensi operasional maksimal di site tambang dan manufaktur.

20 — Patterns

Pricing Tiers

Struktur penawaran harga modular.

Starter
POA
  • Standard Support
  • 1 Year Warranty
Professional
POA
  • Priority Support
  • 2 Year Warranty
  • On-site Service
Enterprise
Custom
  • 24/7 Dedicated Support
  • Custom SLA
21 — Patterns

Data Cards

Complex industrial cards for metrics and status monitoring.

Unit ID: KEV-350-01
Compressor Status
Running
Pressure
350.2 bar
Temp
82.4 °C
Flow
12.5 m³/m
Efficiency94%
Telemetry Alert
Maintenance Due
Critical

Scheduled maintenance for unit KEV-350-01 is overdue by 48 hours. Performance degradation detected.

22 — Patterns

Empty States

Placeholder visuals when data is unavailable.

📂

No Reports Found

Belum ada laporan aktivitas untuk rentang waktu ini. Silakan pilih rentang tanggal lain atau upload data manual.