<!-- Generated by ExtractVibe — https://extractvibe.com/brand/danantaraindonesia.co.id -->
<!-- Extracted: 2026-08-19T07:29:20.322Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "Danantara Indonesia - Daya Anagata Nusantara"
description: "A solemn, authoritative, and highly formal institutional brand that projects national pride and economic stewardship. The design language is rooted in classic editorial traditions, utilizing deep maroon and sharp geometry to convey stability, heritage, and serious governance."
colors:
  primary: "#800000"
  tertiary: "#007aff"
  neutral: "#737373"
  surface: "#ffffff"
  on-surface: "#0d0d0d"
  surface-dark: "#0d0d0d"
typography:
  display-lg:
    fontFamily: "__Newsreader_380ca2"
    fontSize: "48px"
    fontWeight: "400"
    lineHeight: "56px"
    letterSpacing: "-0.5px"
  headline-lg:
    fontFamily: "__Inter_999373"
    fontSize: "38px"
    fontWeight: "300"
    lineHeight: "47.5px"
    letterSpacing: "-0.95px"
  headline-md:
    fontFamily: "__Inter_999373"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
  headline-sm:
    fontFamily: "__Inter_999373"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
  body-md:
    fontFamily: "__Inter_999373"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  sm: "12px"
  md: "50px"
  lg: "9999px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#ffffff"
    rounded: "12px"
    padding: "14px 16px"
    fontSize: "14px"
    fontWeight: "400"
    borderColor: "#d4d4d4"
    borderWidth: "1px"
  button-primary:
    backgroundColor: "#800000"
    textColor: "#ffffff"
    rounded: "0px"
    padding: "0px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#d4d4d4"
  button-outline:
    textColor: "#ffffff"
    rounded: "0px"
    padding: "0px 0px 0px 24px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#ffffff"
    borderWidth: "0px 0px 0px 1px"
---

# Danantara Indonesia - Daya Anagata Nusantara — Design System

## Overview

The visual identity of Danantara Indonesia is defined by an unyielding commitment to institutional gravity and historical continuity. Rooted in the archetypes of The Ruler and The Sage, the design language rejects transient trends in favor of enduring stability. It mirrors the authoritative presence of central banking institutions and the rigorous editorial standards of legacy financial publications like Bloomberg and The New York Times. The atmosphere is solemn, structured, and deeply formal, projecting an image of economic stewardship and national pride. Every element serves to reinforce the brand’s role as a pillar of governance, utilizing sharp geometry and high-contrast layouts to convey clarity and power. This is not a brand for casual engagement; it is a digital embodiment of state-level responsibility.

The design explicitly avoids playfulness, whimsy, or excessive decoration. There are no soft gradients, rounded corners, or illustrative mascots. Instead, the interface relies on stark minimalism and typographic precision to guide the user through complex economic data. The visual hierarchy is rigid, ensuring that information is consumed with the same seriousness as a legal decree or a central bank report. The use of deep maroon acts as a visual anchor, signaling authority and tradition, while the generous use of white space ensures that the content remains the sole focus. This approach creates a digital environment that feels immutable, trustworthy, and distinctly Indonesian in its formal dignity. The user experience is one of quiet confidence, where every pixel reinforces the institution’s mandate to manage the nation’s economic future with precision and integrity.

**Key characteristics:**

- Vibe — authoritative, institutional, formal, heritage, sober, structured
- Archetypes — The Ruler, The Sage
- Comparable to — The New York Times, Bloomberg, Central Banks, Government Ministries
- Design era — classic-editorial
- Emotional tone — sober-authoritative
- Target audience — Government officials, institutional investors, policy makers, and the general public seeking reliable national economic information.
- Visual energy — 4/10 (moderate)

## Colors

The color palette is strictly limited to reinforce institutional seriousness and heritage. The primary maroon (#800000) serves as the dominant signal of authority, drawing from traditional heraldic and governmental color codes to evoke stability and power. It is used sparingly for key structural elements and accents, ensuring it commands attention without overwhelming the content. The surface color (#ffffff) provides a clinical, high-contrast backdrop that maximizes readability and emphasizes the clarity of the information presented. This binary approach eliminates visual noise, ensuring that the design remains sober, focused, and undeniably formal.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#800000` | Maroon |
| accent / tertiary | `#007aff` | Dodger Blue |
| surface | `#ffffff` | White |
| background | `#ffffff` | White |
| text | `#0d0d0d` | Near-Black |
| muted | `#737373` | Dim Gray |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#0d0d0d` | Near-Black |

## Typography

The type system leverages the structural precision of Inter for interface elements and the editorial gravitas of Newsreader for headline content. Inter’s neutral, geometric clarity ensures that data and navigation remain accessible and unobtrusive, supporting the functional requirements of a complex institutional platform. Newsreader introduces a humanist serif quality that connects the digital experience to the rich tradition of print journalism and official documentation. This combination creates a hierarchy that is both modern and timeless, communicating that while the medium is digital, the values are rooted in heritage and serious governance. The typographic scale is rigid, prioritizing legibility and order above decorative flair.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| __Inter_999373 | body | self-hosted | 400, 600, 700 |
| __Newsreader_380ca2 | heading | self-hosted | 400 |
| __Inter_999373 | heading | self-hosted | 300, 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | __Newsreader_380ca2 | 48px | 400 | 56px | -0.5px |
| Heading 2 | __Inter_999373 | 38px | 300 | 47.5px | -0.95px |
| Heading 3 | __Inter_999373 | 16px | 400 | 24px | — |
| Heading 4 | __Inter_999373 | 16px | 400 | 24px | — |
| Body | __Inter_999373 | 16px | 400 | 24px | — |

### Conventions

- Heading case — title-case
- Body line-height — 24px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` |

### Gradients

- `linear-gradient(rgb(110, 148, 174), rgba(0, 0, 0, 0))`
- `linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0))`
- `linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0))`
- `linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0))`
- `linear-gradient(to top, rgb(12, 12, 12), rgba(0, 0, 0, 0))`
- `linear-gradient(rgb(76, 134, 180), rgba(0, 0, 0, 0))`

## Shapes

Border-radius scale:

- `sm` — 12px
- `md` — 50px
- `lg` — 9999px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#ffffff`
- Text — `#ffffff`
- Radius — `12px`
- Padding — `14px 16px`
- Font size — `14px`
- Font weight — `400`
- Border — `1px solid #d4d4d4`
- Sample copy — "BPI Danantara"

