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

# Anna Jóna · Design System

> A warm, rose-tinted tribute told through place and memory.

**Theme:** light · **Industry:** food-beverage · **Source:** https://www.annajona.is/ · **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 long-form tribute page for Anna Jóna, pairing a closure announcement and personal letter with an expansive visual record of the restaurant. Soft pink fields, vivid rose-red typography, and warm interior photography give the story an intimate editorial feel.

## North star

Let a restrained blush-and-rose palette and expressive Sansita typography frame spacious, image-led storytelling.

## Overview

The page is built around a measured rose-red and blush pairing: #db404f carries nearly all visible type and also appears as a bold full-width section band, while #fce1e3 is the recurring canvas. The first viewport uses a paler blush image field, then hands attention to full-bleed restaurant video and photography. Sansita Bold gives even long personal copy a distinctive, dense display character; oversized headlines and smaller passages retain the same expressive voice rather than switching to a neutral interface font. The layout is a single-column, long-scroll story, punctuated by wide media, an intimate text letter, a room image, a red design statement, image collages, and a testimonial. Rounded image corners soften the architectural photography, while broad blush margins let each composition breathe. White is a sparse type colour on red, not a general canvas. Keep the experience flat and editorial: the visual hierarchy comes from colour fields, scale, imagery, and generous intervals rather than borders or shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Rose Signal | `#db404f` | `--color-rose-signal` | brand | Primary display and body text on blush; also the saturated full-width design-story section background. |
| Blush Canvas | `#fce1e3` | `--color-blush-canvas` | surface | Dominant page canvas and the recurring background for letter, gallery, and testimonial sections. |
| Soft White | `#ffffff` | `--color-soft-white` | neutral | Occasional headline or statement text over the rose-red section; not a general page surface. |

### Semantic aliases

`--color-canvas` → `#fce1e3` (Blush Canvas) · `--color-text` → `#db404f` (Rose Signal) · `--color-text-muted` → `#ffffff` (Soft White) · `--color-accent` → `#db404f` (Rose Signal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#db404f` | `#fce1e3` | 3.5:1 | AA-large |
| `#ffffff` | `#fce1e3` | 1.23:1 | fail |
| `#db404f` | `#fce1e3` | 3.5:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Sansita | `--font-body` | webfont | 700 | All measured display, heading, body, caption, and link text. | Bree Serif |

- **Sansita:** Bold throughout, with tight negative tracking; use expressive mixed-case text and avoid a neutral sans-serif body style.

### Type scale — Perfect Fourth (ratio ≈ 1.348, base 38.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 70px | 700 | 1.06 | -0.02em | — | Sansita | Large statement headings, including the closure announcement. |
| h1 | 49px | 700 | 1.11 | -0.02em | — | Sansita | Primary section headings and prominent story titles. |
| body | 38.5px | 700 | 1.14 | -0.02em | — | Sansita | Personal letter and supporting editorial copy. |
| caption | 28.5px | 700 | 1.17 | -0.02em | — | Sansita | Small labels, attributions, and supporting image text. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 11, 36, 48, 95, 115, 144, 173 px.
- Section rhythm 48px · element gap 11px · card padding — · max content width —.

A single-column, long-scroll composition with no measured page maximum width. The opening announcement aligns a large headline to the left and a short supporting paragraph alongside it; later story copy sits in a narrower reading measure. Full-bleed video and large restaurant images interrupt the text, followed by a red statement band, image collages, and testimonial. The measured spacing rhythm ranges from compact element gaps to broad section intervals, creating a comfortable rather than crowded density.

## Shape & elevation

- Radius: xs `90px`
- No box shadows measured: the page is flat.

The interface is predominantly flat, with no measured shadows or gradients and no visible card-border system. Separation comes from large background colour bands, open spacing, and image placement. Rounded media edges create the main sense of softness and layering; avoid adding decorative elevation that competes with the photography.

## Imagery

Restaurant interiors are the central visual material: warm, softly lit architectural scenes, bar details, seating areas, and exterior views. A full-bleed video introduces the story; subsequent wide photographs and multi-image collages provide a visual tour. Images retain their natural warm wood and muted pink tones, framed by blush backgrounds and softened with large rounded corners. The photograph's brown and peach hues belong to the pictured restaurant, not the interface palette.

## Components

### Closure announcement

Blush opening field with a prominent rose-red closure headline, short supporting tribute, and small brand mark.

### Full-bleed video

Wide restaurant footage breaks through the opening field and leads into the personal story.

### Personal letter

Narrow, single-column editorial copy on blush, set in the same bold Sansita voice as the headings.

### Design statement band

Rose-red section pairs a small label with a concise white statement about the restaurant's design.

### Interior gallery

Large rounded restaurant images and multi-image collages presented directly against the blush canvas.

### Guest testimonial

Centered, rose-red quotation on a spacious blush field with a smaller attribution beneath.

### Measured component styles

- **Link** (“Halli”): transparent background · text #000000 · radius 0px · padding 0px · 700 38.736px Sansita

## Do

- Use #fce1e3 as the dominant storytelling canvas.
- Set primary text in #db404f.
- Use Sansita Bold for expressive display and reading text.
- Alternate long-form copy with full-bleed or wide restaurant imagery.
- Keep image framing soft with large rounded corners.
- Reserve #ffffff for text placed over rose-red fields.

## Don't

- Do not introduce unmeasured interface colours.
- Do not use shadows or borders to manufacture hierarchy.
- Do not crowd the long-form story with dense card layouts.
- Do not replace the expressive type voice with generic sans-serif styling.
- Do not treat photographic browns and pinks as interface tokens.
- Do not make every section a saturated red band.

## Agent prompt

Build a new long-scroll editorial page in the Anna Jóna visual style. Use Blush Canvas (#fce1e3) for the dominant page surface and Rose Signal (#db404f) for expressive text and occasional full-width statement bands; reserve Soft White (#ffffff) for text on those red bands. Use bold Sansita, or a close free substitute, with tight tracking across headings and editorial copy. Structure the page as a single-column story: a clear opening statement, short supporting copy, spacious reading passages, and large restaurant or venue imagery between sections. Let media span broadly, use softly rounded image corners, and keep surrounding space generous. Create hierarchy through scale, colour fields, and image placement rather than shadows, borders, or cards. Keep photography warm and natural, but do not turn its image colours into interface tokens.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Blush opening field with headline left and supporting text beside it. | Immediate announcement, Brief context | Rose-red display type, Small brand mark, Pale blush field |
| 2 | video | Wide full-bleed video crossing into the next story section. | Immersive venue preview | Full-bleed media, Soft curved section edge |
| 3 | other | Narrow editorial text column on blush, followed by a large interior image. | Long-form reading, Personal storytelling | Bold rose-red copy, Rounded restaurant image |
| 4 | gallery | Restaurant image followed by a rose-red statement band. | Visual storytelling, Design context | Rounded photography, Rose-red band, White statement text |
| 5 | other | Single-column red field pairing a small label with a prominent statement. | Emphasize design story | #db404f background, White display text |
| 6 | gallery | Long blush gallery with collages and broad interior photographs. | Explore the venue visually | Rounded image groups, Blush margins, Editorial quote |
| 7 | gallery | Full-width image on rose-red section, framed by blush surroundings. | Venue overview | Full-bleed photography, Curved lower edge |
| 8 | other | Blush field with a sweeping rose-red typographic line above images. | Highlight venue details | Oversized curved text, Blush canvas |
| 9 | gallery | Blush gallery section beginning with paired rounded photographs. | Continue image exploration | Side-by-side images, Rounded corners |

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