# DEP Design System
**PT Dinamika Electro Plating** — Industrial electroplating services since 1983.

This design system codifies the visual & content identity of PT Dinamika Electro Plating ("DEP") so future communications — website, decks, proposals, signage, certificates — feel like one company.

---

## About the company

PT Dinamika Electro Plating is an Indonesian B2B electroplating service provider, established **26 April 1983** and based in Bandung. The company offers metal-finishing services (zinc plating, nickel chrome plating, nickel brass plating) for industrial customers — primarily automotive parts (PT Sinar Terang Logamjaya, PT Bahtera Metalindo, SP Racing, etc.), household & kitchen goods (PT Almasindo, PT Flipper), and office supplies (PT Citra Bandung Laksana).

**Mission.** *Secara konsisten melakukan perbaikan berkelanjutan untuk meningkatkan kualitas produk yang dihasilkan, output produksi, dan efisiensi kerja, dengan tetap meminimalisir dampak negatif yang ditimbulkan dari proses produksi yang berlangsung.*
**Vision.** *Menjadi perusahaan penyedia jasa electroplating, yang berfokus pada jasa plating yang berkualitas, berorientasi pada kepuasan pelanggan, harga yang kompetitif, dan efisiensi proses produksi.*

**Core services**
- Jasa Plating Zinc (Rack & Barrel)
- Jasa Plating Nickel Chrome (Rack & Barrel)
- Jasa Plating Nickel Brass

**Key facilities**
- Instalasi Pengolahan Air Limbah (IPAL) sistem Elektrokoagulasi
- Alat Thickness measurement
- Salt Spray Test (SST) via supplier laboratory partner

**Contact**
- Jl. Caringin No. 236, Babakan Ciparay, Kota Bandung
- dinamika_ep@yahoo.co.id
- +62 877-8104-4173 · (022) 20562755 · (022) 6018722 · (022) 6076912

### Sources used to build this system
- `uploads/logo.jpg` — original brand mark (raster, 1254×1254)
- `uploads/Company Profile DEP 2023.pdf` — 10-page corporate profile (preserved at `assets/Company Profile DEP 2023.pdf`)

> The brand has no prior digital design system, type guidelines, photography library, or website. Everything in this folder is a **first pass** synthesized from the logo and company profile. Treat it as a foundation to iterate on, not gospel.

---

## Index — what's in this folder

```
README.md                  ← you are here
SKILL.md                   ← Agent-Skills entry point
colors_and_type.css        ← all design tokens (CSS vars) + semantic styles

assets/
  logo.svg                 ← full lock-up (DEP + tagline) — vector
  logo-mark.svg            ← DEP letters only (no tagline)
  logo-mono-white.svg      ← reverse mono (for dark / blue backgrounds)
  logo-original.jpg        ← original raster, do not redistribute
  Company Profile DEP 2023.pdf

fonts/
  (none — Barlow + Inter loaded from Google Fonts)

preview/
  *.html                   ← design system reference cards (rendered in the
                             Design System tab)

ui_kits/
  marketing-site/
    index.html             ← interactive marketing site mock
    *.jsx                  ← components

slides/
  (none — no deck templates were provided)
```

---

## CONTENT FUNDAMENTALS

DEP communicates as a **veteran B2B industrial supplier** — not a startup, not a consumer brand. Tone is **direct, factual, and respectful**, with bilingual (Indonesian-first / English-supporting) copy that mirrors how the company already writes.

### Voice characteristics
| Trait | What it means |
|---|---|
| **Confident, not boastful** | Lean on dates and credentials ("Berdiri sejak 1983", "40+ tahun pengalaman") rather than adjectives. |
| **Service-oriented** | Customer comes first. Use *Anda* (formal "you") and *kami* ("we"), never *kamu* or *aku*. |
| **Procedural** | Sentences favor process over personality. Short, clean, declarative. |
| **Bilingual** | Section titles often English ("About the Company", "Our Services"), body copy Indonesian. Mirror this. |
| **Humble** | The profile uses *etc* / *etc.* after customer names — DEP under-claims rather than over-claims. |

### Casing & typography rules
- **Section titles** — English, Title Case ("Our Mission and Vision", "Our Customers").
- **Service names** — bilingual phrases, kept verbatim ("Jasa Plating Zinc", "Nickel Brass Plating: Rack & Barrel"). Do not translate.
- **Company name** — always written in full as "PT. Dinamika Electro Plating" or short form "DEP" / "PT DEP". The "PT." prefix is part of the name.
- **All-caps** is reserved for the wordmark itself and short eyebrow labels (≤ 4 words). Never set a paragraph in caps.
- **Numbers** — use Indonesian conventions in body copy (*Rp*, *kg*, *26 April 1983*) and Arabic numerals.
- **No emoji.** This is a heavy-industry brand. Use icons or unicode bullets (•) instead.
- **Sentence-case** for buttons and UI labels ("Hubungi kami", "Lihat layanan"), Title Case for nav.

