Casa

Visual

---
bcp_version: "2.0.0"
file_type: visual
parent: https://registry.encodedbrands.ai/casa-15e6d414/.well-known/brand.md
last_updated: 2026-11-13
---

# Visual

The Casa visual identity is restrained: an off-white and off-black foundation, a warm serif for large headlines over a clean sans for everything else, sparing accent colors drawn from home interiors, and candid, sun-lit photography of real lived-in homes.

Values below are brand-declared specifications for brand communications, read 2026-11-13. Pixel values are design specifications, not universal browser rules. Status vocabulary: `brand_declared` (stated by the brand), `gap` (unknown).

## Logo

```yaml
logo:
  primary:
    description: "Lockup of a symbol and the lowercase wordmark 'casa'. The symbol is an arch: 'a warm and friendly covering, a nod to shelter, a rainbow, a sunny horizon, and the c in Casa.'"
    status: brand_declared
    variants: gap
    variants_note: "Logo asset files (SVG/PNG), URLs and hashes not supplied."
  default_use: "Use the full lockup wherever a logo element is needed."

logo_usage:
  clear_space:
    rule: "Clear space on all sides equals the lockup height divided by 3 (X/3)."
    machine_value:
      unit: lockup_height
      multiplier: 0.333
  minimum_size:
    digital_px: 10
    note: "Minimum lockup height 10px. Size in 5-unit increments; common heights 160, 80, 40, 20, 10px."
    print_in: gap
  separation: "Symbol and wordmark may be separated when necessary, keeping the lockup's scale relationship."
  approved_backgrounds:
    - type: solid_color
      color_token: off_black_01
      note: "Off-black logo on light neutrals."
    - type: solid_color
      color_token: off_white_01
      note: "Off-white logo on dark neutrals."
    - type: photography
      color_token: off_white_01
      note: "Default on photography; off-black only when the photo is particularly light."
  avatar_favicon: "Optically center the symbol in a circle or rounded square by shifting it up, because its top is visually heavier."
  forbidden_modifications:
    - stretch
    - rotate
    - "place imagery within the logo"
    - "adjust scales within the lockup"
    - "add effects"
    - "use the wordmark alone"
```

## Color

The palette foundation is off-white and off-black; accent colors are used sparingly or for touchpoints that allow more variety, such as social. In product, the neutral palette carries buttons and UI, and color comes mainly through photography and illustration.

```yaml
color:
  tokens:
    off_white_01: { hex: "#F8F8F1", role: primary_background, cmyk: "C0 M0 Y3 K3", description: "Base brand light neutral" }
    off_black_01: { hex: "#282828", role: primary_text, cmyk: "C0 M0 Y0 K84", pantone: "426C", description: "Base brand dark neutral" }
    off_white_02: { hex: "#EBEBE4", role: neutral }
    off_white_03: { hex: "#C7C7BD", role: neutral }
    off_white_04: { hex: "#8E8F84", role: neutral }
    black: { hex: "#000000", role: neutral, pantone: "Black" }
    green_01: { hex: "#FBFBE3", role: accent, pantone: "9600C" }
    green_02: { hex: "#F0F3A2", role: accent, pantone: "587C" }
    green_03: { hex: "#ACC064", role: accent, pantone: "2289C" }
    green_04: { hex: "#444835", role: accent, pantone: "4229C" }
    clay_01: { hex: "#FFE3C9", role: accent, pantone: "9181C" }
    clay_02: { hex: "#FA9A67", role: accent, pantone: "1565C" }
    clay_03: { hex: "#D2593A", role: accent, pantone: "7579C" }
    clay_04: { hex: "#7E2E1A", role: accent, pantone: "174C" }
    yellow_01: { hex: "#FBF8F2", role: accent, pantone: "9224C" }
    yellow_02: { hex: "#FFE39D", role: accent, pantone: "2005C" }
    yellow_03: { hex: "#FBB52A", role: accent, pantone: "1235C" }
    yellow_04: { hex: "#C07907", role: accent, pantone: "7550C" }
    brown_01: { hex: "#FEF3EF", role: accent, pantone: "9244C" }
    brown_02: { hex: "#E6C9B6", role: accent, pantone: "2309C" }
    brown_03: { hex: "#C28C6B", role: accent, pantone: "7515C" }
    brown_04: { hex: "#5E392E", role: accent, pantone: "4695C" }
    blue_01: { hex: "#EAF6FD", role: accent, pantone: "9400C" }
    blue_02: { hex: "#B9E1FA", role: accent, pantone: "9440C" }
    blue_03: { hex: "#4E6175", role: accent, pantone: "4138C" }
    blue_04: { hex: "#1F2933", role: accent, pantone: "4280C" }
  approved_pairs:
    - foreground: off_black_01
      background: off_white_01
      context: "Default"
    - foreground: "black or white typography"
      background: "any accent or neutral"
      context: "Black or white typography on color or neutral backgrounds; smaller, lighter type needs higher contrast."
  accent_rule: "Use accents sparingly; the '01' row (lightest accents) may serve as illustration backgrounds."
  forbidden_pairs: gap
```

## Typography

Large headlines are set in SN Litteratur Regular. Subheadings, body copy, captions and buttons are set in ABC Diatype. The warm serif and the clean sans represent "the two sides of Casa: home life and product intelligence."

