# Limonoslo No · Design system migration spec

> Source: https://limonoslo.no  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of bold, expressive restaurant branding that successfully combines high-quality photography with strong typography and a warm color palette.

## 1. Identity DNA

Limonoslo No operates with the clarity of a well-conceived menu: every element has a distinct purpose and a complementary relationship. The system's warmth and boldness stem from a single guiding analogy—a vibrant, modern restaurant where fresh ingredients are presented with clean, confident typography. This identity is not merely decorative; it is structural, informing every decision from palette to type scale.

**One-liner:** A modern restaurant website blending bold typography, warm colors, and immersive food photography.
**Keywords:** restaurant · fresh · modern · warm · inviting
**Analogy:** A vibrant, modern restaurant combining fresh ingredients with bold, clean typography.

## 2. Color

The color system is built on a foundation of creamy warmth (#FCF9F0) that serves as a welcoming canvas for content. Anchoring this are deep, natural inks—charcoal (#1D0B0D) and a forest green (#103B15)—while a single, unapologetic yellow accent (#F7EA48) provides focal energy for interactive elements.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FCF9F0` | main background |
| `--ink` | `#1D0B0D` | body text |
| `--ink-soft` | `#141414` | secondary text |
| `--muted` | `#103B15` | placeholder |
| `--accent` | `#F7EA48` | single accent |
| `--line` | `rgba(16,59,21,0.2)` | divider |

**Color principle:** Warm, inviting palette combining creamy backgrounds, dark natural inks, and a single vibrant yellow accent.

The principle is restraint in service of emphasis: one vibrant accent color makes a clear statement against a grounding, neutral field.

## 3. Typography

Typography is the primary voice of the system, employing a bold, high-contrast sans-serif for headlines and navigation to command immediate attention. This is paired with a clear, legible sans-serif for body text, ensuring readability without competing with the photographic content that dominates the interface.

- **Display:** sans-serif
- **Body:** sans-serif
- **Mono:** sans-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1px | Primary navigation and branding (LIMÓN logo). |
| heading | 36px | 1.1 | 700 | 0.5px | Section headings and call-to-action text. |
| body | 16px | 1.2 | 400 | 0.1px | General body text and paragraphs. |
| caption | 15px | 1.5 | 400 | 0.1px | Secondary text and detailed information. |

## 4. Spacing

A consistent vertical rhythm, established through multiples of four, governs the system's generous whitespace and ensures balanced, harmonious spacing throughout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent vertical rhythm established through multiples of 4, ensuring balanced whitespace.

## 5. Surfaces

Depth is achieved selectively through a single, pronounced drop shadow, creating a sense of physical layering for key components like cards. Borders are used deliberately, with dark green (#103B15) for structural emphasis and light gray (#D6D6D6) for subtle, divisive lines.

- **Radius:** sm 4px · md 8px · lg 32px · pill 999px
- **Shadows:**
  - rgba(0,0,0,0.3) 0px 32px 68px 0px
- **Borders:** Solid borders in dark green (#103B15) for emphasis and subtle light gray (#D6D6D6) for divisions.

## 6. Layout

The layout skeleton is a standard grid that provides clear structural divisions and generous container constraints. This disciplined framework is designed to be broken by full-bleed photographic hero sections, creating a dynamic rhythm between order and immersive imagery.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Standard grid layout with clear structural divisions and generous spacing.

## 7. Motion & Interaction

Motion is employed as a functional clarification rather than a decorative flourish. Transitions are limited to background colors, opacity, and layout adjustments, using quick, purposeful animations that confirm user interactions without prolonging them.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle transitions for background colors and opacity.
  - Width and height animations for dynamic layout adjustments.

- **Hover:** Color shifts and subtle transitions on interactive elements.
- **Click:** Immediate visual feedback with transitions on active states.
- **Transition:** Smooth transitions for background-color, opacity, and layout changes.
- **Keyboard:** Standard keyboard navigation with focus states.

## 8. Voice & Don'ts

The editorial voice is direct, inviting, and modern, matching the system's visual confidence. Headlines and calls-to-action are rendered in bold, uppercase typography, creating a tone that is enthusiastic yet clear, avoiding both formality and ambiguity.

- **Tone:** Inviting, modern, and enthusiastic.
- **Headline style:** Bold, uppercase typography with high contrast against backgrounds.
- **CTA style:** Direct, uppercase commands with strong color accents.
- **Avoid:** Overly formal language / Subtle text weights / Muted color palettes

### Don'ts
- ❌ Don't use a cool, monochromatic palette — screenshot shows warm, inviting tones.
- ❌ Don't apply heavy drop shadows to all UI elements — screenshot shows selective use.
- ❌ Don't use delicate, low-contrast typography — screenshot features bold, highly legible type.
- ❌ Don't prioritize complex animations over clear content delivery — screenshot shows minimal motion.
- ❌ Don't use abstract iconography without clear labels — screenshot relies on text-based navigation.
- ❌ Don't avoid full-bleed photography — screenshot prominently uses immersive food imagery.

The system deliberately avoids muted palettes, delicate typography, and complex animations that would dilute the core proposition of bold, welcoming clarity.

## System Prompt (paste into AI tool)

```
Design a modern, inviting restaurant website that emphasizes fresh ingredients and vibrant flavors. Use a warm color palette anchored by a creamy background (#FCF9F0), deep natural ink (#1D0B0D), and a single bright yellow accent (#F7EA48). Employ bold, highly legible sans-serif typography for headlines and clear, readable sans-serif for body text. Structure the layout with generous whitespace and a standard grid. Critical constraints: never use cool, clinical color schemes; do not apply subtle or delicate typography; and avoid minimal layouts that lack immersive food photography. Focus on a bold, expressive, and welcoming visual identity.
```