← Color Fonts
Diego Aquino Arquitetura / Brand Style Guide
Editorial + Spatial
DIEGO AQUINO
Studio Materials Projects Archive
Arquitetura Editorial System

Shape every room with quiet proportion.

Verdes minerales, serif elegante y composicion de estudio para una marca que se siente arquitectonica, material y cuidadosamente curada.

View the system See the palette
Spatial Balance
03
ToneEditorial and serene
PaletteSage, mineral, stone
FormPanels, plans and material blocks
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --color-primary: #C8D5B3;
  --color-secondary: #7F9695;
  --color-accent: #C7D0DD;
  --color-neutral: #F4EEE8;
  --color-background: #121616;
  --color-surface: #1A2020;
  --color-text-primary: #F4EEE8;
  --color-text-secondary: #B8BBB3;
  --color-border: #2C3534;
  --font-display: "Gloock";
  --font-body: "Gloock";
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --space-base: 4px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-gap: 24px;
  --space-section-padding: 96px;
}
@theme {
  --color-primary: #C8D5B3;
  --color-secondary: #7F9695;
  --color-accent: #C7D0DD;
  --color-neutral: #F4EEE8;
  --color-background: #121616;
  --color-surface: #1A2020;
  --color-text-primary: #F4EEE8;
  --color-text-secondary: #B8BBB3;
  --color-border: #2C3534;
  --font-display: "Gloock";
  --font-body: "Gloock";
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  --spacing-base: 4px;
  --spacing-sm: 12px;
  --spacing-md: 20px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-gap: 24px;
  --spacing-section-padding: 96px;
}
{
  "colors": {
    "primary": "#C8D5B3",
    "secondary": "#7F9695",
    "accent": "#C7D0DD",
    "neutral": "#F4EEE8",
    "background": "#121616",
    "surface": "#1A2020",
    "text-primary": "#F4EEE8",
    "text-secondary": "#B8BBB3",
    "border": "#2C3534"
  },
  "typography": {
    "display-lg": {
      "fontFamily": "Gloock",
      "fontSize": "48px",
      "fontWeight": "400",
      "lineHeight": "46px",
      "letterSpacing": "-0.03em"
    },
    "body-md": {
      "fontFamily": "Hanken Grotesk",
      "fontSize": "16px",
      "fontWeight": "400",
      "lineHeight": "26px"
    },
    "label-md": {
      "fontFamily": "IBM Plex Sans",
      "fontSize": "11px",
      "fontWeight": "500",
      "lineHeight": "18px"
    }
  },
  "rounded": {
    "md": "12px",
    "lg": "20px",
    "full": "9999px"
  },
  "spacing": {
    "base": "4px",
    "sm": "12px",
    "md": "20px",
    "lg": "32px",
    "xl": "48px",
    "gap": "24px",
    "section-padding": "96px"
  }
}
---
version: "1.0"
name: "Diego Aquino Arquitetura"
description: "Sistema visual editorial y arquitectonico que combina verdes desaturados, piedra clara y serif sofisticada para presentar interiores, branding y piezas impresas con mucha calma material."
colors:
  primary: "#C8D5B3"
  secondary: "#7F9695"
  accent: "#C7D0DD"
  neutral: "#F4EEE8"
  background: "#121616"
  surface: "#1A2020"
  text-primary: "#F4EEE8"
  text-secondary: "#B8BBB3"
  border: "#2C3534"
typography:
  display-lg:
    fontFamily: "Gloock"
    fontSize: "48px"
    fontWeight: 400
    lineHeight: "46px"
    letterSpacing: "-0.03em"
  body-md:
    fontFamily: "Hanken Grotesk"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "26px"
  label-md:
    fontFamily: "IBM Plex Sans"
    fontSize: "11px"
    fontWeight: 500
    lineHeight: "18px"
rounded:
  md: "12px"
  lg: "20px"
  full: "9999px"
spacing:
  base: "4px"
  sm: "12px"
  md: "20px"
  lg: "32px"
  xl: "48px"
  gap: "24px"
  section-padding: "96px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#1B211E"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "14px 24px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.neutral}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "14px 24px"
  card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.border}"
    textColor: "{colors.text-primary}"
    rounded: "{rounded.lg}"
    padding: "24px"
---

# DESIGN.md - Diego Aquino Arquitetura

## 1. Tema Visual y Atmosfera

