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

# Aker · Design System

> Urban investment, framed with quiet confidence

**Theme:** light · **Industry:** real-estate · **Source:** https://www.akercompanies.com/ · **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._

Aker presents its community-focused investment work through a restrained editorial layout and a striking dark opening. Generous white space, fine rules, oversized typography, and image-led project cards carry the story from investment focus to team and contact.

## North star

Let expansive white space and restrained type frame vivid, place-based imagery rather than compete with it.

## Overview

The page uses a clear alternation between white editorial sections and dark, media-led bands. Black and near-black establish the opening and investment-map section, while white canvas gives headings, explanatory copy, and metrics room to breathe. Forest green and deep blue appear as distinctive project surfaces; the burnt orange is a selective highlight within project work rather than a dominant page-wide accent. Proxima Nova carries the interface in light, large headings and practical, regular-weight body text; Lora is a minor secondary voice. The layout favors broad content regions, strong left alignment, and image cards with subtly rounded corners. Thin pale-gray rules divide lists and content rows without adding visual weight. Photography ranges from architecture and landscapes to people and project imagery, while illustrated project panels use restrained geometric marks. The overall effect is calm, spacious, and grounded in place.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary canvas for editorial content, lists, metrics, and the footer. |
| Pure Ink | `#000000` | `--color-pure-ink` | neutral | Main text and links; also the near-black appearance of the hero media band. |
| Charcoal Slate | `#1c1c1c` | `--color-charcoal-slate` | surface | Dark inverse surface for content and image-overlay areas. |
| Soft Divider | `#e5e4e4` | `--color-soft-divider` | neutral | Fine horizontal rules and subtle card or section boundaries. |
| Quiet Gray | `#666666` | `--color-quiet-gray` | neutral | Muted supporting copy, captions, and secondary link text. |
| Deep Night | `#070707` | `--color-deep-night` | surface | Dark investment-map section background. |
| Forest Field | `#193f32` | `--color-forest-field` | brand | Project-card surface and recurring identity color, including the Aker AI tile. |
| Mockup Gray | `#7f7f7f` | `--color-mockup-gray` | semantic | Measured card color likely tied to media or mockup areas, not a core brand surface. |
| Harbor Slate | `#38464a` | `--color-harbor-slate` | surface | Occasional dark-toned surface within supporting media or project content. |
| Mid Gray | `#8d8d8d` | `--color-mid-gray` | semantic | Minor text or button detail; not a defining page color. |
| Pale Gray | `#d2d1d1` | `--color-pale-gray` | semantic | Small button or media detail, not a prominent interface color. |
| Kiln Orange | `#b75928` | `--color-kiln-orange` | accent | Selective project and link accent, notably the Collective project artwork. |
| Deep Teal | `#002934` | `--color-deep-teal` | surface | Dark blue-green project artwork and occasional link-related media detail. |
| Graphite | `#262626` | `--color-graphite` | surface | Subtle dark card detail within the broader black-and-white composition. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#1c1c1c` (Charcoal Slate) · `--color-surface-2` → `#070707` (Deep Night) · `--color-surface-3` → `#193f32` (Forest Field) · `--color-surface-4` → `#38464a` (Harbor Slate) · `--color-text` → `#000000` (Pure Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#666666` (Quiet Gray) · `--color-border` → `#e5e4e4` (Soft Divider) · `--color-accent` → `#b75928` (Kiln Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#1c1c1c` | 1.23:1 | fail |
| `#000000` | `#070707` | 1.04:1 | fail |
| `#000000` | `#193f32` | 1.8:1 | fail |
| `#ffffff` | `#1c1c1c` | 17.04:1 | AAA |
| `#ffffff` | `#070707` | 20.14:1 | AAA |
| `#ffffff` | `#193f32` | 11.68:1 | AAA |
| `#666666` | `#ffffff` | 5.74:1 | AA |
| `#666666` | `#1c1c1c` | 2.97:1 | fail |
| `#666666` | `#070707` | 3.51:1 | AA-large |

### Gradients

