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

# mostlikely · Design System

> A quiet frame for bold architectural imagery.

**Theme:** light · **Industry:** design · **Source:** https://mostlikely.at/ · **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._

A restrained architecture and design homepage built around a white canvas, black typography, and oversized monochrome imagery. Its sparse navigation and expansive image treatment give the work the strongest visual presence.

## North star

Keep the interface nearly invisible so oversized architectural imagery and clear black-on-white navigation lead.

## Overview

The page uses a strict black-and-white palette: white carries nearly the entire canvas, while black defines navigation text, links, and fine rules. The large dark forms in the hero image create contrast and visual weight, but read as project imagery rather than additional brand colours. Rondelle, a clean sans-serif, appears in regular weight with no apparent tracking or uppercase treatment. Navigation labels are unusually prominent and distributed across a single horizontal row, while the rest of the page keeps interface ornament to a minimum. The image-led composition places generous white space around monumental, vertically cropped forms. A thin rule underlines the navigation, and a compact outlined down-arrow control sits at the far right. The overall strategy is quiet and editorial: use a simple typographic frame, clear alignment, and large-scale imagery rather than colour accents, cards, shadows, or decorative effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Architectural Ink | `#000000` | `--color-architectural-ink` | brand | Navigation, link text, and the thin rule beneath the header; also forms the dominant dark imagery. |
| Studio White | `#ffffff` | `--color-studio-white` | surface | Page canvas and the open space surrounding the image-led hero. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Studio White) · `--color-text` → `#000000` (Architectural Ink) · `--color-border` → `#000000` (Architectural Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Rondelle | `--font-body` | webfont | 400 | Navigation, page headings, body copy, and links | Jost |

- **Rondelle:** Regular weight throughout; sentence case, with no measured letter spacing or decorative casing.

### Type scale — Custom (ratio ≈ 2.143, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 30px | 400 | 1.4 | 0 | — | Rondelle | Page-level heading, if present; no heading is visible in the captured viewport. |
| body | 14px | 400 | 1.4 | 0 | — | Rondelle | Supporting studio and project copy. |
| nav | 30px | 400 | 1.4 | 0 | — | Rondelle | Large labels across the top navigation row. |
| link | 14px | 400 | 1.4 | 0 | — | Rondelle | Compact supporting links and text actions. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 5, 10, 20, 55, 70 px.
- Section rhythm 55px · element gap 10px · card padding — · max content width 1400px.

A single horizontal navigation row spans the page, with the studio name at left, discipline labels distributed across the row, and a small arrow control at right. A fine rule anchors the header. Below it, the hero is a sparse, image-led composition with two monumental forms and broad white margins. The measured page maximum width is 1400px; spacing follows a comfortable rhythm, with clear separation between elements rather than dense content blocks.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s ease-out` on interactive elements.

The interface is flat: no measured shadows, gradients, or card surfaces. Use the white canvas as the only page surface, and rely on a thin black navigation rule and the arrow control's fine outline for separation. Let image contrast and whitespace provide depth rather than layered UI.

## Imagery

The first viewport is dominated by two tall, rounded architectural forms rendered in near-black grain against white. Their speckled texture and scale make them feel like project imagery, not interface decoration or a palette extension. Keep images large, vertically cropped, and visually quiet around the edges; avoid adding captions or overlays unless the page content requires them.

## Components

### Top navigation

One row of black Rondelle labels on white, with the studio name and Architecture, Design, and Research distributed horizontally.

### Header rule

A fine black horizontal line sits directly beneath the navigation, separating it from the image area.

### Down-arrow control

A small outlined rectangular control at the far right of the header contains a simple downward arrow.

### Hero imagery

Oversized, vertically cropped, grain-textured dark architectural forms sit against the white canvas with substantial negative space.

### Measured component styles

- **Navigation item** (“Mostlikely Architecture Design Research ”): transparent background · text #000000 · radius 0px · padding 0px · 400 30px Rondelle

## Do

- Use only measured black and white for the interface palette.
- Keep navigation labels on one clear horizontal line.
- Use Rondelle regular or a restrained sans-serif substitute.
- Give hero imagery a monumental, image-led presence.
- Preserve generous white space around content.
- Use fine rules and outlines sparingly.

## Don't

- Do not introduce unmeasured accent colours.
- Do not add shadows, gradients, or elevated cards.
- Do not clutter the header with extra controls.
- Do not turn the imagery into small thumbnails.
- Do not use heavy, condensed, or uppercase typography.
- Do not mistake textured artwork for a UI colour treatment.

## Agent prompt

Build a new page in the mostlikely visual style: quiet, architectural, monochrome, and image-led. Use Studio White (#ffffff) as the canvas and Architectural Ink (#000000) for navigation, links, and fine rules. Set type in Rondelle regular, or a close restrained sans-serif substitute, with simple casing and no ornamental effects. Keep the header in one horizontal row, distribute the navigation labels clearly, and use a subtle underline rule; a small outlined arrow control may sit at the far edge when relevant. Give the main content generous whitespace and let large, carefully cropped architectural imagery carry the visual weight. Keep the interface flat: no cards, shadows, gradients, or invented accent colours. Match the measured comfortable rhythm, and make alignment and image scale do the work.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | A horizontal navigation row above a spacious, full-bleed image-led hero with two large dark forms. | Top-level discipline navigation, Down-arrow scroll cue | Thin header rule, Monochrome canvas, Oversized cropped imagery |

## Source CSS custom properties (selected)

```css
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
--wp--preset--shadow--crisp: 6px 6px 0px rgb(0, 0, 0);
--wc-primary: #7F54B3;
--wc-primary-text: white;
--wc-secondary: #e9e6ed;
--wc-secondary-text: #515151;
--wc-highligh-text: white;
--wc-content-bg: #fff;
--wc-subtext: #767676;
```

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