Instagram

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/instagram.com -->
<!-- Extracted: 2026-08-23T02:48:27.597Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Instagram"
description: "A whimsical yet accessible digital storefront blending spiritual curiosity with practical e-commerce. The brand projects a clean, modern aesthetic that demystifies esoteric topics like Santeria and wellness through a friendly, approachable interface."
colors:
  primary: "#4a5df9"
  neutral: "#737373"
  surface: "#ffffff"
  on-surface: "#000000"
  on-surface-secondary: "#737373"
  link: "#4150f7"
typography:
  headline-lg:
    fontFamily: "-apple-system"
    fontSize: "20px"
    fontWeight: "400"
    lineHeight: "25px"
  body-md:
    fontFamily: "-apple-system"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "18px"
rounded:
  md: "8px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#4a5df9"
    textColor: "#ffffff"
    rounded: "8px"
    padding: "0px 16px"
    fontSize: "14px"
    fontWeight: "600"
    borderColor: "#2b3036"
  button-secondary:
    backgroundColor: "#f3f5f7"
    textColor: "#4150f7"
    rounded: "50%"
    padding: "0px"
    fontSize: "14px"
    fontWeight: "400"
    borderColor: "#2b3036"
  button-outline:
    textColor: "#4150f7"
    rounded: "0px"
    padding: "0px 20px"
    fontSize: "14px"
    fontWeight: "400"
    borderColor: "#4150f7"
    borderWidth: "0px 0px 2px"
---

# Instagram — Design System

## Overview

This design system establishes a digital storefront that harmonizes the mystical with the mundane, creating an interface that feels both enchanted and eminently usable. Drawing from the archetype of The Magician, the UI transforms complex esoteric concepts like Santeria into accessible, tangible experiences, while The Innocent ensures the tone remains pure, friendly, and unpretentious. The aesthetic mirrors the clean, user-centric philosophies of Glossier and Headspace, prioritizing clarity and emotional resonance over decorative excess. The layout is spacious and airy, utilizing generous whitespace to let spiritual content breathe without overwhelming the user. This is not a dark, occult-themed site; it is a bright, modern marketplace that demystifies the unknown through simplicity and warmth. The interface acts as a gentle guide, inviting curiosity rather than intimidating with jargon. Every interaction is designed to feel intuitive, reducing friction between the user’s spiritual interests and practical purchasing needs. The visual language is consistent, reliable, and calm, fostering trust and encouraging exploration. By stripping away unnecessary complexity, the design focuses on the essence of the products, allowing their spiritual significance to shine through a lens of contemporary elegance. The result is a cohesive environment where ancient wisdom meets modern convenience, creating a space that feels safe, inviting, and distinctly current.

**Key characteristics:**

- Vibe — whimsical, accessible, clean, spiritual, modern, friendly
- Archetypes — The Magician, The Innocent
- Comparable to — Glossier, Casper, Headspace, Etsy
- Design era — contemporary-minimal
- Emotional tone — whimsical-approachable
- Target audience — Individuals interested in spirituality, wellness, and unique gifts who value aesthetic simplicity and ease of use over traditional esoteric imagery.
- Visual energy — 6/10 (moderate)

## Colors

The palette centers on #4a5df9, a vibrant yet approachable blue that signals trust and clarity without the coldness of corporate tech. This primary hue anchors the spiritual themes in reality, making the esoteric feel grounded and safe. White surfaces provide a clean, breathable canvas that enhances readability and emphasizes product imagery. The absence of dark or murky tones ensures the brand remains accessible and friendly, aligning with the Innocent archetype. This restrained color strategy prevents visual noise, allowing the whimsical elements to stand out without cluttering the user’s experience.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#4a5df9` | Royal Blue |
| surface | `#ffffff` | White |
| background | `#ffffff` | White |
| text | `#000000` | Black |
| secondary text | `#737373` | Dim Gray |
| link | `#4150f7` | Royal Blue |
| muted | `#737373` | Dim Gray |

## Typography

The type system relies on the native -apple-system stack to ensure seamless integration across devices and instant familiarity for users. This choice prioritizes legibility and performance, reflecting the brand’s commitment to accessibility and modern efficiency. The hierarchy is straightforward and functional, using size and weight to guide attention rather than decorative fonts. This neutral yet refined typographic voice supports the clean aesthetic, ensuring that content remains the focal point. The approach communicates reliability and ease, reinforcing the friendly tone while maintaining a sophisticated, contemporary feel.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| -apple-system | body | system | 400, 600 |
| -apple-system | heading | system | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Heading 2 | -apple-system | 20px | 400 | 25px | — |
| Body | -apple-system | 14px | 400 | 18px | — |

