Skip to content
popcornisgood.lol logo

Cantari — Expressive, human-like voice in 10 languages

popcornisgood.lol

“Cantari — Expressive, human-like voice in 10 languages presents a professional web presence.”

professional

Color Palette

Colors

Light Mode

#f54e00

primary

#e8e8e0

secondary

#ecece4

accent

#fdfdf7

background

#1b1b1b

text

#e4e4dc

border

#26251e

link

#f0f0e8

muted

Dark Mode

#26251e

surface

Typography

Fonts

Outfit

body
400
500
self-hosted

Outfit Fallback

Fraunces

heading
400
self-hosted

Fraunces Fallback, Times New Roman, serif

Noto Serif

heading
400
self-hosted

Noto Serif Fallback

Outfit

heading
500
self-hosted

Outfit Fallback, system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif

JetBrains Mono

body
400
self-hosted

JetBrains Mono Fallback, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace

body

The quick brown fox

h1

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox

h4

The quick brown fox

Components

Design System

English
primary
6px
#f54e00#f54e00
Giulia中文 · bright · female
outline
6px
#26251e
secondary
secondary
50%
#ebeae5#26251e
element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, 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 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px

element
box-shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, 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

Voice & Tone

Personality

Visual Energy

5/10

Design Era

contemporary

Emotional Tone

professional

Target Audience

general audience

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/popcornisgood.lol \
  -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