Skip to content

Just a moment...

inapa.be

“A stark, utilitarian, and highly functional interface designed for immediate clarity and security assurance. The aesthetic is purely industrial and system-native, prioritizing speed and trust over decorative flair or brand personality.”

utilitarian
minimal
system-native
secure
industrial
flat
noir-lite
functional

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-secure

Target Audience

Developers, system administrators, and general web users seeking a frictionless, trustworthy security verification experience.

Comparable Brands

Cloudflare
AWS Console
GitHub
Vercel

Brand Rules

Dos & Don'ts

Do

  • Use system-ui font family for all text, with 600 weight for headings and 400 weight for body copy.
  • Apply sentence-case capitalization to all headings and UI labels.
  • Set background color to #ffffff and primary text color to #313131 for maximum contrast and readability.
  • Use monospace font family for any code snippets, technical identifiers, or machine-readable output.
  • Maintain a base spacing unit of 2px for margins and padding to ensure tight, compact layouts.
  • Keep border-radius at 0px (sharp corners) for all containers and interactive elements to reinforce the industrial aesthetic.
  • Use instructional imperative verbs for CTAs (e.g., 'Verify', 'Continue') without exclamation marks.
  • Avoid all decorative visual effects; keep the design strictly flat with no gradients or box-shadows.

Don't

  • Do not use title case or all-caps for headings; strictly adhere to sentence-case.
  • Do not apply any box-shadows, drop-shadows, or multi-layer depth effects to any element.
  • Do not use gradients, patterns, or background images; maintain a solid #ffffff background.
  • Do not use emoji, icons, or decorative illustrations in the copy or UI.
  • Do not use serif fonts or custom web fonts; rely exclusively on system fonts.
  • Do not use rounded corners (border-radius > 0px); keep all shapes rectangular.
  • Do not use vibrant or saturated colors; restrict the palette to #ffffff, #313131, and system grays.
  • Do not use playful or enthusiastic tone; maintain a formal, matter-of-fact voice.

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/inapa.be \
  -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