Niche Admin — Leveling Digital

# 🎨 BRAND DNA — Niche Visual Vocabulary

**Detected niche:** SaaS / Tools / Builder / Tech (confidence 100%)
**Matched keywords:** saas, tools, code, no-code, automation

**WAJIB:** pakai MINIMUM 2 element decorative dari vocabulary niche di bawah per carousel. Goal: brand ini visually distinct dari brand lain — bukan cuma beda warna, tapi beda IDIOM. Hindari anti-patterns yang listed.

---

## Bucket 3: SaaS / Tools / Builder / Tech

**Brands:** Leveling Digital, Naia tools, dev productivity

**Visual signature:** Linear/Vercel meets Notion. Code-aware. Geometric grid system. Mono accent.

### Color tendencies
- **Primary:** brand color
- **Code accent:** `#06b6d4` cyan, `#a855f7` violet (terminal palette)
- **Background:** clean white/cream OR dark `#1a1a1a` for "code editor" feel
- **Mono font:** JetBrains Mono, Fira Code, IBM Plex Mono

### Decorative SVG library

```html
<!-- Code brackets accent -->
<div style="font-family:'JetBrains Mono',monospace; font-size:120px; line-height:0.9; color:rgba(239,68,68,0.15); font-weight:800;">{ }</div>

<!-- Terminal prompt bar -->
<div style="font-family:'JetBrains Mono',monospace; padding:12px 18px; background:#1a1a1a; color:#10b981; border-radius:6px; font-size:14px;">
  <span style="color:#06b6d4;">$</span> npm run launch <span style="color:#5a5a5a;">--tool product</span>
</div>

<!-- Geometric grid pattern (background) -->
<svg width="200" height="200" viewBox="0 0 200 200" style="position:absolute; opacity:0.05;">
  <defs>
    <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
      <path d="M 20 0 L 0 0 0 20" fill="none" stroke="currentColor" stroke-width="0.5"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#grid)"/>
</svg>

<!-- Window chrome (mac-style) decorative -->
<svg width="60" height="14" viewBox="0 0 60 14">
  <circle cx="7" cy="7" r="5" fill="#ef4444"/>
  <circle cx="22" cy="7" r="5" fill="#fbbf24"/>
  <circle cx="37" cy="7" r="5" fill="#10b981"/>
</svg>

<!-- Code line numbers gutter -->
<div style="font-family:'JetBrains Mono',monospace; font-size:13px; color:#5a5a5a; line-height:1.6;">
  <div>01  function ship()</div>
  <div>02   { return 🚀; }</div>
</div>

<!-- Tag/chip (npm-style) -->
<div style="display:inline-block; padding:4px 10px; background:rgba(168,85,247,0.1); color:#a855f7; border-radius:4px; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:600;">v2.5.0</div>

<!-- Cursor blink (terminal vibe) -->
<span style="display:inline-block; width:12px; height:24px; background:currentColor; vertical-align:middle; animation: blink 1s steps(2) infinite;">&nbsp;</span>
```

### Layout idioms
- Code-fence styled callouts (background `#1a1a1a` mono font green text)
- Window-chrome on screenshots/UI mockups
- Mono font on numbers/stats (creates tech feel)
- Grid backgrounds (1px lines @ 20-48px)
- Brackets `{ }` `< >` as decorative ghost text

### Anti-patterns (JANGAN)
- Hand-drawn elements
- Watercolor / soft blob shapes
- Caveat/handwritten fonts (mismatch professional tech)
- Cluttered illustrations

---

---

**Reminder:** vocabulary di atas adalah TAMBAHAN ke design system v2 (Section A-H). Pakai keduanya: base Notion-Native style PLUS niche-specific decorative DNA dari atas.