---
title: "Aspelin Reitan design system"
variant: extended
source: https://www.aspelinreitan.no/
captured_at: 2026-10-12
theme: light
industry: real-estate
generator: Design DNA (https://four.wiralomi.com/style/aspelineiendom-no)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Aspelin Reitan · Design System

> Warm architectural stories, told with restraint

**Theme:** light · **Industry:** real-estate · **Source:** https://www.aspelinreitan.no/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Aspelin Reitan’s homepage pairs warm ivory and deep brown sections with expansive architectural photography. Restrained typography and an asymmetric editorial layout make property, people, and city life the focus.

## North star

Let warm, expansive architectural photography lead, and keep the interface quiet, spacious, and sharply contrasted against cream and deep brown.

## Overview

The visual identity is built around a warm, restrained contrast: Gallery Cream (#fff8e9) forms the main reading canvas, while deep Espresso (#2f2116) anchors immersive media bands and the footer. Photography often supplies its own earthy browns and changing seasonal colours; those image tones are content, not extra interface colours. ModernEra is used throughout in regular weights, with clean, unforced line breaks and no conspicuous tracking or all-caps treatment. The page alternates full-bleed video or imagery with quiet cream sections containing loosely balanced, asymmetric photo pairs and editorial content. Generous open space makes each project image feel considered rather than packed into a conventional card grid. Pale Peach (#ffebd0) carries text and outlined controls on dark imagery; muted Gold (#fee197) is reserved for navigation and fine interface accents. Hairlines and outlined controls stay subtle, while the photography supplies depth and atmosphere.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Cream | `#fff8e9` | `--color-gallery-cream` | brand | Primary canvas for project features, article feed, contact block, and other light editorial sections. |
| Deep Espresso | `#2f2116` | `--color-deep-espresso` | surface | Dark surface for immersive media bands and the footer; provides the site’s strongest contrast. |
| Pale Peach | `#ffebd0` | `--color-pale-peach` | neutral | Light text on dark media and footer surfaces, including outlined portfolio controls. |
| Muted Gold | `#fee197` | `--color-muted-gold` | accent | Navigation text and delicate accent or border treatment on dark sections and controls. |
| True Black | `#000000` | `--color-true-black` | neutral | Dark text and outlines on cream sections, including project links and the contact button. |
| Oxblood Accent | `#8f534e` | `--color-oxblood-accent` | accent | Sparse secondary text accent; not a dominant surface colour in the page composition. |
| Weathered Oak | `#987f61` | `--color-weathered-oak` | semantic | Minor muted text in navigation, headings, or footer; use sparingly beneath the core palette. |

### Semantic aliases

`--color-canvas` → `#fff8e9` (Gallery Cream) · `--color-surface` → `#2f2116` (Deep Espresso) · `--color-text` → `#000000` (True Black) · `--color-text-muted` → `#ffebd0` (Pale Peach) · `--color-text-subtle` → `#fff8e9` (Gallery Cream) · `--color-border` → `#fee197` (Muted Gold) · `--color-accent` → `#fee197` (Muted Gold) · `--color-accent-2` → `#8f534e` (Oxblood Accent)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fff8e9` | 19.86:1 | AAA |
| `#000000` | `#2f2116` | 1.35:1 | fail |
| `#ffebd0` | `#fff8e9` | 1.1:1 | fail |
| `#ffebd0` | `#2f2116` | 13.37:1 | AAA |
| `#fff8e9` | `#2f2116` | 14.71:1 | AAA |
| `#fee197` | `#fff8e9` | 1.21:1 | fail |
| `#fee197` | `#2f2116` | 12.17:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ModernEra | `--font-body` | webfont | 400, 500 | Site-wide typeface for navigation, headings, body copy, captions, and controls. | Manrope |

- **ModernEra:** Use regular weight for most text and medium for menu controls; natural casing, no notable tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.305, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 400 | 1.2 | 0 | — | ModernEra | Lead statement over full-bleed hero imagery. |
| h2 | 28px | 400 | 1.29 | 0 | — | ModernEra | Section titles and prominent editorial headings. |
| h3 | 24px | 400 | 1.17 | 0 | — | ModernEra | Secondary story and content headings. |
| body | 18px | 400 | 1.22 | 0 | — | ModernEra | Project descriptions, statements, and general editorial copy. |
| caption | 16px | 400 | 1.25 | 0 | — | ModernEra | Project labels, metadata, and compact supporting text. |
| button | 18px | 500 | 1.22 | 0 | — | ModernEra | Outlined portfolio and contact controls. |
| nav | 28px | 400 | 1.29 | 0 | — | ModernEra | Prominent menu and navigation labels. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 8, 11, 12, 16, 18, 20, 24, 25, 40, 45, 50, 55, 60, 64, 100, 120 px.
- Section rhythm 40px · element gap 20px · card padding — · max content width 1360px.

The desktop layout uses a measured 1360px maximum content width, with broad margins and a comfortable density. Full-bleed media sections alternate with cream content bands. Project features use two columns with visibly asymmetric image sizes and alignment rather than a uniform card grid. Editorial content also sits in an open two-column arrangement. The section rhythm is spacious and varied, with measured gaps of 40px between sections and 20px between elements. Keep text aligned to the start and let images occupy generous, uninterrupted areas.

## Shape & elevation

- Radius: button `8px` · xs `8px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat: no measured shadows or gradients. Separate content through alternating cream and deep-brown section backgrounds, image edges, and generous whitespace. Controls use fine outlined borders rather than filled buttons; the measured button radius is 8px, while navigation and text links remain unboxed.

## Imagery

Use real architectural, urban, and people photography as the primary visual material, with video-like full-bleed hero and story panels. Images are large, naturalistic, and often warm-toned, showing buildings, public spaces, interiors, and human activity. Preserve the original photo colour and use a restrained dark overlay where light text must remain legible. Supporting project images vary in size and crop within paired layouts; there are no illustrative or 3D-led motifs.

## Components

### Overlay header

Place the logo at the left of the hero, an outlined Portefølje control near the center, and a simple Meny label at the right; light text sits over photography.

### Portfolio outline button

Use pale text and a 1px #ffebd0 outline on dark media, with an 8px radius and measured 18px ModernEra text.

### Project image pair

Arrange two photographs asymmetrically in a cream feature band; one image is substantially larger, with a compact project label beneath.

### Full-bleed story panel

Use a broad photographic or video surface on #2f2116, overlaying restrained pale text and a small category label.

### Editorial content feed

Show article imagery, titles, and dates in a roomy two-column arrangement on #fff8e9, with text kept visually secondary to the photos.

### Contact button

Set black text and a 1px black outline on the cream surface, using the measured 8px radius and 18px type.

### Dark footer

Group company details, portfolio links, legal links, and social links into open columns over the deep-brown surface.

### Measured component styles

- **Primary button** (“Portefølje”): transparent background · text #ffebd0 · border 1px solid #ffebd0 · radius 8px · padding 9px 18px 7px 18px · 400 18px ModernEra
- **Link** (“Campus Ullevål, Eiendommer”): transparent background · text #000000 · radius 0px · padding 0px · 400 20px ModernEra
- **Input**: transparent background · text #fee197 · radius 0px · padding 16px 80px 16px 0px · 400 18px ModernEra
- **Navigation item** (“Aktuelt Om oss Kontakt oss”): transparent background · text #fee197 · radius 0px · padding 0px · 400 28px ModernEra

## Do

- Alternate cream sections with deep-brown media bands.
- Let architectural photography dominate the composition.
- Use asymmetric image pairs instead of uniform card grids.
- Keep text aligned to the start and give it room to breathe.
- Use pale peach text on dark surfaces and black text on cream.
- Keep controls outlined and visually restrained.

## Don't

- Do not add gradients or decorative shadows.
- Do not introduce saturated interface colours beyond the measured palette.
- Do not put every image inside a uniform bordered card.
- Do not use heavy, condensed, or all-caps typography.
- Do not let captions compete with the primary imagery.
- Do not treat colours visible only in photographs as UI tokens.

## Agent prompt

Build a new page in Aspelin Reitan’s restrained, editorial real-estate style. Use Gallery Cream (#fff8e9) for the main content canvas and Deep Espresso (#2f2116) for dark footer or immersive media sections. Treat architectural photography as the hero: large, natural images with minimal interface chrome and carefully legible overlays. Use ModernEra throughout, or a close sans-serif substitute, with regular-weight text and natural casing. Organize project content in spacious, asymmetric two-column image pairs rather than boxed cards. Use Pale Peach (#ffebd0) for text and outlines on dark areas, Muted Gold (#fee197) for limited navigation accents, and black (#000000) for text and outlines on cream. Keep controls outlined, sections generously spaced, and the overall page flat, calm, and image-led.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed media occupies the viewport, with an overlay header and a lower-left statement. | Overlay navigation, Brand statement | Full-bleed photography, Outlined portfolio control, Light overlay text |
| 2 | feature-split | Cream section with two unequal image columns and a project label beneath the larger image. | Project discovery, Image-led linking | Asymmetric photo pair, Cream canvas, Project caption |
| 3 | video | Full-width dark media band with text placed over the image. | Story discovery | Full-bleed media, Overlay title, Small category label |
| 4 | content-feed | Cream editorial area with article cards arranged across two open columns. | Browse articles, Read dates and titles | Editorial photography, Open two-column layout, Text captions |
| 5 | feature-split | Cream two-column project feature with a small image and a larger cityscape. | Project discovery, Image-led linking | Asymmetric photo pair, Caption, Open spacing |
| 6 | video | Full-bleed dark-backed media with overlay copy and a small topic label. | Brand storytelling | Immersive photography, Overlay copy |
| 7 | feature-split | Cream section with two unequal images and a caption under the larger photograph. | Property discovery, Image-led linking | Asymmetric photo pair, Project caption |
| 8 | video | Full-bleed dark media band with a story title and category label over the image. | Story discovery | Full-bleed photography, Overlay text |
| 9 | contact | Cream two-column contact area mixing two photos with a short invitation and outlined button. | Contact invitation, Direct contact action | Asymmetric photography, Outlined contact button, Short copy |
| 10 | footer | Deep-brown footer with company information, navigation groups, legal links, and social links. | Company navigation, Social and legal links | Dark surface, Multi-column link groups, Brand mark |
| 11 | footer | Continuation of the deep-brown footer with oversized decorative brand lettering. | Brand reinforcement | Dark background, Oversized wordmark |

## Source CSS custom properties (selected)

```css
--color-inherit: inherit;
--color-transparent: #0000;
--color-current: currentColor;
--color-theme-fg: currentColor;
--color-black: #000;
--color-white: #fff;
--color-red: #ff4d4d;
--color-orange: #f59b5e;
--color-orange-signal: #ff9b4d;
--color-yellow: #fee197;
--color-yellow-signal: #ffdc62;
--color-yellow-accent: #f2d487;
--color-green: #a3a46e;
--color-green-dark: #334838;
--color-green-accent: #949561;
--color-terracotta: #dc8a80;
--color-terracotta-dark: #8f534e;
--color-terracotta-accent: #ca7970;
--color-bb-1: #fff8e9;
--color-bb-2: #ffebd0;
--color-bb-3: #e8d1ad;
--color-bb-4: #cbab85;
--color-bb-5: #987f61;
--color-bb-6: #4f3622;
--color-bb-7: #2f2116;
--theme-fg: #000;
--theme-bg: #fff8e9;
--theme-accent: #ffebd0;
--theme-accent-2: #8f534e;
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/aspelineiendom-no