- `linear-gradient(rgb(0, 0, 0), rgba(0, 0, 0, 0))`
- `linear-gradient(90deg, rgba(191, 191, 191, 0.5), rgba(0, 0, 0, 0.05))`
- `linear-gradient(90deg, rgba(28, 28, 28, 0.5), rgba(0, 0, 0, 0.5))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Proxima Nova | `--font-body` | webfont | 400, 500, 300, 600 | Primary headings, body copy, navigation, labels, and links. | Montserrat |
| Lora | `--font-lora` | webfont | 400 | Minor secondary typographic voice; not prominent in the visible page. | Lora |

- **Proxima Nova:** Light-weight oversized headings contrast with regular body copy; generally sentence case and unembellished.
- **Lora:** Measured at regular weight with low usage; reserve for occasional editorial contrast.

### Type scale — Golden Ratio (ratio ≈ 1.6, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 168px | 300 | 1 | 0 | — | Proxima Nova | Oversized hero wordmark or high-impact display lettering. |
| h1 | 80px | 300 | 0.8 | 0 | — | Proxima Nova | Primary hero or major page statement. |
| h2 | 62px | 300 | 0.95 | -0.025em | — | Proxima Nova | Large section headings such as What we do and Our work. |
| h3 | 36px | 400 | 1.1 | -0.02em | — | Proxima Nova | Subsection headings and prominent project titles. |
| h4 | 30px | 400 | 1.2 | -0.02em | — | Proxima Nova | Smaller section or card headings. |
| body | 16px | 400 | 1.3 | 0 | — | Proxima Nova | Paragraphs, descriptions, navigation, and standard links. |
| caption | 14.5px | 400 | 1.5 | 0 | — | Proxima Nova | Compact labels, metadata, and image captions. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 13, 14, 16, 22, 24, 32, 48, 64 px.
- Section rhythm 64px · element gap 16px · card padding — · max content width 1396px.

Build a broad, centered composition with a measured maximum content width of 1396px. The page moves between a dark full-width opening, white editorial sections, another dark investment band, and white project and metrics areas. Align headings and copy to the left, using image cards and content rows to create varied, asymmetrical groupings. Section spacing is generous, with comfortable separation between elements. Fine horizontal rules organize lists and repeated content; avoid dense grids or tightly packed blocks.

## Shape & elevation

- Radius: button `9999px` · card `3px` · media `8px` · link `8px` · xs `3px` · sm `4px` · md `8px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.35s cubic-bezier(0.165, 0.84, 0.44, 1)` on interactive elements.

The interface is predominantly flat: no measured shadows define its components. Pale-gray hairlines separate lists and content groups, while images and solid-color panels provide depth through contrast rather than elevation. Keep layering restrained, using dark gradients or overlays only where text must sit over media.

## Imagery

Use atmospheric, place-based photography of architecture, landscapes, interiors, and people. Give major images broad, clean frames, with gently rounded corners on media cards. Project showcase panels can use simple geometric line illustrations on solid green, blue-green, or orange surfaces. The opening is cinematic and dark, with imagery integrated into the hero rather than presented as a conventional bright banner.

## Components

### Hero and navigation

A dark, media-led opening pairs the Aker wordmark and brief positioning copy with compact top-right menu controls and project tiles.

### Editorial introduction

A short left-aligned paragraph sits alone on white with substantial surrounding whitespace.

### What we do list

Three numbered investment, creation, and operations rows use pale rules and supporting project imagery.

### Project cards

Large media panels use restrained rounded corners, geometric artwork or photography, and concise titles and descriptions.

### Investment map

A near-black full-width section presents the investment heading and a map graphic with subdued labels.

### Metric display

Large, light-weight figures are arranged with ample whitespace and an intentionally staggered alignment.

### Contact cards

Two broad closing cards pair investment or collaboration prompts with a light neutral surface or landscape photography.

### Measured component styles

- **Primary button** (“Contact us”): transparent background · text #000000 · radius 160px · padding 19.2px 22.4px · 400 16px Proxima Nova
- **Link** (“The Fundamentals Re-imagining residentia”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Proxima Nova
- **Card** (“Locations We’re on the path to bring the”): background #7f7f7f · text #000000 · radius 8px · padding 0px · 400 16px Proxima Nova

## Do

- Use white editorial space to create contrast with dark feature bands.
- Keep major headings light in weight and visually prominent.
- Use fine pale-gray rules to structure repeated rows.
- Choose place-specific architecture, landscape, and community photography.
- Reserve forest green, deep teal, and orange for project surfaces and selective accents.
- Give metrics and project imagery generous breathing room.

## Don't

- Do not make the entire page uniformly dark or uniformly colorful.
- Do not introduce bright gradients as a dominant brand treatment.
- Do not crowd the page with dense copy or compact card grids.
- Do not add heavy shadows or thick borders to otherwise flat components.
- Do not use orange as a page-wide CTA color.
- Do not center every heading and content block.

## Agent prompt

Create a new Aker-style investment company page with a calm editorial rhythm. Use Gallery White (#ffffff) as the main canvas, Pure Ink (#000000) for text, and Charcoal Slate (#1c1c1c) or Deep Night (#070707) for selective dark bands. Apply Forest Field (#193f32), Deep Teal (#002934), and Kiln Orange (#b75928) mainly to project imagery and restrained accents. Set headings in a light Proxima Nova–like sans serif and body copy in a clear regular sans serif. Use a wide content region, left-aligned editorial blocks, generous whitespace, fine Soft Divider (#e5e4e4) rules, broad photographic cards, and spacious metric layouts. Favor architecture, landscape, and community imagery; keep surfaces flat, corners subtly rounded, and decoration minimal.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | A long, single-column sequence of alternating dark media bands and spacious white editorial sections. | scroll-led narrative, project links, contact prompts | dark hero, white content canvas, hairline dividers, image cards |

## Source CSS custom properties (selected)

```css
--background-colors--dark: #1c1c1c;
--text-size--h1: 5.375rem;
--text-size--h3: 2.25rem;
--text-size--h4: 1.875rem;
--text-size--h5: 1.425rem;
--colors--orange: #b75928;
--text-colors--grey: #666;
--global-spacer--normal: 1.375rem;
--text-colors--text-light: white;
--text-size--regular: 1rem;
--text-size--h2: 3.875rem;
--background-colors--light: white;
--text-size--medium: 1.125rem;
--colors--white: white;
--colors--black: black;
--colors--primary-dark: #1c1c1c;
--colors--grey-100: #e5e4e4;
--colors--grey-200: #bfbfbf;
--font-family--secondary: Lora, sans-serif;
--colors--green: #193f32;
--colors--blue: #002934;
--colors--sand: #3f3a32;
--colors--blue-light: #044152;
--text-colors--text-dark: #1c1c1c;
--colors--sand-light: #625744;
--colors--grey-300: #666;
--colors--grey-50: #f9f8f8;
--global-spacer--small: 0px;
--button-colors--orange: #e3811852;
--button-colors--black: #1c1c1c80;
--button-colors--grey: #bfbfbf80;
--colors--grey-400: #8d8d8d;
--font-family--primary: "Proxima Nova", sans-serif;
--global-spacer--large: 0px;
```

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