<!-- Generated by ExtractVibe — https://extractvibe.com/brand/massio.co -->
<!-- Extracted: 2026-08-23T04:29:38.972Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "MASSIO"
description: "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."
colors:
  primary: "#000000"
  tertiary: "#8b0000"
  surface: "#ffffff"
  on-surface: "#000000"
  border: "#c8c8c8"
  error: "#8b0000"
  success: "#006400"
  surface-dark: "#000000"
typography:
  headline-lg:
    fontFamily: "Assistant"
    fontSize: "40px"
    fontWeight: "400"
    lineHeight: "48px"
  headline-md:
    fontFamily: "Assistant"
    fontSize: "13px"
    fontWeight: "400"
    lineHeight: "16.9px"
  headline-sm:
    fontFamily: "Angie Sans"
    fontSize: "14px"
    fontWeight: "500"
    lineHeight: "15.4px"
  body-md:
    fontFamily: "Assistant"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "22.4px"
rounded:
  sm: "2px"
  lg: "100px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#efefef"
    textColor: "#000000"
    rounded: "2px"
    padding: "16px 24px"
    fontSize: "14px"
    fontWeight: "400"
    borderColor: "#000000"
    boxShadow: "rgb(239, 239, 239) 0px 0px 0px 1px inset"
---

# MASSIO — Design System

## Overview

The MASSIO design system establishes a visual language defined by quiet authority and enduring clarity. It rejects the noise of transient trends in favor of a structured, minimalist environment that highlights product integrity and spatial harmony. Rooted in the archetypes of The Creator and The Ruler, the interface balances creative expression with disciplined order, creating a digital space that feels both curated and effortlessly organized. This aesthetic draws direct inspiration from brands like Muji, Hay, Arket, and Crate & Barrel, adopting their commitment to neutral palettes, functional beauty, and material authenticity. The emotional register is calm, confident, and sophisticated, appealing to users who value precision and timelessness over decorative excess.

Crucially, the design is not playful, loud, or overly decorative. It avoids bright accent colors, complex gradients, and ornate typography. Instead, it relies on generous whitespace, strong structural grids, and high-contrast monochromatic elements to create a sense of premium quality. The interface acts as a silent gallery, allowing the content to speak without interference. Every interaction is deliberate, every element serves a functional purpose, and the overall experience conveys a matter-of-fact elegance that respects the user’s intelligence. This approach ensures longevity, ensuring the interface remains relevant and visually pleasing regardless of shifting design fads.

**Key characteristics:**

- Vibe — timeless, minimalist, character-driven, premium, authentic, neutral
- Archetypes — The Creator, The Ruler
- Comparable to — Muji, Hay, Arket, Crate & Barrel
- 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.
- Visual energy — 4/10 (moderate)

## Colors

The color palette is strictly monochromatic, utilizing only pure black (#000000) and pure white (#ffffff). This binary approach eliminates visual distraction and reinforces the brand’s commitment to clarity and timelessness. Black serves as the primary anchor for text, borders, and key interactive elements, projecting authority and sophistication. White acts as the expansive surface, providing breathing room and emphasizing the content’s structural integrity. This high-contrast scheme signals premium quality and authenticity, ensuring the interface remains legible, accessible, and visually enduring without relying on color trends.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#000000` | Black |
| accent / tertiary | `#8b0000` | Dark Red |
| background | `#ffffff` | White |
| text | `#000000` | Black |
| border | `#c8c8c8` | Silver |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#000000` | Black |

### Semantic

| Role | Hex | Use |
|------|-----|-----|
| success | `#006400` | Confirmations, positive states |
| error | `#8b0000` | Failures, destructive actions |

## Typography

The type system employs Assistant and Angie Sans to create a balanced hierarchy that blends geometric precision with humanist warmth. Assistant provides a clean, modern foundation for body text and UI elements, ensuring high readability and a neutral tone. Angie Sans introduces subtle character and elegance in headings and key messaging, adding a touch of refined sophistication without compromising clarity. The hierarchy is established through weight and scale rather than color or decoration, maintaining a direct and confident voice. This combination communicates accessibility and premium quality, ensuring the interface feels both contemporary and timeless.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Assistant | body | self-hosted | 400 |
| Assistant | heading | self-hosted | 300, 400 |
| Angie Sans | heading | self-hosted | 500 |
| Angie Sans | body | self-hosted | 500 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Heading 2 | Assistant | 40px | 400 | 48px | — |
| Heading 3 | Assistant | 13px | 400 | 16.9px | — |
| Heading 4 | Angie Sans | 14px | 500 | 15.4px | — |
| Body | Assistant | 14px | 400 | 22.4px | — |

### Conventions

- Heading case — title-case
- Body line-height — 22.4px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| dropdown | `rgb(0, 0, 0) 0px 0px 0px 0px inset` |
| modal | `rgba(0, 0, 0, 0.15) 0px 4px 20px 0px` |
| modal | `rgba(0, 0, 0, 0.15) 0px 5px 30px 0px` |
| button | `rgb(239, 239, 239) 0px 0px 0px 1px inset` |
| button | `rgb(255, 255, 255) 0px 0px 0px 0px inset` |

### Gradients

- `linear-gradient(to top, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0))`
- `linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0))`

## Shapes

Border-radius scale:

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

## Components

### Buttons

**Secondary**

- Background — `#efefef`
- Text — `#000000`
- Radius — `2px`
- Padding — `16px 24px`
- Font size — `14px`
- Font weight — `400`
- Border — ` solid #000000`
- Shadow — `rgb(239, 239, 239) 0px 0px 0px 1px inset`
- Sample copy — "Ir directamente al contenido"

## Do's and 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.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 6/10 | balanced |
| Playful ↔ Serious | 3/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 4/10 | enthusiastic |
| Respectful ↔ Irreverent | 5/10 | balanced |
| Technical ↔ Accessible | 7/10 | accessible |

### Copywriting style

- Avg. sentence length — 18 words
- Vocabulary — moderate
- Jargon — none
- CTA style — direct action verbs and status indicators
- Rhetorical devices — contrast, repetition, imperative

### Sample copy

> Que tu casa no se confunda con la de nadie.

> Diseñamos cada pieza nosotros mismos, pensando en cómo transformar la neutralidad de tu hogar en algo con carácter.

> Diseñamos para que lo que elijas hoy siga encajando en tu casa mañana.

> sin seguir tendencias fugaces.

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | png | [link](brands/massio.co/logo-0.png) | 95% |
| primary | color | svg | [link](brands/massio.co/logo-1.svg) | 85% |
| primary | color | svg | [link](brands/massio.co/logo-2.svg) | 85% |
| primary | color | svg | [link](brands/massio.co/logo-3.svg) | 85% |
| primary | color | svg | [link](brands/massio.co/logo-4.svg) | 85% |

## Sources

- Live brand page — https://extractvibe.com/brand/massio.co
- Raw JSON — https://extractvibe.com/api/brand/massio.co
- DESIGN.md (this file) — https://extractvibe.com/api/brand/massio.co/design.md
- Extracted — 2026-08-23T04:29:38.972Z
- Generator — ExtractVibe vv1
- Quality score — 90/100