Skip to content
StrictThemes

Themes / 19

Tideline

A sunny, sturdy theme for surf schools, outdoor centres and the coast. Sand paper, deep-sea ink, and lagoon, sun and coral in flat blocks.

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

01 / Preview

Stock shadcn components, this theme.

Tideline

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 surf school, with an opening block of color and one action to book, today's conditions as a strip of labelled figures, three lessons with their prices, and where to find the school.

    44.7k characters

    Strict Check 100%

    Preview the Home pageRead the prompt: Home

  • Lessons

    The lessons and prices of a surf school, with three lesson cards that give the level, the length, the group size, the price and what is included, a table of kit hire prices, and a few questions and answers.

    45.6k characters

    Strict Check 100%

    Preview the Lessons pageRead the prompt: Lessons

  • Forecast

    The surf forecast of a surf school, with a control to choose one of five days, that day's conditions as large figures on a block of color, its tide table, and a five-day table of swell, wind and a rating in words.

    48.6k characters

    Strict Check 100%

    Preview the Forecast pageRead the prompt: Forecast

  • Book a lesson

    The booking form of a surf school, with a lesson, a date, the number of people, their ability, a name, an email, a phone number and a note, checked in code, a summary beside it whose total follows the choices, and a confirmation that replaces the form.

    47.3k characters

    Strict Check 100%

    Preview the Book a lesson pageRead the prompt: Book a lesson

  • Beach guide

    A long read about one beach by a surf school, with a list of facts to plan by (parking, lifeguards, the best state of tide, hazards), five sections with headings, one block of color holding a safety tip, and links to two other guides.

    46.5k characters

    Strict Check 100%

    Preview the Beach guide pageRead the prompt: Beach guide

03 / Colors

Every color the theme allows.

  • primary

    #264653 / #E9C46A

  • on-primary

    #FFFFFF / #12262D

  • secondary

    #E9C46A / #FBF5E6

  • on-secondary

    #12262D

  • tertiary

    #F4A261

  • on-tertiary

    #12262D

  • neutral

    #4F6770 / #A9BEC4

  • background

    #FBF5E6 / #12262D

  • surface

    #FFFFFF / #1B3640

  • foreground

    #12262D / #FBF5E6

  • border

    #E3D9BF / #2F5360

  • error

    #B3261E / #FF9B8A

  • lagoon

    #2A9D8F

  • on-lagoon

    #12262D

  • coral

    #E76F51

  • on-coral

    #12262D

Left: light mode. Right: dark mode.

04 / Typography

Five sizes. Nothing in between.

  • display

    Epilogue · 60px · weight 800 · line 1

    The quick brown fox

  • h1

    Epilogue · 40px · weight 800 · line 1.1

    The quick brown fox

  • h2

    Epilogue · 24px · weight 700 · line 1.2

    The quick brown fox

  • body

    Manrope · 17px · weight 400 · line 1.6

    The quick brown fox

  • label

    Geist Mono · 13px · weight 500 · line 1.3

    The quick brown fox

05 / Shape and space

Corners and spacing.

  • sm

    6px

  • md

    12px

  • lg

    20px

  • xs

    4px

  • sm

    8px

  • md

    16px

  • lg

    24px

  • xl

    40px

  • 2xl

    96px

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, full rounds up to 64px
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

Tideline is for businesses that work outdoors and by the water: a surf school, a sailing club, a campsite, a kayak hire, a coastal walk. It should feel like a painted sign on a beach hut: sand, deep-sea ink, and flat blocks of lagoon green, sun yellow and coral. The colors are fills. Everything that has to be read is ink.

Colors

  • Primary (#264653) is deep-sea charcoal, for the one main action: "Book a lesson", "Check the forecast". In dark mode the main action is sun yellow with ink text. Links are the text color, underlined.
  • Secondary (#E9C46A) is sun yellow, with ink on it, for every other button.
  • Tertiary (#F4A261) is warm orange, with ink on it, for one badge: "Beginners", "Low tide", "Few places left".
  • Lagoon (#2A9D8F) and coral (#E76F51) fill large blocks: an opening, a conditions strip, a section band. They are the same in both modes, and text on them is always ink (#12262D), in dark mode too, never the mode's text color.
  • Neutral (#4F6770) sets times, heights, distances and captions.
  • Background (#FBF5E6) is sand. Surface (#FFFFFF) is the white of a card.
  • Error (#B3261E) is used only with a message.

Typography

Epilogue sets headings at weight 800: a wide, sturdy grotesque that reads from across a car park. Keep headings short and set them tight. Manrope sets body text at 17px. Geist Mono sets labels in uppercase with a little tracking: tide times, wave heights, wind, prices, ages. Figures in a table are tabular.

Layout

A 12-column grid, 1200px at its widest, with 24px gutters. Spacing comes from the scale (4, 8, 16, 24, 40, 96): 24px inside a card, 96px between sections. A page opens on one block of color that runs the width of the container. Blocks of color alternate with sand; two blocks never touch.

Elevation & Depth

Flat, like paint. A card is white on sand with a 1px border and no shadow. A block of color has no border. Menus and dialogs float on one short, neutral shadow.

Shapes

Rounded like worn wood: 6px for badges and checkboxes, 12px for buttons and inputs, 20px for cards and color blocks. Avatars and switches are fully round.

Components

  • Buttons: charcoal for the one main action (sun yellow in dark mode), sun yellow for the rest (sand in dark mode). Uppercase mono labels.
  • Cards: white, 20px corners, 24px padding, a 1px border.
  • Badges: orange with ink text, one or two words.
  • Color blocks: lagoon or coral, 20px corners, ink text, one heading and a few facts.
  • Conditions: a row of facts, each a label over a large figure: tide, swell, wind, water.
  • Icons: 2px stroke line icons with round caps. Never emoji.

Do's and Don'ts

  • Do keep text in ink: lagoon and coral are fills, never text colors.
  • Do keep buttons, links and fields on sand or white: a color block holds text only.
  • Do use one color per block, and sand between blocks.
  • Do give the facts a visitor plans by (time, place, price, what to bring) plainly.
  • Don't draw waves, suns or palm trees in code, and don't use gradients or glows.
  • Don't put a color block inside a card or a card inside a card.
  • Don't introduce a color, size or radius that is not a token above.