### Conventions

- Heading case — lowercase
- Body line-height — 18px

## Layout

- Base spacing unit — `2px`

## Shapes

Border-radius scale:

- `md` — 8px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#4a5df9`
- Text — `#ffffff`
- Radius — `8px`
- Padding — `0px 16px`
- Font size — `14px`
- Font weight — `600`
- Border — ` solid #2b3036`
- Sample copy — "Log In"

**Secondary**

- Background — `#f3f5f7`
- Text — `#4150f7`
- Radius — `50%`
- Padding — `0px`
- Font size — `14px`
- Font weight — `400`
- Border — ` solid #2b3036`

**Outline**

- Text — `#4150f7`
- Radius — `0px`
- Padding — `0px 20px`
- Font size — `14px`
- Font weight — `400`
- Border — `0px 0px 2px solid #4150f7`
- Sample copy — "Posts"

## Do's and Don'ts

### Do

- Use system sans-serif fonts (-apple-system) with 400 weight for body text and 600 weight for headings, maintaining a strict 18px line-height for readability.
- Apply lowercase casing to all headings to maintain a casual, non-intimidating tone.
- Style primary buttons with a solid #4a5df9 background, #ffffff text, 8px border-radius, and 0px 16px horizontal padding.
- Use #000000 for primary text on #ffffff backgrounds to ensure high contrast and clarity.
- Incorporate emojis (✨, 🎁, 🎨) strategically in bio or header text to convey playfulness, but avoid them in dense body copy.
- Apply 8px border-radius to medium UI elements like cards or input fields to soften the interface.
- Keep copy simple and jargon-free, focusing on clear service listings (e.g., 'Regalos • Deco • Bienestar') rather than technical explanations.
- Use #4150f7 for secondary button text and outline borders to create a cohesive but distinct hierarchy from the primary brand blue.

### Don't

- Do not use gradients or box-shadows; the design is strictly flat and minimal.
- Avoid title case or uppercase for headings; the brand prefers lowercase for a softer feel.
- Do not use serif fonts; the brand relies entirely on system sans-serif typefaces.
- Avoid excessive punctuation like exclamation marks in marketing copy; keep the tone matter-of-fact yet warm.
- Do not use complex border radii (e.g., 50% for buttons) unless specifically creating a secondary 'pill' style element; stick to 8px for standard components.
- Avoid dark mode defaults; the brand is built on a white background (#ffffff) with black text.
- Do not use decorative or display fonts; maintain accessibility with standard system fonts.
- Avoid cluttered layouts; use ample whitespace and simple bullet points (•) for listing services.

*Source — merged*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 8/10 | casual |
| Playful ↔ Serious | 7/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 6/10 | balanced |
| Respectful ↔ Irreverent | 5/10 | balanced |
| Technical ↔ Accessible | 9/10 | accessible |

### Copywriting style

- Avg. sentence length — 4 words
- Vocabulary — simple
- Jargon — none
- CTA style — implicit service listing
- Rhetorical devices — symbolism, ellipsis

### Sample copy

> ✨Para quienes creen en la magia

> 🎁 Regalos • Deco • Bienestar • Santeria

> 🎨Artesanías personalizadas

> 📦 Envíos a todo el país

> 📍Salta Capital

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/instagram.com) | 100% |
| favicon | — | webp | [link](brands/instagram.com/logo-0.webp) | 95% |
| favicon | — | webp | [link](brands/instagram.com/logo-1.webp) | 95% |
| favicon | — | webp | [link](brands/instagram.com/logo-2.webp) | 95% |
| favicon | — | webp | [link](brands/instagram.com/logo-3.webp) | 95% |
| favicon | — | webp | [link](brands/instagram.com/logo-4.webp) | 95% |
| favicon | — | webp | [link](brands/instagram.com/logo-5.webp) | 95% |
| favicon | — | ico | [link](brands/instagram.com/logo-6.ico) | 95% |

## Sources

- Official brand guidelines — https://www.meta.com/brand/resources/instagram/instagram-brand/?srsltid=AfmBOorDMbVNcb4JfevlHx46V6QByXLuMudhVhzDaO95qpWR8D9daDDl
- Live brand page — https://extractvibe.com/brand/instagram.com
- Raw JSON — https://extractvibe.com/api/brand/instagram.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/instagram.com/design.md
- Extracted — 2026-08-23T02:48:27.597Z
- Generator — ExtractVibe vv1
- Quality score — 100/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md