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

# Limón · Design System

> Fresh food, bright colour, easygoing clarity

**Theme:** light · **Industry:** food-beverage · **Source:** https://www.limon.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._

Limón pairs a warm, restrained editorial layout with vivid food photography and sharp citrus-yellow accents. Its homepage moves from an image-led hero through menu categories and practical restaurant details to a simple social and location footer.

## North star

Let appetizing food photography lead, while a calm ivory-and-green editorial system keeps navigation and information clear.

## Overview

The visual identity balances an ivory canvas (#fcf9f0) and deep forest green (#103b15) with a dark burgundy-brown (#1d0b0d) and a muted sage section band (#dbe2dc). Lemon yellow (#f7ea48) is reserved for high-visibility moments: hero lettering, order buttons, and small social accents. VenusCom carries the whole page, with uppercase display headings and navigation contrasted against lighter-weight sentence-case copy. The first screen is led by full-width food photography, while subsequent areas use calm two-column editorial splits and a three-card menu feature row. Content stays left aligned and spacious, with broad section transitions rather than decorative containers. Food images bring the strongest colour and texture; their photographic tones should not be mistaken for the brand palette. Buttons and cards remain visually flat, with crisp edges and minimal framing.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Forest Herb | `#103b15` | `--color-forest-herb` | brand | Primary headings, navigation, body text, borders, and dark social or link treatments. |
| Cream Canvas | `#fcf9f0` | `--color-cream-canvas` | surface | Main page canvas, navigation band, menu content, and social information sections. |
| Cocoa Ink | `#1d0b0d` | `--color-cocoa-ink` | neutral | Measured dark canvas and muted text colour; appears in dark areas and footer treatments. |
| Sage Mist | `#dbe2dc` | `--color-sage-mist` | surface | Distinct pale green-gray band behind opening hours and location information. |
| Citrus Flash | `#f7ea48` | `--color-citrus-flash` | accent | Order CTA fills, hero display lettering, and small social or menu highlights. |

### Semantic aliases

`--color-canvas` → `#fcf9f0` (Cream Canvas) · `--color-surface` → `#1d0b0d` (Cocoa Ink) · `--color-surface-2` → `#dbe2dc` (Sage Mist) · `--color-text` → `#103b15` (Forest Herb) · `--color-text-muted` → `#1d0b0d` (Cocoa Ink) · `--color-border` → `#103b15` (Forest Herb) · `--color-accent` → `#103b15` (Forest Herb) · `--color-accent-2` → `#f7ea48` (Citrus Flash) · `--color-on-accent` → `#103b15` (Forest Herb)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#103b15` | `#fcf9f0` | 12.03:1 | AAA |
| `#103b15` | `#1d0b0d` | 1.5:1 | fail |
| `#103b15` | `#dbe2dc` | 9.6:1 | AAA |
| `#1d0b0d` | `#fcf9f0` | 18.04:1 | AAA |
| `#1d0b0d` | `#dbe2dc` | 14.4:1 | AAA |
| `#103b15` | `#fcf9f0` | 12.03:1 | AAA |
| `#103b15` | `#1d0b0d` | 1.5:1 | fail |
| `#103b15` | `#dbe2dc` | 9.6:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| VenusCom | `--font-body` | webfont | 300, 700, 400, 600, 500 | All page typography, including hero and section headings, navigation, copy, labels, and buttons. | Jost |

- **VenusCom:** Use uppercase for display, navigation, captions, and CTAs; pair regular or light copy with heavier navigation and button labels.

### Type scale — Perfect Fourth (ratio ≈ 1.303, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 75px | 400 | 1.25 | 0 | uppercase | VenusCom | Oversized uppercase hero wordmark and promotional display text. |
| h1 | 68px | 400 | 1.2 | 0.03em | uppercase | VenusCom | Primary page or hero heading, set in uppercase. |
| h2 | 54px | 400 | 1 | 0 | uppercase | VenusCom | Major section headings such as the healthy fast food introduction. |
| h3 | 46px | 300 | 1.15 | 0 | — | VenusCom | Menu category titles and supporting section headings. |
| h4 | 36px | 700 | 1.2 | 0 | uppercase | VenusCom | Strong uppercase subheadings and location or information labels. |
| body | 20px | 300 | 1.45 | 0 | — | VenusCom | Lightweight descriptive paragraphs and practical restaurant information. |
| caption | 16px | 400 | 1.2 | 0.06em | uppercase | VenusCom | Small uppercase eyebrow labels and compact supporting metadata. |
| button | 19px | 700 | 1.01 | 0.02em | uppercase | VenusCom | Bold uppercase ordering and action labels. |
| nav | 19px | 700 | 1.01 | 0.03em | uppercase | VenusCom | Bold uppercase primary navigation links. |
| eyebrow | 16px | 400 | 1.2 | 0.06em | uppercase | VenusCom | Spaced uppercase introductory labels and short section identifiers. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 4, 5, 8, 10, 12, 15, 16, 20, 30, 34, 120 px.
- Section rhythm 120px · element gap — · card padding 15px · max content width 1170px.

Use a centered content area capped at the measured 1170px maximum, with wide outer breathing room and predominantly left-aligned text. The page alternates full-width colour bands with contained editorial layouts: a hero image, a two-column introduction, a three-column menu row, then practical information and social content. Section spacing is spacious, with a measured 120px section gap. Keep the information density low and let each section read as a distinct horizontal chapter.

## Shape & elevation

- Radius: button `1px` · xs `1px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s ease-in` on interactive elements.

The interface is predominantly flat: no measured shadows or gradients. Use large uninterrupted colour bands and crisp image edges instead of raised cards. Buttons have a nearly square measured 1px radius; menu cards remain visually open, with minimal border framing. Keep layering limited to text and CTAs positioned over hero photography.

## Imagery

Use appetizing, natural-light food photography as the primary visual asset. The hero image spans the page and is overlaid with sparse yellow promotional lettering and an order action. Supporting images appear as individual food or bowl photographs within the intro and three menu cards. Preserve the photography's warm, varied colours; they are image content, not additional interface palette colours.

## Components

### Primary navigation

Cream header with compact uppercase VenusCom links, centered wordmark, social prompt, and a yellow ORDER action; the active link is outlined in forest green.

### Hero

Full-width food photograph with sparse yellow display text, a short white supporting line, and a yellow order button.

### Order button

Citrus Flash (#f7ea48) fill, Forest Herb (#103b15) uppercase label, measured 1px radius, and crisp rectangular silhouette.

### Menu category cards

Three side-by-side food categories, each with a photograph, uppercase title, short description, and understated order link; use yellow for a small popularity marker.

### Opening hours

A Sage Mist (#dbe2dc) section with an uppercase heading and a two-location schedule arranged in columns.

### Footer

Dark measured canvas treatment with wordmark, social links, location names, addresses, phone numbers, and email links in a compact multi-column layout.

### Measured component styles

- **Primary button** (“ORDER”): background #f7ea48 · text #103b15 · border 2px solid · radius 1px · padding 12px 34px 10px 34px · 600 14px VenusCom · uppercase
- **Secondary button** (“MENU”): transparent background · text #103b15 · border 2px solid · radius 0px · padding 8px 16px · 700 19px VenusCom · uppercase
- **Link**: transparent background · text #103b15 · radius 0px · padding 0px · 700 36px VenusCom
- **Card** (“OPENING HOURS”): transparent background · text #1d0b0d · border 2px solid · radius 0px · padding 15px · 400 16px VenusCom
- **Navigation item** (“HOMEMENUABOUT USFAQCONTACT FOLLOW US ON ”): transparent background · text #1d0b0d · radius 0px · padding 0px · 400 16px VenusCom

## Do

- Use the measured palette hex values exactly.
- Let food photography dominate the hero and menu areas.
- Keep section content left aligned and editorial.
- Use VenusCom with uppercase display and navigation text.
- Reserve Citrus Flash for actions and brief highlights.
- Keep buttons crisp and nearly square.
- Separate content with broad, calm colour bands.

## Don't

- Do not introduce unmeasured brand colours.
- Do not mistake food-photo colours for interface colours.
- Do not add gradients or decorative shadows.
- Do not turn every section into a bordered card.
- Do not overcrowd the page with dense copy.
- Do not use rounded, pill-shaped buttons.
- Do not center all text or disrupt the left-aligned rhythm.

## Agent prompt

Build a new Limón-style food homepage using a centered content area capped at 1170px and spacious editorial section breaks. Use Cream Canvas (#fcf9f0) for the main light sections, Forest Herb (#103b15) for text and navigation, and Sage Mist (#dbe2dc) for a practical-information band. Reserve Citrus Flash (#f7ea48) for order actions and small highlights; use Cocoa Ink (#1d0b0d) only for measured dark treatments. Set all type in VenusCom or a close sans-serif substitute, with uppercase headings, navigation, and buttons, and light sentence-case body copy. Lead with full-width appetizing food photography and sparse text overlay. Follow with a two-column introduction, a three-item menu feature row, and useful location or social details. Keep surfaces flat, edges crisp, and decoration minimal.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width food photograph beneath a horizontal navigation header; hero copy sits over the image. | Primary order CTA, Social media link, Active navigation state | Cream navigation band, Yellow CTA, Overlay display text |
| 2 | feature-split | Two-column editorial split on an ivory background, with copy beside a food photograph. | Brand introduction, Supporting food image | Left-aligned heading, Open whitespace |
| 3 | product-grid | Three food-category cards in a single row on the cream canvas. | Category discovery, Per-item order links, Popular marker | Food photography, Uppercase titles, Minimal card framing |
| 4 | contact | Wide Sage Mist (#dbe2dc) band with the hours heading and two location schedules. | Check opening hours, Compare locations | Two-column information, Muted green-gray background |
| 5 | cta | Two-column cream section with a heading and copy beside social links. | Social follow prompt, External social links | Large uppercase heading, Yellow social accents |
| 6 | footer | Multi-column footer with brand and social links followed by two location contact blocks. | Address details, Phone and email links, Social navigation | Wordmark, Compact columns, Fine divider |

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