--- 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" ```