**Primary**

- Background — `#800000`
- Text — `#ffffff`
- Radius — `0px`
- Padding — `0px`
- Font size — `16px`
- Font weight — `400`
- Border — ` solid #d4d4d4`

**Outline**

- Text — `#ffffff`
- Radius — `0px`
- Padding — `0px 0px 0px 24px`
- Font size — `16px`
- Font weight — `400`
- Border — `0px 0px 0px 1px solid #ffffff`
- Sample copy — "Indonesia"

## Do's and Don'ts

### Do

- Use the primary brand color #800000 (Deep Maroon) for all primary actions, key headings, and brand identity elements to establish authority.
- Apply the #007aff (Bright Blue) strictly as an accent color for hyperlinks or secondary data highlights, ensuring high contrast against white or light gray backgrounds.
- Set all headings to Title Case using the Newsreader serif typeface (weights 400) or Inter at 300-400 weight for a sophisticated, editorial look.
- Render body copy in Inter (weights 400, 600, 700) with a fixed line-height of 24px to ensure readability and a dense, professional information density.
- Style primary buttons with sharp 0px border-radius, #800000 background, and white text, avoiding any shadows or rounded corners to maintain a rigid, serious aesthetic.
- Utilize subtle linear gradients (e.g., rgba(0,0,0,0.6) to transparent) for image overlays to ensure text legibility over media, rather than solid opaque blocks.
- Keep all shadows at rgba(0,0,0,0) (none) for UI elements; rely on borders and color contrast for hierarchy rather than depth effects.
- Use noun-based navigational labels (e.g., 'BPI Danantara', 'Indonesia') for buttons and menu items, avoiding verb-heavy or casual phrasing.

### Don't

- Do not use emoji, exclamations, or playful language; the tone must remain strictly formal and matter-of-fact.
- Avoid rounded corners (border-radius > 0px) on primary buttons and major UI containers; the brand favors sharp, geometric edges.
- Do not use light mode backgrounds with dark text unless the text color is strictly #0d0d0d or black; avoid gray text for primary content.
- Never use sans-serif fonts for main headings; reserve Inter for body text and secondary metadata only.
- Avoid heavy drop shadows or multi-layered depth effects; the design is flat and relies on typographic hierarchy.
- Do not use title-case for body paragraphs; reserve Title Case exclusively for headings and UI labels.
- Avoid vibrant, saturated colors other than the specific #800000 and #007aff palette; maintain a limited, conservative color system.
- Do not use pill-shaped (50px radius) or fully rounded (9999px radius) elements for interactive components; these are reserved for specific decorative tags if at all.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 9/10 | casual |
| Playful ↔ Serious | 9/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 6/10 | balanced |
| Respectful ↔ Irreverent | 1/10 | respectful |
| Technical ↔ Accessible | 4/10 | technical |

### Copywriting style

- Avg. sentence length — 18 words
- Vocabulary — advanced
- Jargon — heavy
- CTA style — noun-based navigational labels
- Rhetorical devices — quotation, parallelism

### Sample copy

> Wujudkan Solidaritas Kemerdekaan, Antusiasme Masyarakat Himpun Rp2,16 Miliar untuk Warga Terdampak Bencana NTT

> Danantara Indonesia merupakan badan pengelola investasi yang menangani, mengoptimalkan, dan mengembangkan aset strategis Indonesia

> Semua kekayaan kita harus sebesar-besarnya untuk kepentingan dan kemakmuran rakyat (Indonesia)

> Melalui pendekatan terintegrasi, Danantara Indonesia memastikan aset negara dikelola secara efektif, dioptimalkan, dan diinvestasikan kembali demi kemajuan bangsa

> Perkuat Industri Manajemen Investasi Nasional, DAM Ambil Alih Pengendalian Empat Manajer Investasi BUMN dengan Total Dana Kelolaan Rp170 Triliun

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | ico | [link](brands/danantaraindonesia.co.id/logo-0.ico) | 95% |
| favicon | — | png | [link](brands/danantaraindonesia.co.id/logo-1.png) | 95% |
| favicon | — | png | [link](brands/danantaraindonesia.co.id/logo-2.png) | 95% |
| favicon | — | png | [link](brands/danantaraindonesia.co.id/logo-3.png) | 95% |
| primary | dark | — | [link](brands/danantaraindonesia.co.id/logo-4.png) | 85% |
| primary | light | — | [link](brands/danantaraindonesia.co.id/logo-5.png) | 85% |
| secondary | — | — | [link](brands/danantaraindonesia.co.id/logo-6.png) | 85% |

## Sources

- Live brand page — https://extractvibe.com/brand/danantaraindonesia.co.id
- Raw JSON — https://extractvibe.com/api/brand/danantaraindonesia.co.id
- DESIGN.md (this file) — https://extractvibe.com/api/brand/danantaraindonesia.co.id/design.md
- Extracted — 2026-08-19T07:29:20.322Z
- Generator — ExtractVibe vv1
- Quality score — 90/100