Diego Aquino Arquitetura se siente como una publicacion de interiores convertida en sistema de marca. El lenguaje visual no empuja la tecnologia ni la velocidad; empuja la materia, la proporción y el silencio. Verdes salvia, azules minerales, beige piedra y una serif refinada construyen una identidad que se apoya tanto en arquitectura como en sensibilidad editorial.

La board mezcla monogramas amplios, grids de color suaves, fotografia de espacios y piezas impresas con acabado premium. Todo comunica estudio, orden y una calma sofisticada. La marca gana cuando cada layout parece hoja curada, maqueta o composición de materiales, no cuando intenta volverse ruidosa o efectista.

**Palabras clave de personalidad**: editorial, material, arquitectonico, sereno, refinado, espacial, premium

**Densidad del layout**: comfortable

**Modo preferido**: oscuro

**Nivel de ornamentacion**: subtle

**Audiencia visual objetivo**: estudios de arquitectura, interiorismo premium, branding inmobiliario, piezas impresas y presentaciones de proyecto

---

## 2. Paleta de Colores y Roles Semanticos

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Sage Stone | `--color-primary` | `#C8D5B3` | CTA, bloques de apoyo, acentos de marca, superficies suaves | `#1B211E` |
| Sage Stone Hover | `--color-primary-hover` | `#B6C49E` | Hover y estados activos | `#1B211E` |
| Sage Stone Active | `--color-primary-active` | `#A4B58A` | Pressed y placas concentradas | `#161B18` |
| Mineral Teal | `--color-secondary` | `#7F9695` | Muestras secundarias, paneles tecnicos y contraste frio | `#F5F2EC` |
| Dust Blue | `--color-accent` | `#C7D0DD` | Highlights suaves, notas, apoyos editoriales | `#243038` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Charcoal Room | `--color-bg` | `#121616` | Fondo general |
| Deep Panel | `--color-surface` | `#1A2020` | Cards, paneles y modulos |
| Raised Slate | `--color-surface-raised` | `#232A29` | Contenedores elevados |
| Quiet Overlay | `--color-surface-overlay` | `#0F1212` | Overlays oscuros |
| Architectural Line | `--color-border` | `#2C3534` | Bordes y lineas |
| Soft Divider | `--color-border-subtle` | `#202726` | Separadores ligeros |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Stone Light | `--color-text` | `#F4EEE8` | Titulares, body principal, cards |
| Quiet Sand | `--color-text-secondary` | `#B8BBB3` | Descripciones y supporting copy |
| Muted Mineral | `--color-text-muted` | `#8A8F89` | Metadata y captions |
| Texto sobre primario | `--color-text-on-primary` | `#1B211E` | Texto en boton primario |

### Colores de estado

| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Exito | `--color-success` | `#97C58F` | `#0F170F` |
| Exito (bg) | `--color-success-bg` | `#18221A` | - |
| Advertencia | `--color-warning` | `#DABF8A` | `#221708` |
| Advertencia (bg) | `--color-warning-bg` | `#2B2115` | - |
| Error | `--color-error` | `#D6877B` | `#FFF5F2` |
| Error (bg) | `--color-error-bg` | `#2B1917` | - |
| Info | `--color-info` | `#A6BED8` | `#101924` |
| Info (bg) | `--color-info-bg` | `#18212A` | - |

La paleta funciona mejor cuando se lee como colección de materiales: salvia, piedra, humo, polvo azul y carbón. El color debe acompañar la arquitectura, no protagonizarla de forma agresiva.

---

## 3. Reglas de Tipografia

### Familias tipograficas

```css
/* Heading: Gloock - sustituto Google para la serif editorial observada en la guia */
--font-heading: 'Gloock', serif;

/* Body: Hanken Grotesk - sans limpia y suave para lectura de estudio y sistema */
--font-body: 'Hanken Grotesk', sans-serif;

/* Labels: IBM Plex Sans - soporte utilitario discreto */
--font-label: 'IBM Plex Sans', sans-serif;
```

