Skip to content
StrictThemes

Themes / 21

Veranda

A warm, unhurried theme for guesthouses, small hotels and places to stay. Cream paper, slate ink, and clay, sage and sand used sparingly.

Install into a shadcn project
npx shadcn@latest add https://strictthemes.com/r/veranda.json

01 / Preview

Stock shadcn components, this theme.

Veranda

Ship the page, keep the system.

Every color, corner and typeface in this box comes from the theme's tokens. The components are stock shadcn.

NewDraftv1.2.0Failed
Invite a reviewer
They get read access to this project.
Colors on token96%
x
Spacing on scale88%
x
Type on scale100%
x

02 / Page prompts

Paste one into your agent. Get that page.

Each prompt is a full brief for one page in this theme: its sections, layout, behavior, and a checklist the agent goes through before it says it is done. The rules in every prompt are generated from the theme's strict block. Each preview is the page built from the prompt, shown as it came out.

  • Home

    The home page of a small guesthouse, with an opening on a block of clay, a short date check that leads to the reservation page, three of its rooms, a few lines about the house, breakfast in brief and how to find it.

    50.0k characters

    Strict Check 100%

    Preview the Home pageRead the prompt: Home

  • Rooms

    The rooms page of a small guesthouse, with all six rooms as rows whose drawn pictures alternate sides, a control that shows the rooms for one, two or more guests, and a block of clay that says what every room includes.

    47.1k characters

    Strict Check 100%

    Preview the Rooms pageRead the prompt: Rooms

  • Room

    The page of one room in a small guesthouse, with a group of drawn pictures, a description, a list of facts, what is included, a table of prices per night by season, and a panel with the price and the one action to request the room.

    46.7k characters

    Strict Check 100%

    Preview the Room pageRead the prompt: Room

  • Reserve

    A page to request a reservation at a small guesthouse, with a form for the dates, the room, the guests and who is coming, checked in code, a summary beside it that works out the nights and the total, and a confirmation that replaces the form.

    50.5k characters

    Strict Check 100%

    Preview the Reserve pageRead the prompt: Reserve

  • Menu

    The breakfast and supper menu of a small guesthouse, a typographic menu in sections where each dish has a line of description and a price at the end of a hairline, with letters for dietary notes, their key, and the times each meal is served.

    46.6k characters

    Strict Check 100%

    Preview the Menu pageRead the prompt: Menu

03 / Colors

Every color the theme allows.

  • primary

    #3D405B / #F2CC8F

  • on-primary

    #F4F1DE / #22243A

  • secondary

    #F2CC8F / #4A4D6B

  • on-secondary

    #2A2C40 / #F4F1DE

  • tertiary

    #81B29A

  • on-tertiary

    #2A2C40

  • neutral

    #5C5F78 / #B9BBD0

  • background

    #F4F1DE / #22243A

  • surface

    #FBFAF1 / #2E3049

  • foreground

    #2A2C40 / #F4F1DE

  • border

    #DDD8BD / #45486A

  • error

    #A63A24 / #F2A08C

  • clay

    #E07A5F

  • on-clay

    #2A2C40

Left: light mode. Right: dark mode.

04 / Typography

Five sizes. Nothing in between.

  • display

    Cormorant · 68px · weight 500 · line 1

    The quick brown fox

  • h1

    Cormorant · 44px · weight 500 · line 1.1

    The quick brown fox

  • h2

    Cormorant · 28px · weight 600 · line 1.2

    The quick brown fox

  • body

    Outfit · 16px · weight 400 · line 1.65

    The quick brown fox

  • label

    Cutive Mono · 13px · weight 400 · line 1.3

    The quick brown fox

05 / Shape and space

Corners and spacing.

  • sm

    2px

  • md

    4px

  • lg

    12px

  • xs

    4px

  • sm

    8px

  • md

    16px

  • lg

    24px

  • xl

    48px

  • 2xl

    104px

06 / Rules

What the strict block enforces.

Contrast
WCAG AA
Colors
Tokens only, within 0.02 of a token
Spacing
Scale only, plus 0, 1px, 2px
Corners
Scale only, no full rounds
Type
Scale only, declared fonts only
purple gradient
Not allowed
emoji icons
Not allowed
nested cards
Flagged
glow shadows
Not allowed

07 / Guidance

What your agent reads.

Overview

Veranda is for places people stay: a guesthouse, a small hotel, a farm stay, a house to rent by the week. It should read like the card left on the bed: cream paper, slate ink, a tall quiet serif, and a little clay, sage and sand. Nothing hurries the guest.

Colors

  • Primary (#3D405B) is slate, for the one main action: "Check dates", "Request this room". In dark mode the main action is sand with slate text. Links are the text color, underlined.
  • Secondary (#F2CC8F) is sand, with ink on it, for every other button.
  • Tertiary (#81B29A) is sage, with ink on it, for one badge: "Sea view", "Breakfast included", "Two nights or more".
  • Clay (#E07A5F) fills one block on a page: an opening panel or the call to book. It is the same in both modes, and text on it is always ink (#2A2C40), in dark mode too.
  • Neutral (#5C5F78) sets dates, prices per night and captions.
  • Background (#F4F1DE) is cream. Surface (#FBFAF1) is a lighter cream for cards.
  • Error (#A63A24) is used only with a message.

Typography

Cormorant sets headings: a tall, fine serif at weight 500, set large with room around it. One phrase in a heading, or a guest's words, may be set in its italic. Never set it bold. Outfit sets body text at 16px, plain and round. Cutive Mono sets labels in uppercase with wide tracking, like the tag on a room key: dates, room names, prices, times of breakfast.

Layout

A 12-column grid, 1160px at its widest, with 24px gutters. Spacing comes from the scale (4, 8, 16, 24, 48, 104): 24px inside a card, 104px between sections. Pages are uneven on purpose: a picture of seven columns beside text of four, then the other way round. Sections are divided by space and one hairline.

Elevation & Depth

Flat. A card is a lighter cream with a 1px border and no shadow. Hairlines divide a list. Menus and dialogs float on one soft, warm shadow.

Shapes

Quiet: 2px for badges and checkboxes, 4px for buttons and inputs, 12px for cards, pictures and the clay block. Nothing is a pill or a circle.

Components

  • Buttons: slate for the one main action (sand in dark mode), sand for the rest (a lighter slate in dark mode). Uppercase typewriter labels.
  • Cards: lighter cream, 12px corners, 24px padding, a 1px border.
  • Badges: sage with ink text, one to three words, uppercase.
  • Room rows: a picture, the room's name in the heading font, three facts in labels, a price per night, one link.
  • Lists of times and prices: a name on the left, a dotted or plain hairline, the figure on the right in a label.
  • Icons: 1.5px stroke line icons, used sparingly. Never emoji.

Do's and Don'ts

  • Do use clay once on a page, for one block.
  • Do say prices per night, what is included and when to arrive plainly.
  • Do leave room: a heading has an empty column beside it.
  • Don't set Cormorant in bold, and don't set body text in it.
  • Don't count down, flash "only 1 left" or press the guest in any other way.
  • Don't use gradients, glows or a card inside a card.
  • Don't introduce a color, size or radius that is not a token above.