Design system
Everything this template is made of.
Colors, text styles and components used across Tabstop. When you or an AI agent add pages, reuse these instead of creating new ones, and the site stays consistent.
01 · Colors
One accent, quiet neutrals.
Use Accent only for primary actions, links and the active tab. Everything else is neutral.
Color/Background
#F4F4F0
Page and section backgrounds
Color/Surface
#FFFFFF
Cards, windows and inputs
Color/Chrome
#E6E6E1
Browser bars, tags, icon boxes
Color/Border
#D4D4CE
Dividers and 1px borders
Color/Text Primary
#111113
Headings, body on light, footer
Color/Text Muted
#6B6B70
Descriptions and labels
Color/Accent
#2F4BFF
Buttons, links, active states
Color/Text Muted on Dark
#9D9DA3
Secondary text in the footer
Color/Status Green
#16A34A
Availability dot and success
Color/Surface Dark
#1A1A1D
Cards inside dark sections
Color/Border Dark
#2C2C31
Borders and icon boxes on dark
02 · Typography
Geist for words, Geist Mono for data.
Sizes step down automatically on tablet and phone. Labels are always Geist Mono in uppercase.
Text/H1 Display
Geist 500 · 112 / 80 / 52 px · one per page (H1)
Worth keeping open.
Text/H2
Geist 500 · 60 / 48 / 36 px · section titles
Three ways to work with us.
Text/Statement
Geist 400 · 40 / 32 / 26 px · intros and quotes
We design in the browser and build in Framer.
Text/H3
Geist 500 · 24 / 22 / 20 px · cards and list titles
Launch site
Text/Lead
Geist 400 · 21 / 20 / 18 px · intro paragraphs
Most projects go live in four to six weeks.
Text/Body
Geist 400 · 17 px · descriptions, muted
A focused site for a new product, studio or campaign.
Text/Button
Geist 500 · 15 px · buttons, navigation, names
Start a project
Text/Mono
Geist Mono 400 · 14 px · URLs and data
example.com
Text/Mono Small
Geist Mono 400 · 13 px · tabs, dates, durations
Oct 28, 2026
Text/Label
Geist Mono 500 · 12 px · uppercase section labels
Selected work
Text/Article H2
Geist 500 · 28 px · headings inside CMS posts
What a mockup can’t show
Text/Article Body
Geist 400 · 18 px · paragraphs inside CMS posts
A mockup is a picture of one screen at one width.
03 · Components
Reuse these, don’t rebuild them.
Every button, status line, browser window and question on the site is an instance of one of these components.
Button
Primary for the main action on a screen, Secondary next to it. Set Label and Link on each instance. Hover and pressed states are built in.
Status Pill
Shows availability. Change the Status text in one place per page, for example when a slot is booked.
2 slots open for January
Browser Window
The signature element. One variant per project tab: jakoby.design, rydn.bike and yarrel.framer.website. Clicking a tab switches variant. Turn Window Controls off below 600 px.
FAQ Item
Closed (first) and Open (second). Tapping the row toggles the variant. Stack instances vertically with a flow effect so the list animates smoothly.
Answer
Navigation
Lives in the Main layout template, never on a page. Desktop on desktop and tablet, Phone on phone. The menu button switches between Phone and Phone Open.
Submit Button
Used as the submit button of forms. Default, Pending, Success and Error are switched automatically by the form state. The demo form has no destination: connect it to your email or a webhook in the form settings.
04 · Example sections
How the parts combine.
Copy these patterns when you add a page. Each one is built only from the styles and components above.
Section header with cards
Label, Text/H2 and an optional Accent link, then a 3-column grid of Surface cards with radius 12. On phone the grid becomes a vertical stack.
Services
Three ways to work with us.
Launch site
A focused site for a new product or campaign.
Website + CMS
A full marketing site your team can update.
Care plan
Monthly design and build time after launch.
Closing call to action
Centered Label, Text/H2 and one Primary Button. Use it as the last section before the footer, once per page.
05 · Layout rules
Small rules that keep pages consistent.
Spacing
Use 8, 16, 24, 40, 64, 96 or 160 px. Section padding is 96 px on desktop, 80 on tablet, 64 on phone.
Width
Content sits in a 1376 px wrapper with 32 px side padding (20 px on phone). Articles use 760 px.
Radius
12 px for cards and windows, 8 px for buttons and inputs, fully round for pills and avatars.
Browser frames
Screens are always 16:10. Show real screenshots or recordings of real sites, never drawn mockups.
Labels
Every section opens with a Label, then a Heading 2. Use one H1 per page in the Display style.
Motion
Keep transitions at 0.2 to 0.45 s with the same easing. Nothing should work only on hover.