Sherlocker Style Guide

Welcome to the Sherlocker component and design documentation.

This style guide documents the visual language and design tokens that make up the Sherlocker brand.

Overview

The Sherlocker website is built with:

Next.js 16 with App Router
React 19 for UI components
Tailwind CSS 4 for styling

Colors

The Sherlocker brand uses a warm orange palette for primary actions and calls-to-action, with neutral surfaces for content areas.

Click any color swatch to copy its hex code to your clipboard.

Brand Colors

Brand Primary

#F0A121

CTA buttons, primary actions

Brand Orange

#ff8307

Selection highlights, focus states

Brand Orange Dark

#e67606

Hover states, pressed states

Surface Colors

Surface Primary

#ffffff

Main backgrounds

Surface Secondary

#f6f4f1

Card backgrounds, alternating sections

Typography

Sherlocker uses the Geist font family from Vercel. Geist Sans is used for all UI text, while Geist Mono is used for code examples.

Display & Headings

H156px / 1.1 / -0.02em

The quick brown fox jumps over the lazy dog

H240px / 1.125 / -0.02em

The quick brown fox jumps over the lazy dog

H333px / 1.2 / -0.02em

The quick brown fox jumps over the lazy dog

H428px / 1.2

The quick brown fox jumps over the lazy dog

H520px / 1.3

The quick brown fox jumps over the lazy dog

H618px / 1.3

The quick brown fox jumps over the lazy dog

Body Text

Body Large17px / 1.4

The quick brown fox jumps over the lazy dog

Body Base16px / 1.4

The quick brown fox jumps over the lazy dog

Body Small15px / 1.4

The quick brown fox jumps over the lazy dog

Caption14px / 1.4

The quick brown fox jumps over the lazy dog

Tiny12px / 1.2

The quick brown fox jumps over the lazy dog

Spacing

Sherlocker uses a consistent spacing system based on the Container component. All content is constrained to a maximum width with responsive padding that adapts to viewport size.

Container

Name	Class	Value	Visual
Max Width Maximum content width for all pages	`max-w-7xl`	1280px (80rem)
Horizontal Padding Responsive padding that increases with viewport	`px-4 sm:px-6 lg:px-8`	16px / 24px / 32px
Horizontal Centering Centers the container within the viewport	`mx-auto`	auto

Section Spacing

Name	Class	Value	Visual
Vertical Padding Standard section padding (5rem / 7rem)	`py-20 md:py-28`	80px / 112px
Section Gap Default gap between section elements	`gap-4`	16px (1rem)

Component Spacing

Name	Class	Value	Visual
Margin Small Tight spacing between related elements	`mb-2`	8px (0.5rem)
Margin Medium Standard component margin	`mb-4`	16px (1rem)
Margin Large Generous spacing for visual separation	`mb-6`	24px (1.5rem)

Breakpoints

Sherlocker uses a mobile-first responsive design approach. The breakpoint system includes three custom breakpoints that differ from Tailwind defaults: xs (390px for small phones), md (810px for tablets), and 2xl (1440px for wide screens).

Breakpoint	Width	Prefix	Device / Usage
xscustom	390px	`xs:`	Small phones (iPhone SE)
sm	640px	`sm:`	Large phones
mdcustom	810px	`md:`	Tablets, small laptops
lg	1024px	`lg:`	Laptops, desktops
xl	1280px	`xl:`	Large desktops
2xlcustom	1440px	`2xl:`	Wide screens

Visual Scale

xs

390px

sm

640px

md

810px

lg

1024px

xl

1280px

2xl

1440px

Usage Guidelines

xs:Use for mobile-first refinements on small phones
md:Primary tablet breakpoint (custom - differs from Tailwind default 768px)
2xl:Matches Container max-width for full-width layouts

This style guide documents the Sherlocker design tokens. For component documentation, refer to the main website style guide.