Skip to content
massio.co logo

MASSIO

massio.co

“MASSIO embodies a sophisticated, timeless aesthetic that prioritizes character and longevity over fleeting trends. The brand voice is direct and confident, blending a formal elegance with an accessible, matter-of-fact tone to appeal to homeowners seeking distinct, high-quality design.”

timeless
minimalist
character-driven
premium
authentic
neutral
intentional

Color Palette

Colors

Light Mode

#000000

primary

#ffffff

background

#000000

text

#8b0000

accent

#c8c8c8

border

Dark Mode

#000000

surface

Typography

Fonts

Assistant

body
400
self-hosted

sans-serif

Assistant

heading
300
400
self-hosted

sans-serif

Angie Sans

heading
500
self-hosted

sans-serif

Angie Sans

body
500
self-hosted

sans-serif

body

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox

h4

The quick brown fox

h5

The quick brown fox

Components

Design System

Ir directamente al contenido
secondary
2px
#efefef#000000
dropdown
box-shadow

rgb(0, 0, 0) 0px 0px 0px 0px inset

modal
box-shadow

rgba(0, 0, 0, 0.15) 0px 4px 20px 0px

modal
box-shadow

rgba(0, 0, 0, 0.15) 0px 5px 30px 0px

button
box-shadow

rgb(239, 239, 239) 0px 0px 0px 1px inset

button
box-shadow

rgb(255, 255, 255) 0px 0px 0px 0px inset

gradient

linear-gradient(to top, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0))...

gradient

linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0))...

Voice & Tone

Personality

Visual Energy

4/10

Design Era

contemporary-minimal

Emotional Tone

calm-confident

Target Audience

Design-conscious homeowners who value individuality and quality, preferring enduring style over fast-fashion decor trends.

Comparable Brands

Muji
Hay
Arket
Crate & Barrel

Brand Rules

Dos & Don'ts

Do

  • Use Assistant font family for all body text (weight 400) and headings (weights 300, 400), and Angie Sans for specific headings/body accents (weight 500).
  • Apply title-case capitalization to all headings; use sentence case for body copy.
  • Set body text line-height to exactly 22.4px for optimal readability.
  • Use Primary Black (#000000) for text and borders, and Accent Red (#8b0000) sparingly for key highlights or secondary accents.
  • Style secondary buttons with #efefef background, #000000 text, 2px border-radius, 16px vertical/24px horizontal padding, and an inset shadow (rgb(239, 239, 239) 0px 0px 0px 1px inset).
  • Use sharp 2px border-radius for most UI elements (inputs, cards, buttons) to maintain a clean, modern edge.
  • Apply subtle depth using modal shadows (rgba(0, 0, 0, 0.15) 0px 4px 20px 0px) only for overlays and dropdowns, never for primary content cards.
  • Use linear gradients (black to transparent, 48%-65% opacity) exclusively for image overlays to ensure text legibility, fading towards the top.

Don't

  • Do not use emoji or exclamations in marketing copy; maintain a serious, matter-of-fact tone.
  • Avoid high border-radius (e.g., 12px+) on standard UI elements; reserve 100px (pill) only for specific interactive tags or avatars if needed.
  • Do not use vibrant or saturated colors outside the #8b0000 accent; keep the palette predominantly monochrome (#000000, #ffffff, #efefef).
  • Avoid playful or overly enthusiastic language; the brand voice is direct and imperative.
  • Do not apply drop shadows to buttons or flat UI elements; use inset shadows or flat colors instead.
  • Avoid serif fonts; the brand is strictly sans-serif (Assistant and Angie Sans).
  • Do not use title-case for body text; reserve title-case strictly for headings.

Design Assets

Visual Elements

Design asset
svg474×95
Design asset
svg474×95
Design asset
svg311×58
Design asset
svg180×53
Design asset
png1440×750
Cuadro Trace [1/1] (100 x 73 cm)
png475×712
Mantas
png475×495
Manta HAMPSTEAD Granate
png334×418
Set de 6 - Individuales ASHEN
png334×334
Set de 6 - Individuales ASHEN
png334×418

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/massio.co \
  -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