### Vocabulary cheatsheet (do / avoid)
| Use | Avoid |
|---|---|
| jasa electroplating, jasa plating | "plating solutions", "surface engineering" |
| pelanggan, mitra, klien | "user", "consumer" |
| kualitas, konsisten, efisien | "world-class", "innovative", "cutting-edge" |
| berkualitas, berpengalaman, berorientasi | hype words, superlatives |
| Hubungi kami / Contact us | "Get in touch", "Let's chat" |

### Example copy — short
> **Berdiri sejak 1983.**
> Jasa electroplating untuk industri otomotif, peralatan rumah tangga, dan office supplies di Bandung dan sekitarnya.

### Example copy — service description
> **Jasa Plating Nickel Chrome**
> Pelapisan nickel chrome dengan metode rack & barrel untuk komponen otomotif dan peralatan rumah tangga. Hasil pelapisan diuji ketebalannya menggunakan alat thickness gauge dan dapat dilengkapi dengan Salt Spray Test (SST) melalui laboratorium rekanan.

### Example CTA
> Diskusikan kebutuhan plating Anda — **Hubungi kami** di (022) 20562755.

---

## VISUAL FOUNDATIONS

The DEP visual language is **industrial, reliable, and unfussy** — derived directly from the logo: a deep cobalt-blue wordmark inside a thin red rounded-rectangle border on white. Every other choice in this system reinforces those three colors and that geometric clarity.

### Color
- **Primary — DEP Blue `#054493`.** Used for headlines, primary buttons, link text, and inverted backgrounds. Conveys the engineered, trustworthy character of metal-finishing work.
- **Accent — DEP Red `#CD090B`.** Used sparingly: thick borders (≥ 2px), the small underline / accent line on section heads, danger states, eyebrow labels. Never as a large fill behind text — it competes with the blue.
- **Neutrals — Steel scale.** A cool grey palette (slightly blue-shifted) extends the metalwork association from `steel-50` (near-white surface) to `steel-900` (near-black ink).
- **Vibe of imagery.** Where photography exists it should be **cool-toned, slightly desaturated, and high-detail** — close-ups of plated metal, racks of zinc-coated parts, the workshop floor. No people-as-mascot stock photos. No warm filters. No soft-glow, no bokeh-as-decoration.

### Type
- **Display — Barlow** (700 / 800 / 900). Geometric, semi-condensed, slightly industrial. Used for H1–H4 and big numbers. Loaded from Google Fonts.
- **Body — Inter** (400 / 500 / 600). Neutral, exceptionally legible at small sizes. For paragraphs, UI, captions. Loaded from Google Fonts.
- **Mono — JetBrains Mono.** For technical specs, part numbers, dimensions. Loaded from Google Fonts.

These are the official typefaces of the DEP design system. The wordmark in the logo is set in Barlow Black with hand-tightened spacing.

### Spacing & layout
- **4px grid.** All spacing, padding, gaps are multiples of 4 (`--sp-1` … `--sp-24`).
- **Container** maxes at **1200px**; gutter `clamp(16px, 4vw, 32px)`.
- **Density.** Generous — DEP is a B2B brand and section padding should feel calm. Default vertical rhythm: 80–120px between major sections on web; 32–48px between cards.
- **Layout rules.** Strong horizontal rules, lots of whitespace, never centered body copy beyond a hero. Tables and spec sheets are encouraged.

### Backgrounds
- **Default white** (`#FFFFFF`).
- **Surface tint** `--surface-tint` (`#E8EEF8`) — soft blue wash for alternating sections.
- **Inverse** — solid `--dep-blue-ink` (`#021E45`) for hero / footer / quote blocks. White text on inverse is mandatory; do not put red on this background.
- **No gradients** as backgrounds. (Avoid the AI-slop trope of bluish-purple gradients entirely.)
- **No textures or patterns** by default. A single optional motif — a thin red rounded-rectangle "frame" echoing the logo border — may be used to bracket a callout.
- **Full-bleed photography is allowed** for hero sections and service detail pages, always with a 35–55% darkening overlay so blue or white text remains legible.

### Borders
- Default UI borders: `1px solid var(--border)` (steel-200).
- Strong dividers: `1px solid var(--border-strong)`.
- **Logo-echo border:** `3px solid var(--dep-red)` with `border-radius: var(--r-logo)` (34px) — reserved for hero callouts, certification badges, "since 1983" lockups. Use sparingly, ≤ 1 per screen.

### Corner radii
- `--r-sm` 4px — inputs, small chips
- `--r-md` 8px — buttons, cards, fields
- `--r-lg` 12px — large cards, modals
- `--r-xl` 20px — hero panels
- `--r-logo` 34px — only when echoing the logo border
- `--r-pill` 999px — status pills, tags
- Cards almost always use `--r-md` or `--r-lg`. The 34px radius is brand-coded, not a generic decoration.

### Cards
- White surface, 1px steel-200 border, **no shadow by default**, radius `--r-md` or `--r-lg`, padding `--sp-6` to `--sp-8`.
- Hover (interactive cards only): elevate to `--shadow-2`, no transform.
- Featured cards: replace top border with `4px solid var(--dep-red)` (industrial accent), or use the full `--r-logo` red-bordered frame for marquee uses.

