# LPAS — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://lpas.com/
Captured: 2026-10-10
CSS measured: 2026-10-10T04:56:30.571Z at 1440×1000 — https://lpas.com/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: anthropic/claude-sonnet-5

## Design direction

The website for LPAS, an architecture and interior design studio, employs a refined, editorial aesthetic dominated by full-bleed architectural photography and a clean, grid-based layout. The design uses a stark sans-serif typography system (Aeonik) with strong contrast between large display headings and structured body copy. Distinct sections are often delineated by solid blocks of muted, earthy background colors or thin horizontal borders, creating a structured yet expansive feel.

## Classification

- Industry: creative
- Site type: Blog, Portfolio
- Business model: Portfolio, Agency
- Styles: minimal, photographic, editorial, corporate, structured-grid
- Platform: WordPress
- Technology: Not identified

## Typography

- Display: Aeonik — weight 400; size 75px; line-height 75px; tracking normal; Regular (90% role confidence, computed values)
- Heading: Aeonik — weight 400; size 56px; line-height 61.6px; tracking normal; Regular (90% role confidence, computed values)
- Body: Aeonik — weight 400; size 16px; line-height 21.6px; tracking normal; Regular (85% role confidence, computed values)
- Mono: Aeonik — weight 400; size 12px; line-height 16.8px; tracking normal; Regular (75% role confidence, computed values)

## Functional palette

