# SANTAL — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://santalarch.com/
Captured: 2026-11-15
CSS measured: 2026-11-15T20:45:38.593Z at 1440×1000 — https://santalarch.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: claude-sonnet-5

## Design direction

SANTAL is a highly minimalist, monochromatic, and typographic website for an architectural studio. The design is characterized by extreme negative space, massive scaling of the Helvetica typeface, and a strict adherence to underlying grids. The layout feels highly editorial, with content organized into full-viewport sections that shift dynamically on scroll. Thin hairline dividers and an absence of border radii reinforce the precise, structural, and architectural theme of the brand.

## Classification

- Industry: creative
- Site type: Portfolio
- Business model: Agency
- Styles: minimal, typographic, editorial, monochromatic, architectural
- Platform: Custom code
- Technology: Three.js

## Typography

- Display: Helvetica — weight 400; size 234px; line-height 203.6px; tracking -23.4px; uppercase (98% role confidence, computed values)
- Heading: Helvetica — weight 400; size 98px; line-height 86.2px; tracking -4.9px; Regular (95% role confidence, computed values)
- Body: Helvetica — weight 400; size 16px; line-height 20.5px; tracking -0.3px; Regular (90% role confidence, computed values)

## Functional palette

- Canvas — canvas #F2F0F0: color-1: computed rgb(242, 240, 240); AI role: #F2F0F0 light grey acting as the primary background color for light sections. (95% role confidence, computed values)
- Text — text #0F0F0F: color-2: computed rgb(15, 15, 15); AI role: #0F0F0F deep black used for almost all text across the canvas. (95% role confidence, computed values)
- Surface — surface #000000: color-7: computed rgb(0, 0, 0); AI role: Pure black (#000000) used for the canvas/background in dark-mode, inverted sections. (90% 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": "Helvetica",
    "fontStack": "Helvetica, sans-serif",
    "weight": "500",
    "size": "10px",
    "lineHeight": "11.6px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 71,
    "contexts": [
      {
        "tag": "div",
        "text": "Bold",
        "top": 500,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "presence.",
        "top": 500,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Quiet",
        "top": 512,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Helvetica",
    "fontStack": "Helvetica, sans-serif",
    "weight": "500",
    "size": "12px",
    "lineHeight": "14.4px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 31,
    "contexts": [
      {
        "tag": "div",
        "text": "Philosophy",
        "top": 226,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Works",
        "top": 226,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Services",
        "top": 226,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Helvetica",
    "fontStack": "Helvetica, sans-serif",
    "weight": "400",
    "size": "33px",
    "lineHeight": "35.6px",
    "letterSpacing": "-1px",
    "traits": "Regular",
    "count": 23,
    "contexts": [
      {
        "tag": "div",
        "text": "Architectural",
        "top": 493,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "studio",
        "top": 493,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "built",
        "top": 528,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Helvetica",
    "fontStack": "Helvetica, sans-serif",
    "weight": "400",
    "size": "50px",
    "lineHeight": "50px",
    "letterSpacing": "-1.5px",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "h3",
        "text": "Detail as Discipline",
        "top": 22283,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Architecture",
        "top": 33972,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Interior",
        "top": 33972,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Helvetica",
    "fontStack": "Helvetica, sans-serif",
    "weight": "400",
    "size": "98px",
    "lineHeight": "86.2px",
    "letterSpacing": "-4.9px",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "Architecture",
        "top": 1156,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Shapes Perception",
        "top": 1242,
        "property": "font"
      },
      {
        "tag": "h2",
        "text": "Quiet",
        "top": 2470,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Helvetica",
    "fontStack": "Helvetica, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "20.5px",
    "letterSpacing": "-0.3px",
    "traits": "Regular",
    "count": 102,
    "contexts": [
      {
        "tag": "div",
        "text": "A",
        "top": 2470,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "quiet",
        "top": 2470,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "presence,",
        "top": 2470,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Helvetica",
    "fontStack": "Helvetica, sans-serif",
    "weight": "400",
    "size": "10px",
    "lineHeight": "11.6px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 65,
    "contexts": [
      {
        "tag": "span",
        "text": "Master plan or layout options",
        "top": 39284,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Functional zoning",
        "top": 39308,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "Architectural and interior concept",
        "top": 39332,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Helvetica",
    "fontStack": "Helvetica, sans-serif",
    "weight": "500",
    "size": "8px",
    "lineHeight": "9.5px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "p",
        "text": "Project",
        "top": 22529,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "General",
        "top": 43380,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Enquiries",
        "top": 43380,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Helvetica",
    "fontStack": "Helvetica, sans-serif",
    "weight": "400",
    "size": "234px",
    "lineHeight": "203.6px",
    "letterSpacing": "-23.4px",
    "traits": "uppercase",
    "count": 7,
    "contexts": [
      {
        "tag": "span",
        "text": "WE",
        "top": 21670,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "see",
        "top": 21670,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "hear",
        "top": 21874,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#F2F0F0",
    "alpha": 1,
    "cssValue": "rgb(242, 240, 240)",
    "count": 29,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 22789,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 22329,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#0F0F0F",
    "alpha": 1,
    "cssValue": "rgb(15, 15, 15)",
    "count": 127,
    "contexts": [
      {
        "tag": "div",
        "text": "Architectural",
        "top": 493,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "Architecture",
        "top": 1156,
        "property": "text"
      },
      {
        "tag": "path",
        "text": "",
        "top": -3,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#F0F0F0",
    "alpha": 1,
    "cssValue": "rgb(240, 240, 240)",
    "count": 258,
    "contexts": [
      {
        "tag": "path",
        "text": "",
        "top": 975,
        "property": "svg-fill"
      },
      {
        "tag": "rect",
        "text": "",
        "top": 977,
        "property": "svg-fill"
      },
      {
        "tag": "circle",
        "text": "",
        "top": 971,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#EBEBEB",
    "alpha": 0.050980392156862744,
    "cssValue": "rgba(242, 240, 240, 0.05)",
    "count": 10,
    "contexts": [
      {
        "tag": "nav",
        "text": "PhilosophyPhilosophyWorksWorksServicesServicesProcessProcessCompanyCompanyContactContactMenu",
        "top": 209,
        "property": "::before-background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "PhilosophyPhilosophyWorksWorksServicesServicesProcessProcessCompanyCompanyContactContactMenu",
        "top": 44795,
        "property": "::before-background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#F2F0F0",
    "alpha": 0.4,
    "cssValue": "rgba(242, 240, 240, 0.4)",
    "count": 3,
    "contexts": [
      {
        "tag": "p",
        "text": "Lead Architect (Berlin)",
        "top": 40786,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#0F0F0F",
    "alpha": 0.4,
    "cssValue": "rgba(15, 15, 15, 0.4)",
    "count": 9,
    "contexts": [
      {
        "tag": "p",
        "text": "Project",
        "top": 22529,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "Enquire",
        "top": 43336,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 4,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 43792,
        "property": "svg-fill"
      },
      {
        "tag": "g",
        "text": "",
        "top": 43798,
        "property": "svg-fill"
      },
      {
        "tag": "image",
        "text": "",
        "top": 43798,
        "property": "svg-fill"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#F0F0F0",
    "alpha": 0.2,
    "cssValue": "rgba(242, 240, 240, 0.2)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1970,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#0E0E0E",
    "alpha": 0.07058823529411765,
    "cssValue": "rgba(15, 15, 15, 0.07)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 43394,
        "property": "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: Macro-typography dictates the spacing, with vast margins and padding driven by strict viewport-relative units to maintain layout integrity.
- Corner style: Absolute sharp corners everywhere; no border radii are used, reinforcing the rigid, brutalist/architectural aesthetic.
- Radius: 0px
- Borders: Hairline 1px solid borders in low contrast used to demarcate grid structures, columns, and navigational boundaries.
- Buttons: Stripped back to purely typographic links or minimal cross/plus icons, relying on proximity and layout rather than contained shapes.
- Content width: Full bleed. Elements either span edge-to-edge or snap rigidly to vertical guide lines that span the entire viewport.
- Density: Extremely sparse. The layout aggressively prioritizes empty canvas space to lend gravity to the typography and images.
- Evidence: Observations from the CSS dom output showing 0px radii, repeated #F2F0F0 backgrounds, Helvetica usage at massive font sizes, and visual crops displaying extensive white space.

## Sections

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

1. **Hero — Oversized wordmark with thin grid** (Home)
   A giant black wordmark over a hairline grid and a small statement sets an architectural tone and gives one clear focal point.
   Capture: 1440×740px; page bounds 0–740px of 45586px; source section ID: `01b00e8f-bdc2-4f3a-af4b-cf5210e74ed4`; image: https://media.designdetails.io/library/98147bd8ea187d147c67bcc96f3e2d5bffd5cf53086d3dc78fc297b01c6a9203/section-manual-01b00e8f-bdc2-4f3a-af4b-cf5210e74ed4-1794777027025.webp
   SECTION.md v3.2: `01b00e8f-bdc2-4f3a-af4b-cf5210e74ed4` (deterministic evidence; editorial review pending)
2. **Other — Rotating 3D word field animation** (Home)
   Floating white and grey words in a dark 3D space express the studio's values through motion without needing images.
   Capture: 960×600px; page bounds 1970–21670px of 45586px; source section ID: `c039d7bf-61b2-4266-82f4-a5391e7252f2`; image: https://media.designdetails.io/library/f68377a11a8dbcfbde6dc8eff50cee997a52c7c786e348286a8946d5de9d2bcc/c039d7bf-61b2-4266-82f4-a5391e7252f2.webp
   SECTION.md v3.2: `c039d7bf-61b2-4266-82f4-a5391e7252f2` (deterministic evidence; editorial review pending)
3. **Process — Scroll-through approach principles with line art** (Home)
   Each principle gets its own full-height step with a counter and fine line drawings, so visitors read them one at a time.
   Capture: 960×600px; page bounds 23029–31879px of 45586px; source section ID: `02507451-52c4-4db0-a3d2-88b77d7a204d`; image: https://media.designdetails.io/library/5de123b20853d5605c974b0054cfb46a6629ee0747a0bcee958d8f76d6065341/02507451-52c4-4db0-a3d2-88b77d7a204d.webp
   SECTION.md v3.2: `02507451-52c4-4db0-a3d2-88b77d7a204d` (deterministic evidence; editorial review pending)
4. **Features — Service carousel starting with architecture** (Home)
   A tall image beside a bold active label and a short description explains one service at a time with a clear focus.
   Capture: 1440×1769px; page bounds 34495–36264px of 45586px; source section ID: `ea9c3cbe-3d37-4f7f-932c-7f8e4e7f04cc`; image: https://media.designdetails.io/library/563ef1e74b31cc57dd8d11e259236e646dbfb081f1b01fde59c41f198f9c61b2/section-manual-ea9c3cbe-3d37-4f7f-932c-7f8e4e7f04cc-1794777040175.webp
   SECTION.md v3.2: `ea9c3cbe-3d37-4f7f-932c-7f8e4e7f04cc` (deterministic evidence; editorial review pending)
5. **Features — Interior service slide with faded neighbors** (Home)
   Faded neighboring labels around a bright active title show the full service list while the photo anchors the current one.
   Capture: 1440×894px; page bounds 36264–37158px of 45586px; source section ID: `bb9aa2ae-8a6c-4c82-8112-7a492bdde11c`; image: https://media.designdetails.io/library/14d189447ee89955cb8a393bde6feeb0ea7681d8a15db9985a7c6a8939da1ba3/bb9aa2ae-8a6c-4c82-8112-7a492bdde11c.webp
   SECTION.md v3.2: `bb9aa2ae-8a6c-4c82-8112-7a492bdde11c` (deterministic evidence; editorial review pending)
6. **Team — Portrait trio and global reach map** (Home)
   Black-and-white portraits with names and roles add a human side, followed by a node map showing where the team works.
   Capture: 960×600px; page bounds 40304–44586px of 45586px; source section ID: `5c172c05-3320-45cd-a18b-1073959b2078`; image: https://media.designdetails.io/library/0b35e1ef8a5d0ce7687fa2758af014fc5a51b4f7f39226bc9476d22cb2341e38/5c172c05-3320-45cd-a18b-1073959b2078.webp
   SECTION.md v3.2: `5c172c05-3320-45cd-a18b-1073959b2078` (deterministic evidence; editorial review pending)
7. **Footer — Closing wordmark reveal with tagline** (Home)
   The oversized wordmark returns over a split black and white field, echoing the opening and closing the page with the same statement.
   Capture: 1440×1000px; page bounds 44586–45586px of 45586px; source section ID: `3cd7c9c9-aa5a-483d-b832-53a8d2ea322b`; image: https://media.designdetails.io/library/d54621442e1469f84f96f32d58ac340c07f970d172a94bf371358bc02080800c/3cd7c9c9-aa5a-483d-b832-53a8d2ea322b.webp
   SECTION.md v3.2: `3cd7c9c9-aa5a-483d-b832-53a8d2ea322b` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/32c1ce3cb3cb35d73f5a85166737657f832a35104acb2f3f1d8d320683f1350a/desktop_full-ca5cc5b1-2026-11-15T20-45-38-621Z.jpg
- Mobile screenshot: https://media.designdetails.io/library/bfc7c09666a39cb566cc8260c998b57cb9d3f6289833542b407432292c6dc0e3/mobile_full-ca5cc5b1-2026-11-15T20-46-43-350Z.jpg
- Open Graph image: https://media.designdetails.io/library/5fa4145a8de2f2575f4c86a23d4edf90d58a7c15bbc25d254020758aa671f95a/og_image-ca5cc5b1-2026-11-15T20-45-49-566Z.webp
- Full-page video: https://media.designdetails.io/library/8ee1d484ee917a16f6c3169e598d575c5a191c01d0cfe8a59a9b9397d30d76ed/motion-1794776258929.mp4
- Video poster: https://media.designdetails.io/library/189a219e6468121578f19fc434d3b79b51e710400c866e6853ac8c137578c6d5/motion-poster-1794776258929.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

- Navigation Bar
- Hero
- Gallery
- Feature Collection
- Hairline Grid Structure
- Full Viewport Sections

## Quality rubric

Overall: 66.2/100 (Good)
Evidence coverage: 100%
Judge tier: Good
Verdict: SANTAL executes a legitimate typographic system — a single Helvetica family stretched from 8px captions to 234px display words — as the connective tissue across a long, cinematically scroll-driven page. The hairline grid, strict monochrome base palette, and absence of border radii consistently reinforce an architectural, drafting-table aesthetic, and the motion sequence (hero scale-to-dark, floating 3D type, grid-to-rendering zoom, exploded structural panel, full reverse playback) is ambitious enough to read as a built narrative rather than a single scroll gimmick. These elements cohere into a real system, which is why the site clears 'good.' It doesn't reach 'strong' or higher because its component ideas — grid-as-window reveal, exploded 3D view, giant single-word statements — are recognizable from the broader award-site/agency genre rather than being hard to substitute, the warm photographic content departs from the monochrome discipline without a unifying treatment, and the luxury-interior gallery imagery reads as generic rather than bespoke to this studio. The scroll-jacked length also introduces execution risk (jank, pacing, disorientation) that cannot be confirmed as well-tuned from the available evidence. Overall this is a well-made, idiom-faithful architectural portfolio with a genuine typographic and motion system, but it synthesizes established techniques rather than introducing a landmark one.

- Typography (15%): 78 — A single Helvetica family is deployed across an unusually wide and deliberate scale range (8px micro-labels to 234px display), with tight negative tracking at large sizes and consistent hierarchy rules (nav 12px, body 16px, section heads 50-98px, hero word-statements 234px). This is a genuine typographic system, not just a big hero font, and it is used as the primary graphic device throughout (Bold/Quiet/Confident, WE SEE HEAR TOUCH FEEL).
- Color (10%): 58 — Palette is a disciplined monochrome system (near-white #F2F0F0/#F0F0F0, near-black #0F0F0F/#000000) with controlled low-alpha variants for secondary text, which is appropriate restraint for the architectural idiom. However the imagery sections introduce warm brown/beige interior renders that sit outside the stated palette without a clear bridging logic, and the system itself is a well-executed but conventional black/white/grey scheme rather than a distinctive invention.
- Layout (20%): 66 — The hairline-grid, full-bleed, viewport-paced sectioning is consistently applied from hero through gallery through process accordion, with visible column guides and alignment that mirrors architectural drafting conventions. This is a coherent system across many sections, which supports a 'good' rating, but the density is so sparse and repetitive (large word, paragraph, hairline divider, repeat) that it risks feeling like a template applied section after section rather than varied compositional problem-solving.
- Motion (20%): 68 — The scroll-driven sequence (hero scale-to-dark, 3D floating typographic words, grid-zoom reveal into renderings, texture-shifting adjective section, exploded 3D architectural panel, and full reverse-playback) is ambitious and narratively building, going well beyond a single scroll parallax trick. It demonstrates a considered, bidirectional cinematic sequence tied to content meaning. However, no evidence of smoothness, frame timing, or responsiveness to varied scroll speed is available, and the reliance on long, heavy scroll-jacked sequences carries real usability risk that can't be verified as well-executed.
- Originality (25%): 62 — The core devices (massive negative-tracked type scaling, grid-to-image zoom reveal, exploded 3D component view) are recognizable from a lineage of award-circuit architecture/agency sites, so individual moves are not new. What elevates it is the specific combination: a hairline architectural grid literally used as a lens/window device, and the use of giant adjective-words (Bold/Quiet/Confident) functioning as both brand voice and kinetic graphic anchor repeated with reverse-scroll symmetry. This is a thoughtful synthesis rather than a landmark invention.
- Content (10%): 64 — Typography, imagery, and motion are tightly bound to the architectural subject matter: the exploded panel visualizes construction detail, the grid-zoom frames renderings as if looking through a structural opening, and copy like 'Engineering as Foundation' and 'Detail as Discipline' pairs directly with supporting diagrammatic line art. The system reads as purpose-built for an architecture studio rather than generic tech-agency dressing, though the renders themselves are somewhat generic luxury-interior stock-style imagery that dilutes the bespoke feel established by the typographic/motion system.

Coverage: 100% 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
- [ ] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

Curator review pending.

## 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.