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

# FORA · Design System

> A considered grid of ideas, people, and stories.

**Theme:** light · **Industry:** agency · **Source:** https://www.fora-concept.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._

FORA presents its strategy and communication agency through a quiet, modular homepage that pairs oversized identity typography with vivid editorial tiles. Warm rust and lilac blocks balance white space, portraits, and project imagery.

## North star

Treat the homepage as a disciplined editorial grid: let whitespace, oversized identity, and a few confident color panels carry the story.

## Overview

The page is built as a calm editorial mosaic rather than a conventional hero followed by stacked sections. White is the primary canvas, giving the black FORA wordmark and sparse headings room to command attention. A rust-colored statement tile and a lilac news tile provide the strongest brand color moments; neither is treated like a conventional button. The single measured sans-serif, Theinhardt, carries navigation and supporting copy with light, regular-weight clarity, while the oversized serif-like wordmark is a distinctive graphic identity element. Short uppercase display phrases and small, restrained labels establish contrast without relying on decorative effects. Image tiles introduce human and project context, including a portrait against blue and still-life glassware. The composition favors broad, aligned rectangular panels, crisp transitions, and generous breathing room. Keep the treatment flat and direct: color, type, and image placement do the work.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Editorial Ink | `#000000` | `--color-editorial-ink` | neutral | Wordmark, headings, navigation, labels, and link text across the white and colored panels. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas and open panels surrounding the identity, display text, and persistent footer navigation. |
| Fora Rust | `#a9553c` | `--color-fora-rust` | brand | Large identity statement tile, giving the otherwise restrained grid its warmest brand color. |
| News Lilac | `#ddbdea` | `--color-news-lilac` | accent | Newsfeed tile background, distinguishing editorial content from the rust statement panel. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#a9553c` (Fora Rust) · `--color-surface-2` → `#ddbdea` (News Lilac) · `--color-text` → `#000000` (Editorial Ink) · `--color-accent` → `#a9553c` (Fora Rust) · `--color-accent-2` → `#ddbdea` (News Lilac)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#a9553c` | 4.05:1 | AA-large |
| `#000000` | `#ddbdea` | 12.54:1 | AAA |
| `#a9553c` | `#ffffff` | 5.18:1 | AA |
| `#a9553c` | `#ddbdea` | 3.1:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Theinhardt | `--font-body` | webfont | 400 | Primary typeface for navigation, body copy, headings, and text links. | Inter |

- **Theinhardt:** Regular weight throughout; display headings use uppercase selectively, while body and navigation retain subtle positive tracking.

### Type scale — Perfect Fifth (ratio ≈ 1.528, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 35px | 400 | 1.17 | 0.01em | uppercase | Theinhardt | Oversized uppercase display statement and prominent brand messaging. |
| h2 | 23px | 400 | 1.3 | 0.016em | — | Theinhardt | Section and tile headings, including the primary agency statement. |
| body | 15px | 400 | 1.33 | 0.024em | — | Theinhardt | News excerpts, supporting descriptions, and small editorial copy. |
| button | 15px | 400 | 1.33 | 0 | — | Theinhardt | Compact text actions such as team links and learn-more prompts. |
| nav | 15px | 400 | 1.33 | 0.024em | — | Theinhardt | Header identity/navigation and the persistent bottom navigation. |

## Spacing & layout

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

Use a broad, page-filling modular grid with panels aligned edge to edge and a four-column underlying structure. The measured maximum content width is 1390px. At the first viewport, the identity, statement, and typographic display occupy the upper band; portrait, news, and project imagery form a lower band. Keep text aligned to panel starts, with generous panel breathing room and a comfortable rather than dense rhythm. A slim footer line anchors navigation below the mosaic.

## Shape & elevation

- Radius: button `5px` · xs `5px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s ease` on interactive elements.

The page reads as flat, with no measured shadows or gradients. Panels meet through crisp rectangular edges rather than cards floating above a background. Avoid adding decorative borders; rely on the grid, white space, and strong changes between white, rust, and lilac surfaces to define hierarchy. Buttons remain text-led and understated.

## Imagery

Use editorial photography as content tiles, not as a full-bleed background behind copy. The visible portrait is naturally framed against a blue setting; the project still life uses soft, warm light and a quiet tabletop composition. Preserve the photographs' own colors as image content, while keeping the surrounding interface palette restrained. Small news artwork may sit beside concise text.

## Components

### Brand panel

Large white grid cell with the FORA wordmark, treated as an oversized graphic rather than ordinary navigation text.

### Statement tile

Rust panel with a small introductory label, a concise agency statement, and a text-based learn-more link.

### Display phrase panel

White typographic cell with widely separated uppercase phrase fragments and small service/location labels near its lower edge.

### Portrait tile

Editorial team image with a compact, lightly surfaced team link positioned near the upper edge.

### News tile

Lilac content panel pairing a small article image with a short title and a simple underlined read-more link.

### Project tile

Large project photograph with a compact project label near the top, keeping the image itself as the main focus.

### Footer navigation

Slim white strip with the agency descriptor, social link, and compact About, Team, Work, and Contact links.

### Measured component styles

- **Primary button** (“Erfahren Sie mehr”): transparent background · text #000000 · radius 0px · padding 0px · 400 15px Theinhardt
- **Link** (“Wer wir sind Doing it FOR A reason. Erfa”): background #a9553c · text #000000 · radius 0px · padding 30px 25px 25px 25px · 400 18px Theinhardt
- **Navigation item** (“Fora Strategy and Communication”): transparent background · text #000000 · radius 0px · padding 0px · 400 15px Theinhardt

## Do

- Build the page from aligned rectangular panels.
- Reserve #a9553c for a prominent statement surface.
- Use #ddbdea for a distinct editorial or news tile.
- Keep interface text black on white and colored panels.
- Use concise labels and short text actions.
- Let photography occupy its own grid cells.

## Don't

- Do not add gradients or drop shadows.
- Do not turn every panel into a rounded card.
- Do not use imagery as a busy text background.
- Do not add unmeasured interface colors.
- Do not crowd the grid with extra decoration.
- Do not make links look like heavy primary buttons.

## Agent prompt

Create a new FORA-style agency page as a restrained editorial mosaic, not a conventional stacked marketing template. Use #ffffff as the open canvas and #000000 for all primary interface text. Organize content in aligned rectangular grid panels with generous breathing room: reserve #a9553c for a confident statement block and #ddbdea for a news or editorial feature. Use Theinhardt, or a close sans-serif substitute, in regular weight with understated tracking; pair concise labels and navigation with large, selective uppercase display copy. Give team portraits and project photography their own tiles, preserving their natural image colors. Keep links text-led, surfaces flat, and panel edges crisp. Include a slim footer navigation. Avoid shadows, gradients, decorative borders, excessive rounding, and extra colors not present in the measured palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Page-filling modular grid combining identity, statement, display type, portrait, news, and project imagery above a slim footer. | Direct navigation, Text-based learn-more links, Team and project shortcuts | Rust and lilac panels, Oversized wordmark, Editorial image tiles, Persistent bottom navigation |

## Source CSS custom properties (selected)

```css
--fontsize-1: 5.4rem;
--fontsize-2: 3.5rem;
--fontsize-3: 2.8rem;
--fontsize-4: 2.3rem;
--fontsize-5: 2rem;
--fontsize-6: 1.9rem;
--fontsize-7: 1.8rem;
--fontsize-8: 1.5rem;
```

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