**Google Fonts (implementacion web):**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gloock&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@500;600&display=swap" rel="stylesheet">
```

**Nota sobre sustitucion**: la guia original usa una serif de alto contraste y tono editorial. Para HTML se compararon `Gloock`, `Prata` y `Newsreader`; `Gloock` conserva mejor la elegancia escultorica de los titulares. Para body se compararon `Hanken Grotesk`, `Instrument Sans` y `Onest`; `Hanken Grotesk` fue la mejor por su suavidad y lectura refinada.

### Escala tipografica

| Token | rem | px equiv. | Line height | Uso |
|-------|-----|-----------|-------------|-----|
| `--text-xs` | 0.75rem | 12px | 1.4 | Metadata y pies |
| `--text-sm` | 0.875rem | 14px | 1.5 | Labels y supporting UI |
| `--text-base` | 1rem | 16px | 1.625 | Body principal |
| `--text-lg` | 1.125rem | 18px | 1.6 | Intro paragraphs |
| `--text-xl` | 1.25rem | 20px | 1.4 | Titulo de modulos |
| `--text-2xl` | 1.75rem | 28px | 1.15 | H3 |
| `--text-3xl` | 2.5rem | 40px | 1.04 | H2 |
| `--text-4xl` | 3rem | 48px | 0.96 | Heading system |

### Pesos tipograficos

```css
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
```

### Letter spacing

```css
--tracking-tight: -0.03em;
--tracking-normal: 0em;
--tracking-wide: 0.06em;
--tracking-wider: 0.14em;
```

La voz tipografica debe sentirse editorial pero no frágil. Los titulares viven bien con mucho aire y pocas palabras; el cuerpo tiene que ser sobrio, callado y claramente legible.

---

## 4. Estilos de Componentes

### Botones

**Primario**
```
Background: var(--color-primary)
Color de texto: var(--color-text-on-primary)
Padding: 14px 24px
Border-radius: var(--radius-full)
Font-weight: var(--font-medium)
Font-size: var(--text-sm)

Hover:
  Background: var(--color-primary-hover)
  box-shadow: 0 14px 28px rgba(200, 213, 179, 0.12)

Active:
  Background: var(--color-primary-active)
  transform: translateY(1px)
```

**Secundario**
```
Background: transparent
Color: var(--color-text)
Border: 1px solid rgba(244, 238, 232, 0.18)
Padding: 14px 24px
Border-radius: var(--radius-full)

Hover:
  Background: rgba(255, 255, 255, 0.04)
  Border-color: rgba(200, 213, 179, 0.28)
```

### Cards

**Tarjeta base**
```
Background: var(--color-surface)
Border: 1px solid var(--color-border)
Border-radius: 20px
Padding: 24px
Box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255,255,255,0.03)
```

Las cards deben sentirse como fichas de proyecto o muestras materiales. Todo gesto de profundidad debe ser sobrio y estructural.

---

## 5. Principios de Layout y Composicion

La marca funciona mejor con una mezcla de editorial y arquitectura: mucho margen, módulos bien alineados, bloques de color desaturados y referencias a plano, maqueta o muestrario. El layout necesita parecer curado, no generado por efecto.

Usar:

- bloques de color suaves y minerales
- grids o muestrarios arquitectonicos
- composiciones tipo plano o panel
- serif amplia con mucho aire

Evitar:

- fondos luminosos abstractos
- gradientes blandos
- demasiadas texturas compitiendo
- iconografia agresiva o demasiado tech

---

## 6. Movimiento

El motion de Diego Aquino Arquitetura debe sentirse casi editorial: suave, corto y controlado. Las mejores transiciones son fades sutiles, desplazamientos pequeños y aparicion escalonada de modulos o tarjetas.

**Nivel de motion**: subtle

**Duraciones**: 160ms, 260ms, 520ms

**Easings**: `ease`, `cubic-bezier(0.16, 1, 0.3, 1)`

**Patrones**: fade up ligero, reveal de paneles, aparicion secuencial de muestras

---

## 7. Lo que Si y lo que No

### ✅ Hacer

1. **Usa el color como material** — salvia, piedra y polvo azul deben sentirse como superficies, no como efectos.
2. **Mantén el layout aireado y preciso** — la marca mejora cuando cada bloque respira.
3. **Deja que la serif conduzca el tono** — los titulares deben sentirse de estudio y publicación.
4. **Construye con paneles y muestras** — fichas, planos y composiciones de materiales refuerzan la identidad.

### ❌ No hacer

1. **No uses fondos fotográficos detrás del copy** — la legibilidad y el tono editorial se rompen.
2. **No agregues glow ni atmósfera digital** — la marca no necesita verse tecnológica.
3. **No satures la pantalla con demasiados colores a la vez** — la elegancia depende del control.
4. **No conviertas la marca en minimalismo vacío** — necesita materia, referencias espaciales y una sensación real de proyecto.