Skip to content
StrictThemes

Themes / 20

Relay

A fast, loud theme for sports clubs, leagues and race days. White kit, navy bands, an amber main action, and scores set large.

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

01 / Preview

Stock shadcn components, this theme.

Relay

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 an amateur football club, with a scoreboard band that holds the last result and the next match, the latest news as a list, the top of the league table, the three kinds of membership and one main action to join.

    42.2k characters

    Strict Check 100%

    Preview the Home pageRead the prompt: Home

  • Fixtures

    A club's fixtures and results, with a control to choose the team, rows grouped by month that show a date, an opponent, a venue and a score or a kick-off time, the team's record, and one Live or Final badge.

    43.7k characters

    Strict Check 100%

    Preview the Fixtures pageRead the prompt: Fixtures

  • Table

    A league table of twelve clubs with played, won, drawn, lost, goals for and against, goal difference and points, a control for all, home or away matches that recalculates it, the club's own row marked, and a narrow layout that needs no sideways scrolling.

    43.2k characters

    Strict Check 100%

    Preview the Table pageRead the prompt: Table

  • Membership

    A page to join a sports club, with three kinds of membership to choose from as radio cards, a form for the new member's details, an emergency contact and consent that is checked in code, and a confirmation that replaces the form.

    44.2k characters

    Strict Check 100%

    Preview the Membership pageRead the prompt: Membership

  • Report

    A report of one football match, with a scoreboard band for the final score, a timeline of goals and cards, the report's text, the two line-ups side by side, and the match's figures as plain bars with each figure written beside its bar.

    45.9k characters

    Strict Check 100%

    Preview the Report pageRead the prompt: Report

03 / Colors

Every color the theme allows.

  • primary

    #FFB703

  • on-primary

    #023047

  • secondary

    #023047 / #8ECAE6

  • on-secondary

    #FFFFFF / #023047

  • tertiary

    #FB8500

  • on-tertiary

    #023047

  • neutral

    #3F6377 / #9CC7DB

  • background

    #F5FAFC / #011C2A

  • surface

    #FFFFFF / #023047

  • foreground

    #023047 / #EAF6FB

  • border

    #C5E1EE / #0E4A66

  • error

    #B3261E / #FF9B8A

  • ring

    #023047 / #FFB703

  • navy

    #023047

  • on-navy

    #FFFFFF

  • ice

    #8ECAE6

  • on-ice

    #023047

Left: light mode. Right: dark mode.

04 / Typography

Five sizes. Nothing in between.

  • display

    Saira · 64px · weight 800 · line 1

    The quick brown fox

  • h1

    Saira · 40px · weight 800 · line 1.1

    The quick brown fox

  • h2

    Saira · 24px · weight 700 · line 1.2

    The quick brown fox

  • body

    Rubik · 16px · weight 400 · line 1.55

    The quick brown fox

  • label

    Kode Mono · 13px · weight 500 · line 1.3

    The quick brown fox

05 / Shape and space

Corners and spacing.

  • sm

    3px

  • md

    6px

  • lg

    10px

  • xs

    4px

  • sm

    8px

  • md

    12px

  • lg

    20px

  • xl

    32px

  • 2xl

    72px

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 48px
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

Relay is for clubs and competitions: a football club, a running club, a league, a race day, a gym's timetable. It borrows from scoreboards and team kit: white, navy bands, and amber for the one thing to press. Scores and times are the largest things on a page.

Colors

  • Primary (#FFB703) is amber, with navy text on it, for the one main action: "Join the club", "Enter the race". It is the same in both modes. Amber is a fill: it is never a text or link color on a light page.
  • Secondary (#023047) is navy, with white text on it, for every other button. In dark mode the other buttons are ice blue with navy text.
  • Navy (#023047) fills bands: the header, a scoreboard, a table's head. A band is navy in both modes, its text is white, and a label on it is ice blue.
  • Tertiary (#FB8500) is orange, with navy text on it, for one badge: "Live", "Final", "Sold out".
  • Ice (#8ECAE6) fills quiet panels: the row of the club in a table, a marked fixture. Text on it is always navy (#023047), in dark mode too. On a navy band it is the color of labels.
  • Ring (#023047) is the focus outline: navy on a light page, amber in dark mode.
  • Neutral (#3F6377) sets dates, venues and captions.
  • Background (#F5FAFC) is kit white. Surface (#FFFFFF) is the white of a card.
  • Error (#B3261E) is used only with a message.

Typography

Saira sets headings in uppercase at weight 800: a squared sans from the side of a racing car. Scores and times are set in it too, large. Rubik sets body text at 16px. Kode Mono sets labels in uppercase: dates, kick-off times, venues, the heads of a table's columns. Figures in a table are tabular.

Layout

A 12-column grid, 1240px at its widest, with 20px gutters. Spacing comes from the scale (4, 8, 12, 20, 32, 72): 20px inside a card, 72px between sections. Pages are dense and squared up: rows of fixtures, a table, a scoreboard. The header is a navy band; one more navy band on a page holds the score or the next match.

Elevation & Depth

Flat. A card is white with a 1px border and no shadow. A scoreboard has the same 1px border, which is what sets it off in dark mode. Menus and dialogs float on one short, neutral shadow.

Shapes

Tight: 3px for badges and checkboxes, 6px for buttons and inputs, 10px for cards and bands. Club crests, avatars, status dots and switches are fully round.

Components

  • Buttons: amber with navy text for the one main action, navy for the rest (ice blue in dark mode). Uppercase mono labels.
  • Cards: white, 10px corners, 20px padding, a 1px border.
  • Badges: orange with navy text, one or two words, uppercase.
  • Scoreboard: a navy band with two names and two large figures; text on it is white, and a label on it is ice blue. It has a 1px border.
  • Tables: a navy head, hairlines between rows, figures right-aligned, the club's own row filled with ice blue.
  • Icons: 2px stroke line icons with square caps. Never emoji.

Do's and Don'ts

  • Do use amber once in view, on the main action. The focus outline in dark mode does not count.
  • Do set scores, times and positions large, in the heading font.
  • Do keep text on a navy band white and labels on it ice blue, in both modes.
  • Don't write in amber or orange on a light page, and don't use amber for a link.
  • Don't slant, outline or stretch the heading font, and don't use gradients or glows.
  • Don't put a card inside a card or a band inside a card.
  • Don't introduce a color, size or radius that is not a token above.