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

# Amrit Palace · Design System

> Warm hospitality, framed in cinematic Indian dining

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

Amrit Palace pairs cinematic restaurant photography with a restrained palette of warm parchment, charcoal, and saffron gold. Oversized editorial serif headings and spacious, asymmetrical sections give the dining, catering, drinks, and guest-review content a polished, tactile rhythm.

## North star

Let warm editorial typography and immersive food photography carry the story, with restrained gold accents and generous breathing room.

## Overview

The page uses warm parchment (#d8cbb8) as its primary canvas, interrupted by a muted taupe catering band and a deep charcoal footer. A nearly black gradient over full-bleed restaurant photography creates the opening hero’s cinematic mood and keeps its pale, uppercase display type legible. Saffron gold is a restrained signal for small controls and brand details rather than a broad background colour. TT Ramillas Variable provides the high-contrast editorial voice in airy, tightly tracked uppercase headings; Satoshi handles compact navigation, descriptions, links, and card copy. Layout alternates spacious single-column statements with asymmetric two-column food showcases and a three-card catering row. Large image areas, quiet hairlines, and simple square-edged controls keep the experience tactile without relying on shadows or decorative UI. The gift-card and review sections return to the light canvas, while the dark footer closes the long page with a strong tonal contrast.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Charcoal Ink | `#2c2c2c` | `--color-charcoal-ink` | brand | Primary text and links on parchment; also outlines menu cards and outlined actions. |
| Warm Parchment | `#d8cbb8` | `--color-warm-parchment` | brand | Main page canvas and pale text on the dark hero and footer. |
| Quiet Taupe | `#b6ab9c` | `--color-quiet-taupe` | neutral | Fine card borders and subtle separators against the light canvas. |
| Stone Taupe | `#978e80` | `--color-stone-taupe` | surface | Muted section surface, supporting the warmer transition between content bands. |
| Shadow Black | `#101010` | `--color-shadow-black` | semantic | Measured gradient endpoint over imagery; appears as photographic darkening, not a broad UI surface. |
| Misted Taupe | `#b0a596` | `--color-misted-taupe` | semantic | Measured gradient colour; treat as a subtle image-overlay transition rather than a standalone brand surface. |
| Catering Sand | `#bfb4a3` | `--color-catering-sand` | surface | Catering introduction and service-card band, visibly distinct from the main parchment canvas. |
| Roasted Charcoal | `#292622` | `--color-roasted-charcoal` | surface | Footer background, contrasting with pale navigation, contact details, and oversized wordmark. |
| Smoked Stone | `#615c53` | `--color-smoked-stone` | surface | Secondary muted section surface in the measured palette. |
| Saffron Gold | `#d49653` | `--color-saffron-gold` | accent | Small brand and interface highlights, including gold-toned controls and menu-panel accents. |
| Olive Ash | `#666056` | `--color-olive-ash` | neutral | Minor card and miscellaneous border tone; keep it subordinate to the main hairline colour. |

### Semantic aliases

`--color-canvas` → `#d8cbb8` (Warm Parchment) · `--color-surface` → `#978e80` (Stone Taupe) · `--color-surface-2` → `#292622` (Roasted Charcoal) · `--color-surface-3` → `#bfb4a3` (Catering Sand) · `--color-surface-4` → `#615c53` (Smoked Stone) · `--color-text` → `#2c2c2c` (Charcoal Ink) · `--color-text-muted` → `#d8cbb8` (Warm Parchment) · `--color-border` → `#b6ab9c` (Quiet Taupe) · `--color-accent` → `#d49653` (Saffron Gold)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2c2c2c` | `#d8cbb8` | 8.75:1 | AAA |
| `#2c2c2c` | `#978e80` | 4.32:1 | AA-large |
| `#2c2c2c` | `#292622` | 1.08:1 | fail |
| `#2c2c2c` | `#bfb4a3` | 6.83:1 | AA |
| `#d8cbb8` | `#978e80` | 2.02:1 | fail |
| `#d8cbb8` | `#292622` | 9.43:1 | AAA |
| `#d8cbb8` | `#bfb4a3` | 1.28:1 | fail |
| `#d49653` | `#d8cbb8` | 1.59:1 | fail |
| `#d49653` | `#978e80` | 1.28:1 | fail |
| `#d49653` | `#292622` | 5.94:1 | AA |

### Gradients

- `linear-gradient(rgb(16, 16, 16), rgba(16, 16, 16, 0.2))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Satoshi | `--font-body` | webfont | 500, 700 | Navigation, body copy, links, captions, menu descriptions, and review-card text. | DM Sans |
| TT Ramillas Variable | `--font-display` | webfont | 300 | Display headings and section titles across the hero and editorial content. | Cormorant Garamond |

- **Satoshi:** Medium weight carries most small UI and copy; keep tracking subtly tight and use sentence case.
- **TT Ramillas Variable:** Light, high-contrast serif; large headings are uppercase with tight negative tracking and compact leading.

### Type scale — Augmented Fourth (ratio ≈ 1.396, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 69px | 300 | 0.9 | -0.04em | uppercase | TT Ramillas Variable | Oversized uppercase hero and brand statement headings. |
| h1 | 65px | 300 | 0.85 | -0.04em | uppercase | TT Ramillas Variable | Primary hero headline, set in large uppercase display serif. |
| h2 | 50.5px | 300 | 0.9 | -0.03em | uppercase | TT Ramillas Variable | Major editorial section headings, often uppercase. |
| h3 | 26px | 300 | 1.2 | -0.006em | — | TT Ramillas Variable | Secondary section titles and supporting feature headings. |
| h4 | 21.5px | 300 | 1 | -0.035em | — | TT Ramillas Variable | Compact subheadings and card-level titles. |
| body | 13px | 500 | 1.4 | -0.011em | — | Satoshi | Restaurant descriptions, menu details, and general explanatory copy. |
| caption | 12px | 500 | 1.4 | -0.012em | — | Satoshi | Small labels, image captions, and understated supporting notes. |
| link | 13.5px | 500 | 1.4 | 0 | — | Satoshi | Navigation and text actions such as menu, catering, and gift links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 3, 4, 5, 6, 7, 10, 12, 16, 20, 28, 42 px.
- Section rhythm 92px · element gap 6px · card padding 5px · max content width 1384px.

The page is a long, comfortable-density editorial scroll, with measured content capped by a 1384px page maximum. It alternates single-column narrative sections, asymmetric two-column food showcases, and a three-column catering feature row; reviews use a four-column card layout. Most headings align to the start edge, while the gift feature centers its title and call to action. Broad section gaps separate content, and image blocks often span a substantial part of the layout. Use the measured 4px spacing base and scale for rhythm; avoid compressing the generous transitions.

## Shape & elevation

- Radius: card `3px` · link `3px` · xs `2px` · sm `3px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s ease` on interactive elements.

The interface is largely flat, with no measured shadows. Separate content through background bands, image placement, and thin muted borders rather than floating cards. Review cards and menu panels use restrained outlines, while the hero’s dark image overlay supplies depth. Keep corners nearly square, using only the measured subtle card and link radii.

## Imagery

Use immersive restaurant, plated-food, and cocktail photography as the primary visual content. The hero is full-bleed and heavily darkened with a black gradient to support pale headline text. Other sections use large, cleanly cropped images beside or beneath text, including service photography in a three-card row. Gift cards appear as a photographic arrangement rather than a flat UI mockup. Keep image treatment warm, low-gloss, and realistic; measured screenshot colours inside imagery should not be mistaken for the interface palette.

## Components

### Hero navigation

Slim overlay navigation on the dark photographic hero, with small Satoshi links and gold-toned icon controls.

### Cinematic hero

Full-bleed dining-room image under a dark gradient, centered uppercase display headline, small side labels, and a review badge.

### Menu showcase

Two-column food presentation with a bordered menu panel beside editorial copy, outlined menu action, and large dish photography.

### Catering features

Muted sand section with a centered editorial heading followed by three photographic service cards and compact captions.

### Drink menu

Asymmetric drinks section pairing a text-and-menu column with stacked cocktail photography.

### Review cards

Light-canvas guest review area with fine taupe borders, small supporting text, and a compact rating summary.

### Footer

Deep charcoal two-column information area with thin dividers, small pale links, centered brand mark, and oversized gold wordmark.

### Measured component styles

- **Primary button** (“Reserve a Table”): transparent background · text #d8cbb8 · radius 0px · padding 20px 0px · 500 11.52px Satoshi
- **Link** (“Home”): transparent background · text #d8cbb8 · radius 0px · padding 0px · 500 12.96px Satoshi
- **Card** (“Google Always so delicious. The staff is”): transparent background · text #2c2c2c · border 1px solid #b6ab9c · radius 3px · padding 0px 0px 20px 0px · 500 14.4px Satoshi

## Do

- Use Warm Parchment (#d8cbb8) as the dominant light canvas.
- Reserve Roasted Charcoal (#292622) for the deep footer contrast.
- Use large, light uppercase serif headings for editorial moments.
- Keep body and navigation copy compact in a clean sans serif.
- Pair generous text space with large, warm food photography.
- Use thin borders and section bands instead of drop shadows.

## Don't

- Do not turn Saffron Gold (#d49653) into a dominant page background.
- Do not apply heavy shadows or elevated floating-card effects.
- Do not force every section into a uniform centered grid.
- Do not use dense, oversized body copy beside the display headings.
- Do not treat photographic colours as additional interface palette tokens.
- Do not round cards and controls heavily.

## Agent prompt

Build a new restaurant page in the Amrit Palace visual style. Use Warm Parchment (#d8cbb8) as the primary canvas, Charcoal Ink (#2c2c2c) for text and outlines, and Saffron Gold (#d49653) only for small highlights. Use Roasted Charcoal (#292622) for a strong dark band or footer. Set editorial headings in a light, high-contrast serif with tight tracking and uppercase styling; use a clean medium-weight sans serif for navigation and compact copy. Organize content as a spacious long-form scroll with asymmetric image-and-text sections, broad photography, occasional three-column features, and restrained review cards. Keep food and dining imagery warm and cinematic, darkening the hero with a subtle gradient. Prefer hairline borders and flat surfaces over shadows, and keep corner rounding minimal.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dining-room photograph with centered headline and overlaid navigation. | Overlay navigation, Review rating badge | Dark image gradient, Large uppercase serif, Gold icon controls |
| 2 | feature-split | Text-led introduction over a broad atmospheric food image. | About link | Uppercase serif heading, Image backdrop |
| 3 | product-showcase | Asymmetric menu panel and editorial text, followed by large food photography. | View full menu, Reserve a table | Outlined menu panel, Two-column composition, Dish photography |
| 4 | feature-split | Muted sand band with centered heading and compact introduction. | Service overview | Taupe section surface, Editorial serif |
| 5 | feature-grid | Three photographic cards in a row with captions and short descriptions. | Scan service options | Three-column image grid, Compact captions |
| 6 | product-showcase | Menu and introduction on one side, cocktail images stacked alongside. | Open menu | Asymmetric split, Stacked drink photography |
| 7 | cta | Centered gift-card presentation, title, supporting copy, and order action. | Order now | Open parchment canvas, Centered display heading |
| 8 | feature-split | Large restaurant photograph with heading at the top and copy near the bottom. | Brand story | Full-width image, Pale overlay text |
| 9 | reviews | Light section with left-aligned title and rating summary opposite. | Rating summary | Editorial heading, Compact rating panel |
| 10 | testimonials | Four-column row of bordered guest review cards. | Read guest feedback | Thin card borders, Compact review copy |
| 11 | cta | Centered short prompt with a single review link. | Leave a review | Minimal centered copy, Underlined text link |
| 12 | footer | Dark two-column information area with dividers and a large bottom wordmark. | Location and hours lookup, Contact and newsletter links | Charcoal background, Pale small text, Gold wordmark |

## Source CSS custom properties (selected)

```css
--primary: #d49653;
```

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