---
name: RUF Strategic Design System
colors:
  surface: '#131313'
  surface-dim: '#131313'
  surface-bright: '#3a3939'
  surface-container-lowest: '#0e0e0e'
  surface-container-low: '#1c1b1b'
  surface-container: '#201f1f'
  surface-container-high: '#2a2a2a'
  surface-container-highest: '#353534'
  on-surface: '#e5e2e1'
  on-surface-variant: '#bac9cc'
  inverse-surface: '#e5e2e1'
  inverse-on-surface: '#313030'
  outline: '#849396'
  outline-variant: '#3b494c'
  surface-tint: '#2563eb'
  primary: '#dbeafe'
  on-primary: '#172554'
  primary-container: '#3b82f6'
  on-primary-container: '#dbeafe'
  inverse-primary: '#1d4ed8'
  secondary: '#c8c6c5'
  on-secondary: '#313030'
  secondary-container: '#474746'
  on-secondary-container: '#b7b5b4'
  tertiary: '#ffeac0'
  on-tertiary: '#3e2e00'
  tertiary-container: '#fec931'
  on-tertiary-container: '#6f5500'
  error: '#ffb4ab'
  on-error: '#690005'
  error-container: '#93000a'
  on-error-container: '#ffdad6'
  primary-fixed: '#bfdbfe'
  primary-fixed-dim: '#2563eb'
  on-primary-fixed: '#0f172a'
  on-primary-fixed-variant: '#1e3a8a'
  secondary-fixed: '#e5e2e1'
  secondary-fixed-dim: '#c8c6c5'
  on-secondary-fixed: '#1c1b1b'
  on-secondary-fixed-variant: '#474746'
  tertiary-fixed: '#ffdf96'
  tertiary-fixed-dim: '#f3bf26'
  on-tertiary-fixed: '#251a00'
  on-tertiary-fixed-variant: '#594400'
  background: '#131313'
  on-background: '#e5e2e1'
  surface-variant: '#353534'
typography:
  display-lg:
    fontFamily: Montserrat
    fontSize: 80px
    fontWeight: '800'
    lineHeight: 90px
    letterSpacing: -0.02em
  display-lg-mobile:
    fontFamily: Montserrat
    fontSize: 48px
    fontWeight: '800'
    lineHeight: 56px
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Montserrat
    fontSize: 48px
    fontWeight: '700'
    lineHeight: 56px
  headline-lg-mobile:
    fontFamily: Montserrat
    fontSize: 32px
    fontWeight: '700'
    lineHeight: 40px
  headline-md:
    fontFamily: Montserrat
    fontSize: 32px
    fontWeight: '700'
    lineHeight: 40px
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.05em
spacing:
  container-max: 1280px
  gutter: 24px
  margin-mobile: 20px
  margin-desktop: 64px
  stack-sm: 8px
  stack-md: 16px
  stack-lg: 32px
  section-gap: 120px
---

## Brand & Style
Sistem desain ini mencerminkan identitas agensi web premium yang mengutamakan presisi, otoritas, dan modernitas. Kepribadian brand dibangun di atas fondasi **Bold Minimalism**, di mana setiap elemen memiliki tujuan fungsional yang jelas tanpa hiasan yang tidak perlu.

Target audiens adalah eksekutif tingkat tinggi dan pemilik bisnis yang mencari solusi digital kelas atas. UI harus membangkitkan respon emosional berupa rasa percaya, kecanggihan teknologi, dan eksklusivitas. Gaya visual menggabungkan tipografi masif yang berani dengan estetika *high-end dark mode*, menciptakan kontras tajam yang mengarahkan fokus pengguna pada konten strategis.

## Colors
Palet warna didominasi oleh spektrum gelap untuk menciptakan kesan kedalaman dan kemewahan. 

- **Primary (Signal Blue):** Digunakan secara hemat sebagai aksen tajam untuk *call-to-action*, indikator aktif, dan elemen interaktif kunci.
- **Surface & Background:** Menggunakan `#0F0F0F` (True Black/Deep Charcoal) sebagai latar belakang utama untuk memastikan kontras teks yang maksimal.
- **Secondary/Container:** `#1A1A1A` digunakan untuk memisahkan area konten atau kartu, memberikan hirarki visual yang halus pada layout gelap.
- **Neutral:** Putih murni dan abu-abu muda digunakan secara eksklusif untuk tipografi dan ikon guna menjamin keterbacaan.

## Typography
Tipografi adalah pilar utama dalam sistem desain ini. Menggunakan **Montserrat** untuk heading guna memberikan kesan arsitektural, berani, dan prestisius. **Inter** dipilih sebagai teks isi karena sifatnya yang sistematis dan sangat mudah dibaca pada layar digital.

Gunakan *Uppercase* untuk label kecil guna memperkuat kesan profesional. Pastikan ada kontras ukuran yang signifikan antara heading dan body text untuk menciptakan ritme visual yang dinamis.

## Layout & Spacing
Sistem desain ini menggunakan **Fluid Grid** dengan margin luar yang luas untuk menciptakan kesan ruang yang lega dan premium. 

- **Desktop:** 12 kolom dengan margin 64px. Fokus pada simetri dan penggunaan *whitespace* (negatif space) yang masif di antara bagian-bagian besar (120px+).
- **Mobile:** 4 kolom dengan margin 20px. Elemen tipografi besar harus tetap dominan namun disesuaikan agar tidak memotong kata secara janggal.
- **Spacing Rhythm:** Menggunakan kelipatan 8px untuk menjaga konsistensi vertikal.

## Elevation & Depth
Sesuai dengan gaya minimalis premium, sistem desain ini menghindari bayangan (shadows) tradisional yang berat. Kedalaman diciptakan melalui **Tonal Layering** dan **Low-contrast Outlines**.

- **Permukaan:** Gunakan perubahan warna latar belakang yang halus (dari `#0F0F0F` ke `#1A1A1A`) untuk menunjukkan elevasi.
- **Borders:** Gunakan garis tepi (stroke) setebal 1px dengan opasitas rendah (misalnya `rgba(255,255,255,0.1)`) untuk mendefinisikan batas elemen seperti kartu atau input field.
- **Aksen:** Kedalaman juga dapat dicapai dengan *glow effect* halus pada elemen primer (Signal Blue) untuk memberikan kesan teknologi futuristik.

## Shapes
Sistem desain ini menggunakan **Sharp Edges** (0px roundedness). Penggunaan sudut siku yang tajam memperkuat kesan arsitektural, teknis, dan berwibawa. Garis-garis lurus yang tegas mencerminkan presisi strategis agensi. Pengecualian hanya diberikan pada elemen ikonografi yang memerlukan kejelasan universal.

## Components
Komponen harus mencerminkan estetika minimalis namun berperforma tinggi.

- **Buttons:** Menggunakan sudut tajam. *Primary button* berwarna Signal Blue dengan teks hitam tebal. *Secondary button* menggunakan *ghost style* dengan border putih 1px. State hover harus memberikan transisi warna yang instan dan tajam.
- **Input Fields:** Latar belakang transparan dengan border bawah saja atau border penuh tipis. Label diletakkan di atas dengan ukuran kecil dan huruf kapital.
- **Cards:** Tanpa bayangan, menggunakan border tipis `1px solid #222` atau warna latar yang sedikit lebih terang dari background utama.
- **Lists:** Gunakan ikon kustom yang minimalis atau garis horisontal halus untuk memisahkan item guna menjaga keteraturan visual.
- **Navigation:** Header yang kaku dan tetap (sticky) dengan latar belakang blur transparan untuk menjaga konteks saat di-scroll.