### Shadows
Three soft, neutral elevations — no colored or glowing shadows.
- `--shadow-1` — resting cards, inputs
- `--shadow-2` — hovered cards, dropdowns
- `--shadow-3` — modals, popovers
- `--shadow-brand` — *only* under primary buttons / hero CTAs (subtle blue glow).

### Buttons
- **Primary** — solid `--dep-blue` fill, white text, `--r-md`, `--sp-3` `--sp-5` padding, 600 weight. Hover → `--dep-blue-deep`. Press → translate-y(1px), no scale change.
- **Secondary** — white fill, 1.5px `--dep-blue` border, `--dep-blue` text. Hover → `--surface-tint` fill.
- **Ghost** — transparent, `--dep-blue` text, underline-on-hover.
- **Destructive** — solid `--dep-red`, white text. Used only for actually destructive actions; never for marketing CTAs.
- **Don't:** rounded-pill primary buttons, gradient fills, drop-shadows on text.

### Hover & press states
- **Hover.** Color darkens (use `*-deep` token) OR background tint shifts. Never use opacity-only hovers — they look unfinished.
- **Press.** `transform: translateY(1px)` and shadow drops one level. No scale change.
- **Focus.** 2px outline `var(--dep-blue)` with 2px offset. Never remove the focus ring.

### Animation
- **Easing.** `--ease-standard` (subtle ease-in-out) for most transitions; `--ease-out` for things appearing.
- **Durations.** 120ms (micro) / 200ms (default) / 360ms (large surface).
- **No bouncy springs, no parallax, no scroll-jacking, no lottie mascots.** Fades, color shifts, small translates only. The brand is over 40 years old; don't make it act like a startup.

### Transparency & blur
- Body copy is always at full opacity. Use the `--fg-muted` and `--fg-soft` tokens for hierarchy instead of `opacity`.
- Backdrop-blur is allowed only on overlays atop full-bleed photography (`backdrop-filter: blur(8px); background: rgba(255,255,255,0.85)`). Never on solid color sections.

### Capsules vs protection gradients
- Use **solid pills** (`--r-pill` + solid bg) for status tags ("Operational", "ISO 14001"). Never use a colored gradient pill.
- Use a **bottom-up dark gradient** only as a protection layer over photography, sized to cover ≤ the bottom 40% of the image, fading from `rgba(2,30,69,0)` to `rgba(2,30,69,0.85)`.

### Fixed elements
- Top nav: 72px tall, white, 1px bottom border `--border`. Logo left, nav center-or-right, primary CTA far-right. No sticky sub-nav.
- Footer: blue-ink (`--dep-blue-ink`) background, white text, 4-column grid on desktop, copyright row at bottom.

---

## ICONOGRAPHY

DEP has no proprietary icon set. The original company profile relies entirely on **type, geometry, and the logo itself** — no icons, no emoji, no illustrations.

### Approach
- **Default icon set: Lucide** (CDN) — chosen because its **2px stroked, geometric, slightly industrial** style is the closest free match to the engineering / mechanical character of the brand. (Substitution flag: this is a recommendation, not a constraint inherited from existing materials. Confirm with the user.)
- **Stroke weight:** always **2px**, `stroke-linecap: round`, `stroke-linejoin: round`.
- **Default size:** 20px in UI, 24px in marketing, 48–64px in feature blocks. Always set on a 4px grid.
- **Color:** inherit `currentColor` so an icon adopts its parent's text color. Default tint `--fg`; brand callouts use `--dep-blue`; never use red except for danger / required-field markers.
- **Filled vs stroked:** stroked by default. Filled only inside compact status pills.

### Loading icons
```html
<script src="https://unpkg.com/lucide@latest"></script>
<i data-lucide="shield-check" class="w-5 h-5"></i>
<script>lucide.createIcons();</script>
```

### Specific replacements
- ❌ Emoji (🏭, ✅, 📞) — never used. Replace with Lucide icons (`factory`, `circle-check`, `phone`).
- ❌ Hand-drawn SVG illustrations — not part of the brand.
- ✅ Unicode bullets `•` are fine inside dense lists.
- ✅ The DEP logo and the **red rounded-rectangle frame** count as "brand iconography" — use them where decoration is needed.

### Available logo assets (in `assets/`)
| File | Use case |
|---|---|
| `logo.svg` | Default — full lockup with tagline |
| `logo-mark.svg` | Compact — DEP letters + red frame only |
| `logo-mono-white.svg` | On dark / brand-blue backgrounds |
| `logo-original.jpg` | Reference raster only — don't ship to web |

---

## Substitutions & open questions (please confirm)

These items are educated guesses — flag them with the user before going to production:

1. **Icon system.** Lucide chosen as a contemporary, stroked, industrial-feeling default. — *Confirm or pick a different family.*
2. **Photography.** No image library exists. Marketing UI uses placeholder tiles. — *Need: workshop / process photos.*
3. **Brand voice in English.** The company profile is mostly Indonesian; English appears only as section titles. We assume Indonesian-first body copy with English support — *please confirm the bilingual model.*