prismd
Éditeur Extraire un site
Analyse du design system

restaurantzimmerl.at

restaurantzimmerl.at is built on a dark canvas (rgb(31, 45, 45)). The system uses rgb(59, 88, 67) as a near-neutral accent (low saturation). Crisp CTAs (4px radius) reinforce a precise, technical aesthetic alongside Judson as the primary typeface. Judson is paired with Nord for secondary roles. Depth comes from borders and surface contrast rather than shadows — a flat, structural elevation model. Motion is a first-class concern — 10 keyframe animations plus transition-driven interactions.

Accent #3b5843 · police principale Judson

Chaque valeur ci-dessous est vérifiée à la capture. getdesign.md décrit — prismd montre : chaque couleur, police et courbe ici a été lue via getComputedStyle() sur le rendu réel capturé à droite, jamais affirmée à la main.

Rapport DESIGN.md complet · light & dark · fichiers tokens · Paiement non activé — on mesure la demande d’abord.

https://www.restaurantzimmerl.at/ ·extrait le 2026-08-12 ·scorer v2 ·moteur getComputedStyle
Desktop · source de vérité
restaurantzimmerl.at desktop
Mobile
restaurantzimmerl.at mobile
01

Couleurs — rôles, sémantique & recensement complet

7 couleurs mesurées · clique une pastille pour copier

Canvas
#1f2d2d
AAA 14.27:1
Ink
#ffffff
AAA 14.27:1
Accent
#3b5843
Fail 1.81:1
Line
#3b5843
Fail 1.81:1
États sémantiques

Aucune couleur d’état sémantique détectée — ce système signale l’état par le poids & le motion, pas la teinte.

7 couleurs extraites du rendu livedéplier
02

Typographie — l’échelle, dans la vraie police

4 rôles · rendu live dans la vraie Inter (woff2 capturé) · lignes éditables, clique une spec pour copier

display xl
display-xl47px · 400
body
body18px · 400 · ×2.61
body sm
body-sm14px · 400 · ×1.29
button
button12px · 300 · ×1.17
03

Espacements & arrondis, rendus spatiaux

9 paliers d’espacement · 7 arrondis · barres = largeurs px exactes

Échelle d’espacement
xxs · 2px
xs · 15px
sm · 20px
md · 95px
base · 120px
lg · 128px
xl · 136px
2xl · 144px
3xl · 152px
Arrondis
none
0px
xs
4px
sm
8px
md
14px
lg
20px
xl
32px
full
9999px
05

Motion — courbes, transitions & keyframes réels

1 courbe d’easing · 10 keyframes · survole une tuile pour prévisualiser

Courbes & transitions
transition-2cubic-bezier(0.25, 0.1, 0.25, 1)
10 animations keyframes extraites
kenburns
kenburnsDownLeft
kenburnsDownRight
kenburnsDown
kenburnsLeft
kenburnsRight
kenburnsUpLeft
kenburnsUpRight
kenburnsUp
progress-bar-stripes
06

Composants — le vocabulaire fermé

5 familles de composants · 15 variantes comptées sur le DOM live

ComposantVariantes
links×6
nav Links×3
heading H2×3
heading H1×2
buttons×1
Specs de style des composants (§4)déplier

Buttons

Secondary

  • Background: #3b5843 {colors.hairline}
  • Text: #d39969
  • Padding: 12px 15px
  • Radius: 4px
  • Font: 12px weight 300
  • Use: Secondary action
  • Active: boxShadow: rgba(0, 0, 0, 0.125) 0px 3px 5px 0px ins
07

Mise en page — structure & dimensions

5 métriques de layout mesurées

header 64px 1200px max-width
max Width1200px
header Height64px
sidebar Width0px
gap16px
container Padding24px
08

Responsive — vrais breakpoints

10 points de rupture lus dans le CSS live

380px
767px
768px
800px
900px
991px
992px
1199px
1200px
1500px
09

À faire / À éviter

15 règles applicables, verbatim de la spec

À faire
Use dark background (`#1f2d2d`) as the foundation — this is a dark-mode-native design
Use Judson as the primary typeface — it defines the brand personality
Keep font weights between 300-400 — the system uses a narrow weight range for subtle hierarchy
Use Dark Gray (`#3b5843`) as the primary accent — it's the brand's signature interactive color
Use small 4px radius for buttons — this design system uses subtle rounding, not pill shapes
Respect the 15px–136px spacing range — the design uses a wide scale for visual breathing room
Make the hero full-viewport (≥70% screen height) — this design uses an immersive hero, not a tall navbar
Build the hero as a split layout with media on the right — text and visual share equal weight
Each card includes a top image — imagery is part of the card identity, not optional
À éviter
Don't use light backgrounds — the dark canvas is the native medium
Don't substitute with generic sans-serif or serif — the custom font carries the brand
Don't reach for weight 700 (bold) or above — 400 is the heaviest weight this design paints
Don't introduce additional saturated accent colors — the palette is intentionally controlled
Don't over-round buttons with pill or large radius — the system uses restrained, sharp-ish corners
Don't over-build the footer — this design keeps it minimal (1 cols, 0 links)
10

Guide agent & export

Prompt prêt à coller + les vrais fichiers derrière cette page

Construis une UI dans le design system de restaurantzimmerl.at. Fond #1f2d2d · encre #ffffff · accent #3b5843. Typo : Judson — respecte l’échelle taille/graisse du §3. Arrondis, espacements, ombres : uniquement les échelles extraites (aucun nombre magique). La spec complète suit — colle le DESIGN.md ci-dessous dans ton agent.
Chaque valeur ci-dessus est vérifiée par getComputedStyle.
$ npx prism-design add restaurantzimmerl
DESIGN.md · narrative spec tokens.json