Signal Teal
#1dd8e1Primary action buttons, link text, product dial accents, active tab indicators — the only chromatic color in the entire system, carrying every interactive moment on its own
Blok
blokwatches.com
Website preview
The design language
Blok is a premium analog-watch brand that treats the product page like a gallery wall: generous white space, sharp-cornered cards, and typography that leans on wide tracking to feel considered rather than loud. A single vivid teal — #1dd8e1 — does all the accent work, threading through button strokes, text links, and product dial highlights, while the rest of the palette stays architectural in dark navy-blacks and warm off-whites. Headlines are set in a heavy, wide-tracked Jost that feels almost industrial-luxe, contrasted against the rounded Poppins used for body and UI. Layout is centered, max-width-contained, and product-first: a dark hero with organic teal shapes gives way to white product grids, a single light-gray press band, and flat-light product detail pages. Components are flat, hairline-bordered, and almost shadeless — confidence comes from type scale and spacing, not elevation.
Color palette
brand
neutral
Carbon Ink
#0a0d0fPrimary text, product page borders, body type — the near-black that carries the entire brand voice in type
Pure White
#ffffffPage canvas, product card surface, button text on dark — the base everything sits on
Slate Veil
#2e3438Secondary text and icon strokes — slightly cooler than Carbon Ink, used where pure black would feel too heavy
Onyx
#000000Body borders, heading text — the hardest black in the system, used sparingly for maximum edge definition
Bone
#f7f7f7Alternate section background, subtle card wash, press-logo band — the warm off-white that breaks up white-on-white without introducing a color
Footer Ash
#efefefFooter surface only — one step deeper than Bone to separate the footer from the body
Silver Mist
#d5d6d7Input borders, subtle dividers — hairline neutral that only shows on form elements
Graphite Tag
#656565Neutral form states, badge text, and quiet UI feedback where color should stay understated.
Typography
Type scale
Minor Third (1.2) · 17px basedisplay
68px · 600 · 1.2 · 6.12px trackingThe quick brown fox jumps
text-51
51px · 700 · 1.25The quick brown fox jumps
heading-lg
42px · 700 · 1.25 · 3.78px trackingThe quick brown fox jumps
heading
34px · 700 · 1.37 · 3.06px trackingThe quick brown fox jumps
text-25
25px · 400 · 1.38The quick brown fox jumps
heading-sm
24px · 400 · 1.38 · 0px trackingThe quick brown fox jumps
text-23
23px · 700 · 1.37The quick brown fox jumps
subheading
21px · 400 · 1.38 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Poppins
- Weights
- 400, 500
- Sizes
- 14px, 16px, 17px, 21px, 24px, 25px
- Line height
- 1.38-1.50
- Fallback
- Inter, DM Sans, Manrope
Body copy, product titles, button text, UI chrome — the rounded geometry contrasts with Jost's squared display weight, keeping the system from feeling monotone
Additional typeface
Jost
- Weights
- 700
- Sizes
- 23px, 34px, 42px, 51px
- Line height
- 1.25-1.38
- Letter spacing
- 0.09em
- Fallback
- Inter Tight, Montserrat, Archivo Black
- Features
- "ss01" on, "tnum" on
Display and section headlines — the wide 0.09em tracking turns bold weight into something architectural rather than shouty; treat as the only voice for H1/H2/page titles
Additional typeface
Cabin
- Weights
- 500, 600
- Sizes
- 12px, 14px, 17px, 20px, 21px, 68px
- Line height
- 1.00-1.63
- Letter spacing
- 0.064-0.09em
- Fallback
- Inter, Work Sans, Sora
Eyebrow labels, nav tabs, small section captions, badge text — the 0.064em-0.09em tracking at small sizes creates a 'label-grade' voice that sits above Poppins without dominating it
Additional typeface
GTStandard-M
- Weights
- 400
- Sizes
- 17px
- Line height
- 1.5
GTStandard-M — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- comfortable
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 10px
Border radius
tabs
3pxcards
3pxinputs
3pxbuttons
3pxbuttons-pill
100pxSpacing scale
1px2px3px4px5px6px8px9px10px11px12px15px16px20px24px30px36px50px56px57px72px74px76px113px166px189pxGuidelines
Do
- Use Signal Teal (#1dd8e1) exclusively for interactive moments — buttons, links, active tabs, star ratings — and let it carry 100% of the chromatic load.
- Set all display headlines in Jost 700 with 0.09em tracking; never use Poppins or Cabin for anything above 24px.
- Separate surfaces with hairline #0a0d0f borders or a #ffffff → #f7f7f7 tone shift; do not introduce box-shadows for elevation.
- Use uppercase Cabin 500-600 with 0.064-0.09em tracking for any label, eyebrow, or category text under 21px.
- Keep product cards borderless with 3px radius and 24px internal padding; let the product image do the visual work.
- Default page background to #ffffff; switch to #f7f7f7 for alternating sections like the press strip and product image containers.
- Center-align section headlines and product page titles; left-align only body copy and form content.
Don’t
- Don't add box-shadows to cards, buttons, or modals — the system is intentionally flat, separated by borders and tone.
- Don't introduce additional accent colors — every interactive element that isn't a neutral border or text should be Signal Teal.
- Don't use a second typeface for body copy; Poppins owns 400-500 across all UI and product descriptions.
- Don't round corners beyond 3px for cards/inputs or 100px for pill buttons — the system is mostly sharp with a few deliberate pills.
- Don't set body copy or UI text in uppercase; reserve letter-spacing for Cabin labels and Jost headlines only.
- Don't place teal text on teal backgrounds, or teal buttons on the Bone (#f7f7f7) footer — contrast is built on white canvas + dark ink.
- Don't crowd sections; sectionGap should never drop below 64px even on dense product pages.
Components
Teal Filled Button
Primary call-to-action for product discoverySolid #1dd8e1 background, Carbon Ink (#0a0d0f) text, Poppins 500 at 14-16px, 3px corner radius, 12px vertical and 24px horizontal padding. No shadow. Used sparingly — the teal is precious, reserve for high-intent moments.
Outlined Teal Button
Primary action on product detail pages (Add to Cart)Transparent background, 1px Signal Teal (#1dd8e1) border, Signal Teal text, Poppins 500, 3px radius, 12px vertical / 24px horizontal padding. Often paired with a fully filled Shop Pay button below it, so this outlined variant carries the brand color while letting the third-party button dominate the visual weight.
Ghost Text Button
Secondary navigation actions like 'Find Your Blok' in the heroWhite or Carbon Ink text, 1px border in the same color, Poppins 500 at 12-14px, wide letter-spacing (0.064em), 3px radius. Reads as a quiet outlined rectangle.
Product Card
Individual watch tile in the collection gridWhite (#ffffff) surface, 3px corner radius, no border, no shadow. Product image sits centered with 24px internal padding. Below the image: product name in Poppins 500 (e.g. 'Blok 33 — Aqua'), price in Poppins 400, optional 'Sold Out' badge in the top-right corner.
Sold Out Badge
Status indicator for unavailable productsLight neutral background, Graphite Tag (#656565) text in Cabin 500, 3px radius, 5-6px vertical / 10px horizontal padding. Small and quiet — never screams.
Collection Tab Bar
Switch between product lines (BK33, BK38, Bundles, Straps)Horizontal row of text tabs in Cabin 500-600, 12-14px, letter-spacing 0.09em, uppercase. Active tab is underlined or colored in Signal Teal; inactive tabs are Carbon Ink. No background fill, no border — separation comes from spacing alone.
Hero Section
Above-the-fold brand statement with featured watchFull-bleed dark background (Carbon Ink #0a0d0f with large organic teal shapes as decorative blobs in Signal Teal at low opacity). Headline in Jost 700, 42-68px, white text, letter-spacing 0.09em. Subhead in Poppins 400 white. Ghost text CTA button bottom-right.
Press Logo Strip
Social proof band of media outletsBone (#f7f7f7) background band, single row of monochrome black wordmarks (Esquire, WSJ, NYT, Cool Hunting, Gear Patrol, Financial Times, Hodinkee). Logos sit at uniform height, separated by 40-60px horizontal gaps. No labels, no borders — just logos on a gray strip.
Quantity Selector
Number stepper on product detailOutlined rectangle in Carbon Ink (#0a0d0f), 1px border, 3px radius. Contains a '−' button, current quantity number in Poppins, and a '+' button. No fill, no background color.
Star Rating Display
Product review indicatorSmall inline component showing filled stars in Signal Teal (#1dd8e1) and a numeric rating (e.g. '5.0') in Poppins 400, Carbon Ink. Stars are 12-14px, flat geometry, no outline.
Product Detail Gallery
Large product image with light backgroundLight neutral (#f7f7f7 or #ffffff) background, 3px radius around the image container, 24-40px internal padding. Product image sits centered with generous breathing room — the product is the hero of its own page.
Section Headline Block
Centered intro text for content sectionsCentered stack: eyebrow caption in Cabin 500 with 0.09em tracking, then headline in Jost 700, then subhead in Poppins 400 Carbon Ink. No decorative rules or dividers — whitespace is the separator.
Shop Pay Button
Third-party express checkoutFilled #5a31f4 (Shopify purple) background, white text, Poppins 500, 3px radius, 12px vertical / 24px horizontal padding. Sits directly below the outlined Add to Cart button, occupying full width.
Navigation Header
Top-level site navigationWhite background, Carbon Ink text, hamburger menu icon left, 'blok' wordmark center, bag icon right. Minimal — no underline, no background highlight, no nested menus visible at rest.
Surfaces & elevation
Level 0
Canvas
#ffffffPage background, default surface
Level 1
Band
#f7f7f7Press logos strip, alternating section
Level 2
Footer
#efefefFooter base
The system deliberately avoids shadows — surfaces are separated by hairline borders in Carbon Ink (#0a0d0f) and tone shifts between #ffffff and #f7f7f7. Elevation is expressed through content layering, not depth, giving the product catalog a flat editorial-magazine feel.
Layout & imagery
Layout
Max-width 1200px centered container drives all content; the hero is the only full-bleed element, expanding edge-to-edge with a dark Carbon Ink background. Below the hero, the layout is a vertical stack of white sections separated by generous 80px gaps. Product grids use a 4-column layout on desktop, collapsing to 2 on tablet and 1 on mobile. Product detail pages use a 2-column split: large product image left (50-55% width), purchase controls and description right. Navigation is a minimal top bar with hamburger left, wordmark center, bag icon right — no mega-menu, no sidebar. Press logos sit in a single full-width band. The footer is a single low-contrast #efefef block at the very bottom.
Imagery
Product photography is the dominant visual — tight, centered shots of watches on pure white or light gray backgrounds, no lifestyle context, no models, no environment. The hero image is composited with large organic teal shape-blobs behind the watch, creating a liquid editorial feel without literal gradients. Press logos appear as flat monochrome wordmarks. No illustrations, no 3D renders, no stock photography beyond the product itself — the catalog reads as gallery-style product shots where the watch IS the visual.
Design notes
Agent Guide
Quick Color Reference: - text: #0a0d0f (Carbon Ink) - background: #ffffff (Pure White) - border: #0a0d0f (Carbon Ink, 1px hairline) - accent: #1dd8e1 (Signal Teal) - primary action: #1dd8e1 (filled action) - surface alt: #f7f7f7 (Bone) 3-5 Example Component Prompts: 1. Build a product card: white #ffffff background, 3px corner radius, no border, no shadow. 24px internal padding. Watch image centered filling the top 70% of the card. Below: 'Blok 33 — Aqua' in Poppins 500 16px #0a0d0f, then '$189.00' in Poppins 400 14px #2e3438. 2. Build a collection tab bar: horizontal row centered, items 'BK33 | BK38 | BUNDLES | STRAPS' in Cabin 600 12px uppercase, letter-spacing 0.09em, color #0a0d0f. Active tab underlined with a 2px line in #1dd8e1, all other tabs have no underline. No background fill, no borders. 3. Build a hero section: full-bleed #0a0d0f background with a large organic teal blob shape in #1dd8e1 at 30% opacity behind the right side. Headline 'TAKE BACK TIME' in Jost 700 68px #ffffff, letter-spacing 0.09em, centered. Subhead 'An analog watch for the modern world.' in Poppins 400 17px #ffffff below. Ghost CTA 'FIND YOUR BLOK' bottom-right, 1px white border, white text, Poppins 500 12px, 3px radius, 12px/24px padding. 4. Build an Add to Cart button row: full-width outlined button, 1px #1dd8e1 border, transparent background, text 'ADD TO CART $495.00' in Poppins 500 14px #1dd8e1, 3px radius, 12px vertical / 24px horizontal padding. Directly below it, a full-width filled #5a31f4 button with white text 'Buy with shop' in Poppins 500 14px, same radius and padding. 5. Build a press logo strip: full-width band, #f7f7f7 background, 60px vertical padding. Single horizontal row of monochrome black wordmarks (Esquire, WSJ, The New York Times, Cool Hunting, Gear Patrol, Financial Times, Hodinkee) evenly distributed with 50px gaps, all at uniform 28px height, no captions.
Type System Philosophy
Three-font system with clear role separation: Jost 700 is the showpiece — reserved for headlines 23px+, its 0.09em tracking transforms bold weight from loud to architectural. Cabin 500-600 is the label voice — uppercase + 0.064-0.09em tracking at small sizes creates a 'curated' feel for tabs, eyebrows, and badges. Poppins 400-500 does all body and UI work — its rounded geometry deliberately contrasts with Jost's squared display, keeping the system from feeling monotone. Never blur the lines: a Jost headline in a 17px label role is a category error.
Similar brands
MVMT Watches
Same flat editorial product grid, hairline-separated cards, and a single bold accent carrying all interactive moments
Daniel Wellington
Same wide-tracked uppercase category labels, centered minimal navigation, and product-first hero with generous white space
Bell & Ross
Same architectural confidence in type — bold uppercase headlines against clean white product pages, industrial-luxe tone
Studio Proper
Same three-typeface system mixing a heavy display sans with a lighter geometric body, and flat 3px-radius product cards
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
