Skip to content

Just a moment...

garuda-indonesia.com

“A stark, utilitarian interface focused entirely on functionality and security verification. The design is purely functional, stripping away all decorative elements to prioritize clarity and speed during the loading process.”

utilitarian
minimalist
functional
neutral
system-native
secure
flat
direct

Color Palette

Colors

#ffffff

background

#313131

text

#0000ee

link

Typography

Fonts

system-ui

body
400
system

-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

system-ui

heading
600
system

-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

monospace

mono
400
system
body

The quick brown fox

h1

The quick brown fox

h2

The quick brown fox

Voice & Tone

Personality

Visual Energy

2/10

Design Era

flat-2.0

Emotional Tone

neutral-professional

Target Audience

General web users encountering a security checkpoint; users seeking immediate access without distraction.

Comparable Brands

Cloudflare
Akamai
AWS Console
GitHub

Brand Rules

Dos & Don'ts

Do

  • Use system-ui font for all text, with 400 weight for body and 600 weight for headings.
  • Apply sentence-case capitalization to all headings and UI labels.
  • Set body text color to #313131 on a pure white (#ffffff) background.
  • Maintain a strict line-height of 18.4px for body text to ensure readability.
  • Use monospace font for any code snippets or technical identifiers.
  • Keep all UI elements flat with no box-shadows or gradients.
  • Apply a base spacing unit of 2px for margins and padding to maintain tight, compact layouts.
  • Use border-radius of 2px for any interactive elements or containers.

Don't

  • Do not use emoji in any copy or UI elements.
  • Do not use exclamations in status messages or instructions.
  • Do not use title case for headings; always use sentence case.
  • Do not apply gradients to backgrounds, buttons, or text.
  • Do not use box-shadows for depth or focus states.
  • Do not use serif fonts or custom web fonts; stick to system-ui.
  • Do not use vibrant or saturated colors; stick to the neutral palette.
  • Do not use playful or casual language; keep copy matter-of-fact and instructional.

DESIGN.md

AI-ready

Drop into any project root. Cursor, Claude Code, v0, Lovable, and other AI coding agents read this file to generate on-brand UI. Spec

Download
DESIGN.md not yet generated for this brand.
How to use this file

1. Save this file as DESIGN.md in your project root (sibling to README.md).

2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.

3. Validate or export tokens with the official CLI:

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md
Developer Access
cURL
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/garuda-indonesia.com \
  -H "x-api-key: ev_your_key"

# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
  -H "x-api-key: ev_your_key"

# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
  -H "x-api-key: ev_your_key"

Extract your own brand kit

Get colors, fonts, voice, and personality from any website in seconds. Open source.

Get started free