Skip to content
StrictThemes

Themes / 01

Strict One

A disciplined, Swiss-grid editorial theme. One accent, hard edges, no decoration.

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

01 / Preview

Stock shadcn components, this theme.

Strict One

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.

  • Landing page

    A marketing landing page for a software product, from header to footer.

    18.9k characters · Run 4 times in Claude Code

    View

  • Pricing page

    A pricing page with three plans, a monthly and yearly switch, a comparison table and a FAQ.

    20.6k characters · Run 2 times in Claude Code

    View

  • Article page

    A long-form article or blog post page built for reading, with a table of contents.

    20.0k characters · Run 2 times in Claude Code

    View

  • Documentation page

    A documentation page with a sidebar, the content, and an "on this page" list.

    20.3k characters · Run 2 times in Claude Code

    View

  • Dashboard

    The overview screen of a web app, with navigation, key numbers, a chart and a table.

    20.9k characters · Run 4 times in Claude Code

    View

03 / Colors

Every color the theme allows.

  • primary

    #1F3BFF / #8091FF

  • on-primary

    #FFFFFF / #0B0B0C

  • secondary

    #111111 / #F5F5F4

  • on-secondary

    #FFFFFF / #111111

  • tertiary

    #FF4F00

  • on-tertiary

    #111111

  • neutral

    #6B6B6B / #A3A3A0

  • background

    #FFFFFF / #0B0B0C

  • surface

    #F5F5F4 / #161618

  • foreground

    #111111 / #F5F5F4

  • border

    #E2E2E0 / #2A2A2E

  • error

    #C62828 / #FF6B5E

Left: light mode. Right: dark mode.

04 / Typography

Five sizes. Nothing in between.

  • display

    Archivo · 56px · weight 700 · line 1.05

    The quick brown fox

  • h1

    Archivo · 36px · weight 700 · line 1.15

    The quick brown fox

  • h2

    Archivo · 24px · weight 600 · line 1.25

    The quick brown fox

  • body

    IBM Plex Sans · 16px · weight 400 · line 1.6

    The quick brown fox

  • label

    IBM Plex Mono · 12px · weight 500 · line 1.3

    The quick brown fox

05 / Shape and space

Corners and spacing.

  • none

    0

  • sm

    2px

  • md

    4px

  • xs

    4px

  • sm

    8px

  • md

    16px

  • lg

    32px

  • xl

    64px

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
Corners
Scale only
Type
Scale only, declared fonts only
purple gradient
Not allowed
emoji icons
Not allowed
nested cards
Flagged
glow shadows
Flagged

07 / Guidance

What your agent reads.

Overview

Strict One is an editorial theme built on a visible grid. It reads like a well-set printed page: generous whitespace, strong type contrast, and a single saturated blue used only where the reader should act. Nothing is decorative. If an element does not carry content or structure, remove it.

Colors

  • Primary (#1F3BFF) is for the one main action on a screen and for links. Never use it for large fills or backgrounds.
  • Secondary (#111111) is ink: headings, secondary buttons, rules.
  • Tertiary (#FF4F00) is a signal color for badges and status only. At most one per view.
  • Neutral (#6B6B6B) is for captions and metadata.
  • Background / Surface are flat. No gradients, no tints of primary.
  • Error (#C62828) is reserved for validation and destructive actions.

Typography

Archivo sets headings, tight and heavy. IBM Plex Sans sets body text at 16px with a 1.6 line height and a measure of 60–75 characters. IBM Plex Mono sets labels in uppercase with wide tracking. Use only the five sizes defined above; hierarchy comes from size and weight, never from color.

Layout

A 12-column grid with 32px gutters and a 1200px maximum width. All spacing comes from the scale (4, 8, 16, 32, 64). Align everything to the grid's left edge; centered layouts are the exception, not the default. Separate sections with whitespace or a 1px border, not with boxes.

Elevation & Depth

Flat. There are no shadows and no blur. Layers are separated by a 1px border in the border color or by a change from background to surface.

Shapes

Corners are square or nearly so: 0 for badges and images, 2px for controls, 4px for cards. Nothing is pill-shaped or circular except avatars.

Components

  • Buttons: one primary button per view. Labels are uppercase mono, 12px.
  • Cards: surface fill, 32px padding, no shadow. Never nest a card inside a card.
  • Badges: square, tertiary fill, used sparingly.
  • Icons: 1.5px stroke line icons. Never emoji.

Do's and Don'ts

  • Do keep one accent color per screen.
  • Do let whitespace separate content.
  • Don't use gradients, glows, glassmorphism or drop shadows.
  • Don't use emoji as icons or bullets.
  • Don't introduce a color, size or radius that is not a token above.