Warna

Color palette utama untuk brand dan UI

Brand / Primary

Primary

#6366f1

Primary Dark (hover)

#4f46e5

Primary Light

#a5b4fc

Secondary

#8b5cf6

Semantic

Success

#10b981

Warning / Star

#f59e0b

Error

#ef4444

Dark Background

Bg Dark Start

#0c0a1d

Bg Dark Mid

#1a1a3e

Bg Dark End

#0f0c29

Dark Indigo

#1e1b4b

Deep Indigo

#312e81

Light Background & Text

Surface / White

#ffffff

Bg Light

#f8fafc

Border

#e2e8f0

Text Primary

#1e293b

Text Secondary

#64748b

Text Medium

#475569

Text Muted

#94a3b8

Gradien

Background gradients untuk section hero, card, dan placeholder

Hero Background — --btk-gradient-hero

linear-gradient(135deg, #0c0a1d 0%, #1a1a3e 40%, #0f0c29 100%)

Card Top Bar — --btk-gradient-card-bar

linear-gradient(90deg, #6366f1, #8b5cf6)

Placeholder — --btk-gradient-placeholder

linear-gradient(135deg, #1e1b4b, #312e81)

Tipografi

Font family, weight, dan ukuran

Inter

Font utama — 'Inter', -apple-system, sans-serif

Bobot: 400 (Regular), 500 (Medium), 600 (Semi-Bold), 700 (Bold), 800 (Extra-Bold)

h1 — 800 / clamp(32px,5.5vw,60px)

Hero Heading

h2 — 800 / clamp(28px,3.5vw,38px)

Section Heading

About h2 — 800 / clamp(24px,3vw,34px)

About Title

h3 (card) — 700 / 17px

Service Card Title

h3 (process) — 700 / 20px

Process Step Title

Body — 400 / 15px / lh 1.7

BATU Teknologi Kreatif adalah software house yang berbasis di Kota Batu, Jawa Timur, menyediakan layanan pengembangan website dan aplikasi digital.

Small / Nav — 500 / 14px

Layanan Portfolio Kontak

Section Tag — 600 / 12px / uppercase

TENTANG KAMI

Spacing

Sistem jarak konsisten untuk margin, padding, dan gap

Token	Size	px
--btk-space-1	0.25rem	4px
--btk-space-2	0.5rem	8px
--btk-space-3	0.75rem	12px
--btk-space-4	1rem	16px
--btk-space-5	1.25rem	20px
--btk-space-6	1.5rem	24px
--btk-space-8	2rem	32px
--btk-space-10	2.5rem	40px
--btk-space-12	3rem	48px
--btk-space-16	4rem	64px
--btk-space-20	5rem	80px

Tombol

Button styles dengan efek hover lift

Primary Button

Primary Primary Large Primary Block

<a class="btk-btn btk-btn-primary" href="#">Primary</a>

Outline Button (on dark)

Outline Outline Large

<a class="btk-btn btk-btn-outline" href="#">Outline</a>

Form

Input, textarea, dan elemen form lainnya

Nama Lengkap

Email

Pesan

Kirim Pesan

Card

Komponen card dengan efek hover lift

Web Development

Pembuatan website profesional dengan teknologi terkini untuk bisnis Anda.

Mobile Apps

Aplikasi mobile cross-platform untuk memperluas jangkauan bisnis.

Digital Marketing

Strategi pemasaran digital untuk meningkatkan visibilitas brand Anda.

Shadow

Bayangan untuk card, button, dan elemen UI

Shadow SM

0 1px 30px rgba(0,0,0,0.06)

Shadow MD (btn hover)

0 8px 25px rgba(99,102,241,0.35)

Shadow LG (dropdown)

0 12px 40px rgba(0,0,0,0.12)

Shadow Card Hover

0 12px 40px rgba(99,102,241,0.10)

Shadow Focus

0 0 0 4px rgba(99,102,241,0.08)

Shadow Badge

0 10px 30px rgba(99,102,241,0.30)

Icon

Font Awesome 6.5.0 — icon library untuk semua project

Icon umum yang dipakai di seluruh project:

Hero Section

Pola hero dengan gradient + efek ambient

Solusi Digital Terpercaya

Technology Partner
Untuk Bisnis Anda

Kami membantu bisnis berkembang dengan solusi teknologi inovatif yang dirancang khusus untuk kebutuhan Anda.

Mulai Sekarang Pelajari

Tokens CSS

Cara menggunakan design tokens di project

Import tokens.css

Copy tokens.css ke project Anda dan import di file CSS utama:

@import url("path/to/tokens.css");

/* Atau gunakan CDN */
@import url("https://styleguide.batuteknologi.web.id/tokens.css");

Via Tailwind CSS

Konfigurasi tailwind.config.js:

module.exports = {
theme: {
extend: {
colors: {
btk: {
primary: '#6366f1',
'primary-dark': '#4f46e5',
'primary-light': '#a5b4fc',
secondary: '#8b5cf6',
success: '#10b981',
warning: '#f59e0b',
'bg-dark': '#0c0a1d',
'bg-mid': '#1a1a3e',
'bg-end': '#0f0c29'
}
},
fontFamily: {
inter: ['Inter', '-apple-system', 'sans-serif']
}
}
}
}

Contoh penggunaan CSS variable

.my-button {
background: var(--btk-primary);
color: var(--btk-text-on-dark);
border-radius: var(--btk-radius-md);
padding: var(--btk-space-3) var(--btk-space-8);
font-weight: var(--btk-weight-semibold);
transition: var(--btk-transition-fast);
}

.my-button:hover {
background: var(--btk-primary-dark);
transform: translateY(-2px);
box-shadow: var(--btk-shadow-md);
}

Penerapan

Project-project yang menggunakan style guide ini

Project	Status	URL
Website Perusahaan	✓ Reference	batuteknologi.web.id
LinkBatu	● Perlu update	link.batuteknologi.web.id
POS Batu Teknologi	● Perlu update	pos.batuteknologi.web.id
CCTV Kota Batu	● Perlu update	cctv.batuteknologi.web.id
PDF to Image	● Perlu update	docs.batuteknologi.web.id
JSON Tools	● Perlu update	json.batuteknologi.web.id
QR Code Generator	● Perlu update	qr.batuteknologi.web.id
POS Superadmin	● Perlu update	superadmin-pos.batuteknologi.web.id
Anime Batu	● Perlu update	anime.batuteknologi.web.id

Style Guide