Seven rooms on a slow hillside.
We restored the house stone by stone in 2019. There are seven rooms, a pool cut into the terrace, and a long table where everyone eats together at eight.
Logo
Clear space
Keep empty space around the logo at least as tall as the logo itself.
Don't
Color
Primary and textHEX#5E1F2BRGB94 31 43CMYKC0 M67 Y54 K63
BackgroundHEX#F2EEE7RGB242 238 231CMYKC0 M2 Y5 K5
SurfaceHEX#3F3E3BRGB63 62 59CMYKC0 M2 Y6 K75
CMYK is converted from the screen color. Ask your printer for a proof on the paper you'll use.
Primary scale
Contrast
AaText on background10.64 · AAA
AaOn primary12.30 · AAA
AaPrimary on background10.64 · AAA
Typography
Headings
Aa
Cormorant Garamond
Body
Aa
Jost
Try it
Scale
Display
61pxSeven rooms on a slow hillside.
61pxSeven rooms on a slow hillside.
Heading 1
49pxSeven rooms on a slow hillside.
49pxSeven rooms on a slow hillside.
Heading 2
39pxSeven rooms on a slow hillside.
39pxSeven rooms on a slow hillside.
Heading 3
31pxSeven rooms on a slow hillside.
31pxSeven rooms on a slow hillside.
Heading 4
25pxSeven rooms on a slow hillside.
25pxSeven rooms on a slow hillside.
Large
20pxSeven rooms on a slow hillside.
20pxSeven rooms on a slow hillside.
Body
16pxSeven rooms on a slow hillside.
16pxSeven rooms on a slow hillside.
Small
13pxSeven rooms on a slow hillside.
13pxSeven rooms on a slow hillside.
Voice
TraitWe sayNot this
Unhurried
Let time feel slow, and never rush guests toward booking or leaving.
Stay a little longer.
We would be delighted if you chose to extend your booking by a little more time.
Plain and rooted
Describe the house and land plainly, the way a neighbour would.
An old schist house above the Douro, with breakfast from the garden and wine from the terraces below.
A venerable schist dwelling set above the Douro, with garden breakfasts and wine from the terraces below.
Components
Buttons
Primary for the main action, outline for the rest.
Input
Same corners as the buttons, a quiet outline.
you@example.com
Card
A tag, a headline in the brand's type and a short line.
New
Seven rooms on a slow hillside.
We restored the house stone by stone in 2019. There are seven rooms, a pool cut into the terrace, and a long table where everyone eats together at eight.
In use
encostalenta.pt
The house
Ready to use
LinkedIn cover1584 × 396
DownloadProfile picture
DownloadBusiness card85 × 55 mm
Print fileEmail signature
|
|
Design system
Color roles
Primary
Neutral
Type styles
displayEncosta Lenta61/1.05 · 500
h1Encosta Lenta49/1.1 · 500
h2Encosta Lenta39/1.15 · 500
h3Encosta Lenta31/1.2 · 500
h4Encosta Lenta25/1.25 · 500
largeEncosta Lenta20/1.5 · 400
bodyEncosta Lenta16/1.6 · 400
smallEncosta Lenta13/1.5 · 400
Spacing
2px
4px
8px
12px
16px
24px
32px
48px
64px
96px
128px
Corners
sm
md
lg
xl
button
full
Shadows
sm
md
lg
Use it anywhere
Pick the format your tools read, then copy it or download the file. DESIGN.md is the one to hand to an AI tool.
Claude skill
Logo files, colors, fonts, voice and design tokens in one zip. In Claude, open Customize, then Skills, and upload it. Claude then uses the brand whenever you make something for it.
DESIGN.md
# Encosta Lenta design system
Use this file when building anything for this brand. Follow it exactly; when something is missing, pick the closest token rather than inventing new values.
Website: https://encostalenta.pt
> We restored the house stone by stone in 2019. There are seven rooms, a pool cut into the terrace, and a long table where everyone eats together at eight.
## Colors
| Token | Value | Use for |
| --- | --- | --- |
| `background` | #f2eee7 | Page background |
| `surface` | #3f3e3b | Cards, panels and inputs |
| `text` | #5e1f2b | Body text and headings |
| `text-muted` | #595051 | Secondary text, captions |
| `border` | #ece1e2 | Dividers and outlines |
| `primary` | #5e1f2b | Main buttons, links and key actions |
| `on-primary` | #ffffff | Text and icons on primary |
| `success` | #16a34a | Confirmation states (suggested default) |
| `warning` | #d97706 | Caution states (suggested default) |
| `danger` | #dc2626 | Errors and destructive actions (suggested default) |
Scales: primary 50 to 950, neutral 50 to 950 (see tokens below).
Rules:
- Use `primary` for the single most important action on a screen, not for decoration.
- Text sits on `background` or `surface` in `text`; secondary text uses `text-muted`.
- Text on background contrast is 10.6:1; text on primary is 12.3:1.
## Typography
- Headings: **Cormorant Garamond**, from Google Fonts: https://fonts.google.com/specimen/Cormorant+Garamond.
- Body: **Jost**, from Google Fonts: https://fonts.google.com/specimen/Jost.
| Style | Size | Line height | Weight |
| --- | --- | --- | --- |
| display | 61px | 1.05 | 500 |
| h1 | 49px | 1.1 | 500 |
| h2 | 39px | 1.15 | 500 |
| h3 | 31px | 1.2 | 500 |
| h4 | 25px | 1.25 | 500 |
| large | 20px | 1.5 | 400 |
| body | 16px | 1.6 | 400 |
| small | 13px | 1.5 | 400 |
## Spacing, corners and shadows
- Spacing steps: 0px, 2px, 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px. Use only these.
- Corners: sm 2px, md 2px, lg 3px, xl 4px, button 0px, full 9999px. Buttons use `radius-button`.
- Shadows: sm for inputs and small cards, md for menus and popovers, lg for dialogs.
## Components
- Primary button: `primary` background, `on-primary` text, `radius-button`, body font at 15px, medium weight.
- Secondary button: transparent background, 1px `border`, `text` color, same shape as primary.
- Inputs: `surface` background, 1px `border`, `radius-md`, 44px tall, focus ring in `primary`.
- Cards: `surface` background, 1px `border` or `shadow-sm`, `radius-lg`, 24px padding.
## Voice
### Unhurried
Let time feel slow, and never rush guests toward booking or leaving.
- We say: "Stay a little longer."
- Not: "We would be delighted if you chose to extend your booking by a little more time."
### Plain and rooted
Describe the house and land plainly, the way a neighbour would.
- We say: "An old schist house above the Douro, with breakfast from the garden and wine from the terraces below."
- Not: "A venerable schist dwelling set above the Douro, with garden breakfasts and wine from the terraces below."
## Logo
- Keep clear space around the logo at least as tall as the logo itself.
- Don't stretch, rotate, recolor or add effects to it.
## Tokens
```css
/* Encosta Lenta design system, made with Identitas */
:root {
/* Color roles */
--color-background: #f2eee7;
--color-surface: #3f3e3b;
--color-text: #5e1f2b;
--color-text-muted: #595051;
--color-border: #ece1e2;
--color-primary: #5e1f2b;
--color-on-primary: #ffffff;
--color-success: #16a34a; /* suggested */
--color-warning: #d97706; /* suggested */
--color-danger: #dc2626; /* suggested */
/* Primary scale */
--primary-50: #fff1f2;
--primary-100: #ffdfe1;
--primary-200: #f9c0c5;
--primary-300: #e39fa6;
--primary-400: #c67e86;
--primary-500: #a9636c;
--primary-600: #8e4d56;
--primary-700: #723941;
--primary-800: #5e1f2b;
--primary-900: #3c1b20;
--primary-950: #231012;
/* Neutral scale */
--neutral-50: #fff7f8;
--neutral-100: #fbf0f1;
--neutral-200: #ece1e2;
--neutral-300: #dcd1d2;
--neutral-400: #a99f9f;
--neutral-500: #786f70;
--neutral-600: #595051;
--neutral-700: #463d3e;
--neutral-800: #2c2425;
--neutral-900: #1b1415;
--neutral-950: #0e0708;
/* Type */
--font-heading: "Cormorant Garamond", ui-sans-serif, system-ui, sans-serif;
--font-body: "Jost", ui-sans-serif, system-ui, sans-serif;
--text-display: 3.8125rem; --leading-display: 1.05;
--text-h1: 3.0625rem; --leading-h1: 1.1;
--text-h2: 2.4375rem; --leading-h2: 1.15;
--text-h3: 1.9375rem; --leading-h3: 1.2;
--text-h4: 1.5625rem; --leading-h4: 1.25;
--text-large: 1.25rem; --leading-large: 1.5;
--text-body: 1rem; --leading-body: 1.6;
--text-small: 0.8125rem; --leading-small: 1.5;
/* Spacing */
--space-0: 0px;
--space-1: 2px;
--space-2: 4px;
--space-3: 8px;
--space-4: 12px;
--space-5: 16px;
--space-6: 24px;
--space-7: 32px;
--space-8: 48px;
--space-9: 64px;
--space-10: 96px;
--space-11: 128px;
/* Corners */
--radius-sm: 2px;
--radius-md: 2px;
--radius-lg: 3px;
--radius-xl: 4px;
--radius-button: 0px;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px rgb(94 31 43 / 0.06);
--shadow-md: 0 4px 12px -2px rgb(94 31 43 / 0.10), 0 2px 4px rgb(94 31 43 / 0.06);
--shadow-lg: 0 18px 40px -12px rgb(94 31 43 / 0.20), 0 4px 10px rgb(94 31 43 / 0.06);
}
```