<!-- Generated by ExtractVibe — https://extractvibe.com/brand/popcornisgood.lol -->
<!-- Extracted: 2026-07-20T01:54:54.437Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "Cantari — Expressive, human-like voice in 10 languages"
description: "Cantari — Expressive, human-like voice in 10 languages presents a professional web presence."
colors:
  primary: "#f54e00"
  secondary: "#e8e8e0"
  tertiary: "#ecece4"
  neutral: "#f0f0e8"
  surface: "#fdfdf7"
  on-surface: "#1b1b1b"
  border: "#e4e4dc"
  link: "#26251e"
  warning: "#cd9130"
  success: "#429c5a"
  info: "#3e8cc9"
  surface-dark: "#26251e"
typography:
  display-lg:
    fontFamily: "Fraunces"
    fontSize: "54px"
    fontWeight: "400"
    lineHeight: "62.1px"
    letterSpacing: "-1.35px"
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: "40px"
    fontWeight: "400"
    lineHeight: "48px"
    letterSpacing: "-0.8px"
  headline-md:
    fontFamily: "Noto Serif"
    fontSize: "22px"
    fontWeight: "400"
    lineHeight: "28.6px"
    letterSpacing: "-0.11px"
  headline-sm:
    fontFamily: "Outfit"
    fontSize: "12px"
    fontWeight: "500"
    lineHeight: "18px"
    letterSpacing: "0.96px"
  body-md:
    fontFamily: "Outfit"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "24px"
rounded:
  sm: "6px"
  lg: "9999px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#f54e00"
    textColor: "#f54e00"
    rounded: "6px"
    padding: "5px 10px"
    fontSize: "12px"
    fontWeight: "400"
    borderColor: "#f54e00"
  button-outline:
    textColor: "#26251e"
    rounded: "6px"
    padding: "9px 11px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#26251e"
    borderWidth: "1px"
  button-secondary:
    backgroundColor: "#ebeae5"
    textColor: "#26251e"
    rounded: "50%"
    padding: "0px"
    fontSize: "14px"
    fontWeight: "400"
    borderColor: "#26251e"
---

# Cantari — Expressive, human-like voice in 10 languages — Design System

## Overview

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

Key characteristics: professional.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The palette draws on 26 distinct colors observed across the site, organized into semantic roles below.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#f54e00` | Orange Red |
| secondary | `#e8e8e0` | Gainsboro |
| accent / tertiary | `#ecece4` | Linen |
| background | `#fdfdf7` | Snow |
| text | `#1b1b1b` | Near-Black |
| border | `#e4e4dc` | Gainsboro |
| link | `#26251e` | Near-Black |
| muted | `#f0f0e8` | Linen |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#26251e` | Near-Black |

### Semantic

| Role | Hex | Use |
|------|-----|-----|
| success | `#429c5a` | Confirmations, positive states |
| warning | `#cd9130` | Caution, intermediate states |
| info | `#3e8cc9` | Neutral information, tips |

## Typography

Type is set in Outfit, Fraunces, Noto Serif, with hierarchy expressed through size and weight contrast rather than family-switching.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Outfit | body | self-hosted | 400, 500 |
| Fraunces | heading | self-hosted | 400 |
| Noto Serif | heading | self-hosted | 400 |
| Outfit | heading | self-hosted | 500 |
| JetBrains Mono | body | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Fraunces | 54px | 400 | 62.1px | -1.35px |
| Heading 2 | Fraunces | 40px | 400 | 48px | -0.8px |
| Heading 3 | Noto Serif | 22px | 400 | 28.6px | -0.11px |
| Heading 4 | Outfit | 12px | 500 | 18px | 0.96px |
| Body | Outfit | 16px | 400 | 24px | — |

### Conventions

- Heading case — sentence-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) 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 | `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` |

## Shapes

Border-radius scale:

- `sm` — 6px
- `lg` — 9999px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#f54e00`
- Text — `#f54e00`
- Radius — `6px`
- Padding — `5px 10px`
- Font size — `12px`
- Font weight — `400`
- Border — ` solid #f54e00`
- Sample copy — "English"

**Outline**

- Text — `#26251e`
- Radius — `6px`
- Padding — `9px 11px`
- Font size — `16px`
- Font weight — `400`
- Border — `1px solid #26251e`
- Sample copy — "Giulia中文 · bright · female"

**Secondary**

- Background — `#ebeae5`
- Text — `#26251e`
- Radius — `50%`
- Padding — `0px`
- Font size — `14px`
- Font weight — `400`
- Border — ` solid #26251e`

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | svg | [link](brands/popcornisgood.lol/logo-0.svg) | 95% |
| logomark | — | svg | [link](brands/popcornisgood.lol/logo-svg-1.svg) | 90% |

## Sources

- Official brand guidelines — https://www.publicisgroupe.com/en/media-kit
- Live brand page — https://extractvibe.com/brand/popcornisgood.lol
- Raw JSON — https://extractvibe.com/api/brand/popcornisgood.lol
- DESIGN.md (this file) — https://extractvibe.com/api/brand/popcornisgood.lol/design.md
- Extracted — 2026-07-20T01:54:54.437Z
- Generator — ExtractVibe vv1
- Quality score — 65/100