- Text — text #111111: color-5: computed rgb(17, 17, 17); AI role: Near black (#111111) is the primary color for body copy and headings on light backgrounds. (95% role confidence, computed values)
- Canvas — canvas #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: White (#FFFFFF) is used as the primary background for content-heavy sections like the project grid and updates list. (90% role confidence, computed values)
- Border — border #D6D6D6: color-13: computed rgb(214, 214, 214); AI role: Light gray (#D6D6D6) is used for thin horizontal dividers and button outlines. (90% role confidence, computed values)
- Surface — surface #262626: color-2: computed rgb(38, 38, 38); AI role: Dark gray (#262626) is used for the footer background and large navigational surface. (85% role confidence, computed values)
- Muted Text — muted text #747474: color-11: computed rgb(116, 116, 116); AI role: Medium gray (#747474) is used for secondary information like project locations and update descriptions. (85% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Aeonik",
    "fontStack": "Aeonik, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "21.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 53,
    "contexts": [
      {
        "tag": "span",
        "text": "Residential",
        "top": 901,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Housing",
        "top": 923,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Design for",
        "top": 901,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Aeonik",
    "fontStack": "Aeonik, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "18.9px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 22,
    "contexts": [
      {
        "tag": "span",
        "text": "Architecture + Interiors",
        "top": 489,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "A Market-Focused Approach",
        "top": 489,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Scroll to explore",
        "top": 491,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Aeonik",
    "fontStack": "Aeonik, sans-serif",
    "weight": "400",
    "size": "56px",
    "lineHeight": "61.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "h2",
        "text": "Housing",
        "top": 882,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Interiors",
        "top": 882,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Higher Education",
        "top": 820,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Aeonik",
    "fontStack": "Aeonik, sans-serif",
    "weight": "400",
    "size": "38px",
    "lineHeight": "41.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "h2",
        "text": "A selection of our work",
        "top": 5997,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Portfolio",
        "top": 8016,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Aeonik",
    "fontStack": "Aeonik, sans-serif",
    "weight": "400",
    "size": "75px",
    "lineHeight": "75px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "We’re a process driven architecture and interior design studio",
        "top": 715,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Aeonik",
    "fontStack": "Aeonik, sans-serif",
    "weight": "400",
    "size": "28px",
    "lineHeight": "36.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Latest updates",
        "top": 7240,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Aeonik",
    "fontStack": "Aeonik, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 17,
    "contexts": [
      {
        "tag": "span",
        "text": "Menu",
        "top": 42,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "1 / 5",
        "top": 943,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "2 / 5",
        "top": 943,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Aeonik",
    "fontStack": "Aeonik, sans-serif",
    "weight": "600",
    "size": "12px",
    "lineHeight": "16.8px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "span",
        "text": "09.24.26",
        "top": 7313,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "05.21.26",
        "top": 7371,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "05.12.26",
        "top": 7429,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Aeonik",
    "fontStack": "Aeonik, sans-serif",
    "weight": "400",
    "size": "50px",
    "lineHeight": "55px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "a",
        "text": "Housing",
        "top": 8016,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Interiors",
        "top": 8078,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Higher Education",
        "top": 8140,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 141,
    "contexts": [
      {
        "tag": "body",
        "text": "L isten P lan A nalyze S hape Shift your focus Housing Interiors Higher Education Civic Commercial M",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "Menu",
        "top": 42,
        "property": "text"
      },
      {
        "tag": "main",
        "text": "Architecture + Interiors A Market-Focused Approach Swipe up to explore Scroll to explore We’re a pro",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#262626",
    "alpha": 1,
    "cssValue": "rgb(38, 38, 38)",
    "count": 14,
    "contexts": [
      {
        "tag": "span",
        "text": "Menu Close",
        "top": 38,
        "property": "background"
      },
      {
        "tag": "h2",
        "text": "Higher Education",
        "top": 820,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "3 / 5",
        "top": 943,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#000000",
    "alpha": 0.6,
    "cssValue": "rgba(0, 0, 0, 0.6)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Our Focus Housing Interiors Higher Education Civic Commercial Explore our Portfolio",
        "top": 7938,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#000000",
    "alpha": 0.03529411764705882,
    "cssValue": "rgba(0, 0, 0, 0.035)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#111111",
    "alpha": 1,
    "cssValue": "rgb(17, 17, 17)",
    "count": 24,
    "contexts": [
      {
        "tag": "h2",
        "text": "Clear Process. Creative Results. Human Centered. Always Curious.",
        "top": 5520,
        "property": "text"
      },
      {
        "tag": "h3",
        "text": "Listen. Plan. Analyze. Shape.",
        "top": 5765,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "At LPAS, we design with people at the center and purpose at every turn. We believe great architectur",
        "top": 5765,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#E3C1AA",
    "alpha": 1,
    "cssValue": "rgb(227, 193, 170)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Commercial 5 / 5 Design forbusiness value",
        "top": 545,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#707569",
    "alpha": 1,
    "cssValue": "rgb(112, 117, 105)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Civic 4 / 5 Architecture inservice",
        "top": 591,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#C9D3DF",
    "alpha": 1,
    "cssValue": "rgb(201, 211, 223)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Higher Education 3 / 5 Architecture foracademic community",
        "top": 614,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#925434",
    "alpha": 1,
    "cssValue": "rgb(146, 84, 52)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Interiors 2 / 5 Design foreveryday life",
        "top": 633,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#625653",
    "alpha": 1,
    "cssValue": "rgb(98, 86, 83)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Affordable Housing Student Housing Market Rate Housing Senior Housing Housing 1 / 5 ResidentialHousi",
        "top": 667,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#747474",
    "alpha": 1,
    "cssValue": "rgb(116, 116, 116)",
    "count": 33,
    "contexts": [
      {
        "tag": "div",
        "text": "Housing",
        "top": 6063,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Livermore, CA",
        "top": 6583,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "It was a big day for LPAS at the Sacramento Business Journal’s Best Real Estate Projects of the Year",
        "top": 7312,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#A3A3A3",
    "alpha": 1,
    "cssValue": "rgb(163, 163, 163)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "© 2026. All rights reserved.",
        "top": 8517,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Website by Naam",
        "top": 8515,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#D6D6D6",
    "alpha": 1,
    "cssValue": "rgb(214, 214, 214)",
    "count": 19,
    "contexts": [
      {
        "tag": "span",
        "text": "More about us",
        "top": 5874,
        "property": "border"
      },
      {
        "tag": "span",
        "text": "",
        "top": 5871,
        "property": "background"
      },
      {
        "tag": "header",
        "text": "A selection of our work All projects See our focus cases Housing 30 Interiors 17 Higher Education 13",
        "top": 5997,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 58,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 41,
        "property": "svg-fill"
      },
      {
        "tag": "use",
        "text": "",
        "top": 41,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#FFFFFF",
    "alpha": 0.30196078431372547,
    "cssValue": "rgba(255, 255, 255, 0.3)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Instagram Linkedin Facebook Sacramento 723 S Street, Suite 150 Sacramento, CA 95811 916 443 0335 E-m",
        "top": 8118,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#0D0D0D",
    "alpha": 0.6,
    "cssValue": "rgba(14, 14, 14, 0.6)",
    "count": 1,
    "contexts": [
      {
        "tag": "button",
        "text": "Menu Close",
        "top": 35,
        "property": "control-background"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Generous vertical and horizontal padding, creating distinct, breathable sections with clear hierarchy.
- Corner style: Strictly orthogonal with sharp, 90-degree corners for images, grid cells, and color blocks.
- Radius: 0px for structural elements; fully rounded (50%) for small icon buttons.
- Borders: Thin, 1px solid horizontal lines are used extensively to separate list items, header elements, and footer sections.
- Buttons: Circular outline buttons with internal icons, or simple text links with an underline or arrow, maintaining a lightweight feel.
- Content width: A mix of edge-to-edge full-bleed imagery and max-width constrained text blocks with significant side margins.
- Density: Low density; relies heavily on negative space and large typographic scales to communicate structure rather than dense UI packing.
- Evidence: Visual inspection of the grid structures, large typography blocks, hairline dividers separating list items, and the un-rounded corners of photographs.

## Sections

Gallery section count: 11. Each entry corresponds to one gallery capture.

1. **Hero — Process-Driven Architecture Studio Hero** (Home)
   AI suggestion (96% confidence): Complete opening hero with full-bleed studio imagery, concise positioning statement, brand mark, menu control, service labels, and a scroll prompt; it ends clearly where the project showcase begins.
   Capture: 1440×1002px; page bounds 0–1002px of 9563px; source section ID: `6845f995-9b20-4789-8500-3843526ab770`; image: https://media.designdetails.io/library/ba8ec7b8fb6c537f375cb0c62e89c5e41ccebbca7919aa1eca3dbb4f9a7d82fb/6845f995-9b20-4789-8500-3843526ab770.webp
   SECTION.md v3.2: `6845f995-9b20-4789-8500-3843526ab770` (deterministic evidence; editorial review pending)
2. **Hero — About Hero with Studio Overview** (About)
   AI suggestion (97% confidence): Complete split-screen hero featuring a large workplace image, brand statement, compact supporting image, prominent About title, and scroll cue.
   Capture: 1440×801px; page bounds 0–801px of 8159px; source section ID: `567a7e80-c452-4d81-a931-91a6d95e48fc`; image: https://media.designdetails.io/library/0be5d5b311ed24dd9d61d12a63e034d2bb17c66ffba04b68954f354c5b228dfa/567a7e80-c452-4d81-a931-91a6d95e48fc.webp
   SECTION.md v3.2: `567a7e80-c452-4d81-a931-91a6d95e48fc` (deterministic evidence; editorial review pending)
3. **Features — Clear Process. Creative Results. Human Centered. Always Curious.** (Home)
   Reusable feature composition from Home, organized around “Clear Process. Creative Results. Human Centered. Always Curious.”.
   Capture: 1440×377px; page bounds 5520–5897px of 9563px; source section ID: `6d876f8a-32d9-45cd-9c23-9260cd844b41`; image: https://media.designdetails.io/library/1ba6e0c754daaefb42b2679be230a114f3d4c41afa71bb28db31c57337836bff/section_crop-6d876f8a-2026-10-10T04-56-42-212Z.webp
   SECTION.md v3.2: `6d876f8a-32d9-45cd-9c23-9260cd844b41` (deterministic evidence; editorial review pending)
4. **Features — LPAS Architecture + Design is an award-winning, multidisciplinary design…** (About)
   Reusable feature composition from About, organized around “LPAS Architecture + Design is an award-winning, multidisciplinary design…”.
   Capture: 1440×232px; page bounds 900–1132px of 8159px; source section ID: `e7beddfb-fd17-4ced-bc59-4628a22d5755`; image: https://media.designdetails.io/library/28c0ba3595bd264ab0aa27581d28b4f59274519cb15ffb9396a0c420c0d7f253/section_crop-e7beddfb-2026-10-10T05-06-15-582Z.webp
   SECTION.md v3.2: `e7beddfb-fd17-4ced-bc59-4628a22d5755` (deterministic evidence; editorial review pending)
5. **Editorial — Architecture Firm Introduction** (About)
   AI suggestion (94% confidence): Self-contained company overview combining a strong introductory statement, two offset studio photographs, and a concluding philosophy paragraph.
   Capture: 1440×1374px; page bounds 858–2232px of 8159px; source section ID: `dbb9c42d-2c6b-4639-ad0a-855b7e26a181`; image: https://media.designdetails.io/library/2cf9a18e9063260b1ddf575569df3df24d9b589cc7eb0cfaf5af6b0f0aaab444/dbb9c42d-2c6b-4639-ad0a-855b7e26a181.webp
   SECTION.md v3.2: `dbb9c42d-2c6b-4639-ad0a-855b7e26a181` (deterministic evidence; editorial review pending)
6. **Gallery — Selected Architecture Work** (Home)
   AI suggestion (98% confidence): Complete portfolio gallery with its own heading, project filters, varied image grid, and labeled architecture projects; the component has a clear beginning and ending.
   Capture: 1440×1152px; page bounds 5998–7150px of 9563px; source section ID: `60b663ad-b87c-4ceb-adcc-546759f11d57`; image: https://media.designdetails.io/library/0c9a0680d2251649d7ec15b091ed69474f0e76ddbb2dc16e7c8786a359aefba1/60b663ad-b87c-4ceb-adcc-546759f11d57.webp
   SECTION.md v3.2: `60b663ad-b87c-4ceb-adcc-546759f11d57` (deterministic evidence; editorial review pending)
7. **CTA — Focus Areas and Portfolio Gateway** (About)
   AI suggestion (93% confidence): Complete full-bleed architectural image block pairing prominent sector links—Housing, Interiors, Higher Education, Civic, and Commercial—with a clear Portfolio prompt.
   Capture: 1440×1001px; page bounds 6537–7538px of 8159px; source section ID: `882b73b5-fd17-45a2-b6c4-fcd0ebc2bad5`; image: https://media.designdetails.io/library/ce41b778e2cc3a7c1199f4d0ce4aa8f560f83e02c23fc0d21c05653aa63bf210/882b73b5-fd17-45a2-b6c4-fcd0ebc2bad5.webp
   SECTION.md v3.2: `882b73b5-fd17-45a2-b6c4-fcd0ebc2bad5` (deterministic evidence; editorial review pending)
8. **Editorial — Latest Updates** (Home)
   AI suggestion (96% confidence): Self-contained news feed with heading, dated update rows, directional actions, and an “All news” link, ending before the next visual section begins.
   Capture: 1440×456px; page bounds 7243–7699px of 9563px; source section ID: `eb52ce61-d5e6-4c07-bd7d-8eb5851ba00c`; image: https://media.designdetails.io/library/852ee23cef4065ce874a003fe00e9e610230335a88a7d2be6dd3221b1fe8d405/eb52ce61-d5e6-4c07-bd7d-8eb5851ba00c.webp
   SECTION.md v3.2: `eb52ce61-d5e6-4c07-bd7d-8eb5851ba00c` (deterministic evidence; editorial review pending)
9. **Footer — Studio Locations and Site Footer** (About)
   AI suggestion (98% confidence): Complete substantial footer with primary navigation, studio addresses and contact details, social links, branding, copyright, back-to-top control, and site credit.
   Capture: 1440×621px; page bounds 7538–8159px of 8159px; source section ID: `1cb6625d-f836-4756-845f-8c79bcaecdea`; image: https://media.designdetails.io/library/3d8911efda3aa1ba72e25ccd96d18b153ca984d0a38c82b876df59ffc69d75b9/1cb6625d-f836-4756-845f-8c79bcaecdea.webp
   SECTION.md v3.2: `1cb6625d-f836-4756-845f-8c79bcaecdea` (deterministic evidence; editorial review pending)
10. **CTA — Explore Portfolio by Focus Area** (Home)
   AI suggestion (94% confidence): Complete full-width visual prompt pairing a dramatic interior image with focus-area links and a clear invitation to explore the portfolio.
   Capture: 1440×1007px; page bounds 7941–8948px of 9563px; source section ID: `09ef63c4-1ba9-46d8-bd07-3087b90a297a`; image: https://media.designdetails.io/library/fdb840ce97885446027662bd3bfe911e20f0ee898276e2654b71e83ab0850b69/09ef63c4-1ba9-46d8-bd07-3087b90a297a.webp
   SECTION.md v3.2: `09ef63c4-1ba9-46d8-bd07-3087b90a297a` (deterministic evidence; editorial review pending)
11. **Footer — Office Locations and Social Footer** (Home)
   AI suggestion (96% confidence): Complete site footer with Sacramento and Oakland contact details, social links, copyright, back-to-top controls, and site credit.
   Capture: 1440×615px; page bounds 8948–9563px of 9563px; source section ID: `72715abd-f313-4e88-86c9-330ba8c0061e`; image: https://media.designdetails.io/library/2d2963ba20d4f0ac29fca8b45f08dd08f59b8651bf5e9341ad5d912e21eda1b9/72715abd-f313-4e88-86c9-330ba8c0061e.webp
   SECTION.md v3.2: `72715abd-f313-4e88-86c9-330ba8c0061e` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/caa5b23bb38586c7e12213e144462b301d1f73b4592a4853ae28ab9490020655/desktop_full-d2353f2d-2026-10-10T04-56-30-579Z.webp
- Mobile screenshot: https://media.designdetails.io/library/1768b759ffd4143d1c2ef11bb0a89d6da0584d4c59d8933fc438dbce3d1c8f65/mobile_full-d2353f2d-2026-10-10T04-57-09-237Z.webp
- Open Graph image: https://media.designdetails.io/library/5ffffc109c98564f1c5c99e2c7da1db41bb936d49059ac5a66cfea3d6e73094b/og_image-d2353f2d-2026-10-10T04-56-40-264Z.webp
- Full-page video: https://media.designdetails.io/library/b9e3b77a43b7bc3e7719bafeb7467e2b4f5ff49e23bba146875a63e1bfa0edbb/motion-1791618035384.mp4
- Video poster: https://media.designdetails.io/library/ce23ba8144399fc95b70fe97244239d1594aa811e9965b0a88b98cf30ce7ce5b/motion-poster-1791618035384.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Hero With Background Imagery
- Navigation Bar
- Feature Collection
- Product Card
- Icon Button
- Footer
- Color Blocked Sections
- List View With Dividers

## Quality rubric

Overall: 59.5/100 (Competent)
Evidence coverage: 80%
Judge tier: Good
Verdict: LPAS presents a clean, well-organized editorial portfolio for an architecture studio, anchored by a genuinely purposeful color-coding system that ties five service categories to distinct muted palettes, paired with disciplined grid layout and real, specific project content. The execution is competent and cohesive, but it leans on a single font weight for all typographic hierarchy and follows a template structure common to this sector, so despite tidy craft it reads as solid rather than distinctive; motion could not be verified from the supplied evidence.

- Typography (15%): 60 — A single family (Aeonik) is deployed across a wide, legible size scale (12–75px) with clear hierarchy between hero, section heads, and body, consistent with an editorial system. However every weight recorded is 400 (one 600 instance at 12px only), so hierarchy is carried almost entirely by size rather than weight contrast, letter-spacing is uniformly 'normal,' and there is no secondary typeface or textural variation to create friction or voice — a competent, safe system rather than a distinctive one.
- Color (10%): 67 — The palette pairs a disciplined neutral base (white canvas, #111 text, #262626 dark surface) with a curated set of five muted, non-primary category colors (terracotta #925434, sage #707569, dusty blue #C9D3DF, blush tan #E3C1AA, warm taupe #625653) that are consistently mapped to the five service categories (Housing/Interiors/Higher Education/Civic/Commercial). This gives color a functional, categorizing role beyond decoration, and the restraint (no saturated primaries) keeps it cohesive with the architectural photography.
- Layout (20%): 65 — The page sustains a legible structural logic across multiple distinct sections: full-bleed hero, a color-blocked 'focus areas' sequence with asymmetric image grids, a centered statement+body split, a tagged project grid with filter counts, a bordered list of updates, and a multi-column footer sitemap. Grid discipline (sharp corners, hairline dividers, consistent margins) is maintained end-to-end, which is more than a single hero trick. It stops short of 'strong' because the grid vocabulary, while tidy, is a fairly conventional agency/portfolio template (hero → category cards → project grid → list → footer) without a structural surprise or bespoke spatial idea tying sections together.
- Motion (20%): Not_assessed — No motion recording or interaction evidence was supplied for this reference, so scroll, hover, or transition behavior cannot be judged.
- Originality (25%): 50 — The overall idiom — full-bleed architectural photography, a scrolling sequence of color-blocked category tiles, a project grid with filter tags, and a divided 'latest updates' list — is a well-worn pattern among contemporary architecture/AEC studio sites. The category-to-color mapping is a pleasant, purposeful touch, but it is a single device, not a system of several hard-to-substitute ideas, and nothing here departs from the expected 'minimal editorial corporate' template for this sector.
- Content (10%): 64 — Photography and copy are well-matched to purpose: project images are tagged with real locations and category labels, the category tiles pair representative imagery with on-brand micro-copy ('Design for everyday life,' 'Architecture in service'), and the updates list surfaces dated, specific Instagram-sourced news items rather than placeholder text. This is coherent, purposeful integration rather than stock imagery dressing, though it remains fairly literal (photo + label + location) without deeper narrative layering.

Coverage: 80% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [ ] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

Full-bleed photos of real buildings and interiors sit in an asymmetric grid, broken by solid blocks of rust, grey and olive that label each practice area in bold white type. This color-coded sectioning turns a long portfolio into clear, scannable categories without ever leaving the photography behind.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.