```yaml
typography:
  families:
    display:
      family: "SN Litteratur"
      weights: [Regular]
      styles: ["normal"]
      fallback: "Libre Baskerville (last resort only, e.g. Google Slides; it sets larger at the same size)"
      source: gap
      licensing_status: gap
      status: brand_declared
    body:
      family: "ABC Diatype"
      weights: [Regular, Medium]
      styles: ["normal"]
      fallback: "Helvetica Neue (last resort only, e.g. Google Slides; Diatype is narrower with a smaller x-height)"
      source: gap
      licensing_status: gap
      status: brand_declared
  roles:
    large_headline: { family: "SN Litteratur Regular", size: "80pt", tracking: "-2%", leading: "100%", casing: "sentence case" }
    subheading_body: { family: "ABC Diatype Regular", size: "24pt", tracking: "2%" }
    body_example: { family: "ABC Diatype", size: "20px", tracking: "2%", leading: "130%", casing: "sentence case" }
    button: { family: "ABC Diatype Medium", size: "16pt", tracking: "2%" }
    labels_captions: { family: "ABC Diatype", alignment: "left or centered" }
  scale_sn_litteratur_px:
    - { size: 200, leading: "90%", tracking: "-4%" }
    - { size: 145, leading: "90%", tracking: "-4%" }
    - { size: 85, leading: "95%", tracking: "-3%" }
    - { size: 72, leading: "95%", tracking: "-4%" }
    - { size: 64, leading: "95%", tracking: "-4%" }
    - { size: 56, leading: "100%", tracking: "-4%" }
    - { size: 48, leading: "100%", tracking: "-4%" }
    - { size: 40, leading: "100%", tracking: "-4%" }
    - { size: 32, leading: "100%", tracking: "-3%" }
    - { size: 30, leading: "100%", tracking: "-2%" }
    - { size: 24, leading: "110%", tracking: "-2%" }
    - { size: 16, leading: "110%", tracking: "-1%" }
    - { size: 12, leading: "120%", tracking: "0%" }
    - { size: 10, leading: "125%", tracking: "1%" }
    - { size: 8, leading: "130%", tracking: "2%" }
  scale_abc_diatype_px:
    - { size: 64, leading: "95%", tracking: "-3%" }
    - { size: 56, leading: "95%", tracking: "-3%" }
    - { size: 48, leading: "95%", tracking: "-3%" }
    - { size: 40, leading: "100%", tracking: "-3%" }
    - { size: 32, leading: "105%", tracking: "-2%" }
    - { size: 28, leading: "100%", tracking: "-2%" }
    - { size: 24, leading: "100%", tracking: "-2%" }
    - { size: 20, leading: "100%", tracking: "-1%" }
    - { size: 16, leading: "115%", tracking: "0%" }
    - { size: 12, leading: "120%", tracking: "0%" }
    - { size: 10, leading: "120%", tracking: "1%" }
  google_slides_equivalents:
    - { family: "Libre Baskerville", size: "80px", leading: "110%", tracking: "-4%" }
    - { family: "Libre Baskerville", size: "86px", leading: "105%", tracking: "-3%" }
    - { family: "Helvetica Neue", size: "19px", leading: "130%", tracking: "4%", matches: "ABC Diatype 20px / 130% / 2%" }
  rules:
    - "Tracking and leading tighten as size increases and loosen as size decreases."
    - "Adjust the rag to avoid ascender/descender collisions; increase leading if needed."
    - "Create hierarchy with color, size and spacing; not with weight changes, underlines or all caps."
    - "Never: add effects, rotate type, mix type styles, use other alternative fonts, use all caps."
```

## Iconography and illustration

```yaml
iconography:
  grid: "10 x 10"
  corners: "Rounded corners with subtler inner corners"
  proportions: ["square", "narrow", "wide"]
  usage: "Functional and informative, in product and quieter marketing moments; consistent size and stroke weight; never very large or expressive."
illustration:
  technical_spot: "Thin, technical linework with an off-white, neutral or light fill and subtle shading; placed on off-white or '01' accent backgrounds."
  emotive: "Inspired by art in the home: expressive brushstrokes, a sense of movement, the Casa accent palette, warm and neutral-leaning colors. Abstract (used as backgrounds) or depictive (used for storytelling and product easter eggs)."
  forbidden: ["generic illustrations without visible brushstrokes", "very busy backgrounds behind text", "overly abstract forms", "linework within emotive illustrations", "overly graphic or overly saturated treatments"]
```

## Imagery

```yaml
imagery:
  photographic_style: |
    Aspirational yet attainable snaps of everyday life at home: family interactions and
    candid moments that show a well-run home. Lighting is natural, bright and warm, using
    sunlight and ambient home light without harsh shadows. Color is bright and lively with
    contrast between materials (neutral walls, warm wood). Cast real people in their real
    homes across ages, life stages and relationship types. Homes show signs of life, such as
    cooking ephemera, children's books and crayons. Use immersive, imperfect, handheld
    angles. Vendor imagery shows real vendors at work in warm portraits. Video should feel
    like "a homemade family film."
  content_buckets: ["People at Home", "Interiors", "Vendors", "Video"]
  forbidden_treatments:
    - "staged poses, exaggerated smiles or actors"
    - "people holding phones or working at desktops"
    - "cold, sterile, unrealistically tidy or show-home interiors"
    - "overly minimal 'Scandinavian' homes"
    - "real-estate or surveillance-like angles"
    - "flat, dramatic or artificial lighting"
    - "washed-out, one-note tones"
    - "straight clutter or mess as a stand-in for authenticity"
    - "tools spotlighted as props; stock 'candid' images"
```