Cobalt Signal
#002fffViolet action color for filled buttons, selected navigation states, and focused conversion moments.
Analogue aF-1
af1.analogueshop.comWebsite preview
The design language
Analogue aF-1 speaks the visual language of a luxury editorial print magazine: stark white canvases, Garamond serif whispers for moments of meaning, and a single jolt of electric blue that only appears when a hand is asked to act. Surfaces are flat, defined by hairline borders and generous corner radii (20-30px) rather than shadows — depth comes from layering soft radial washes and full-bleed photography behind film-strip frames. The palette is almost fanatically achromatic; the blue is rationed like ink, reserved exclusively for the primary action and atmospheric product vignettes. Components feel like printed editorial spreads — confident negative space, confident typography, and no decoration that doesn't earn its place.
Color palette
brand
accent
Cobalt Mist
#00368cAtmospheric radial gradient anchor (mid-stop) for the hero blue vignette
neutral
Pure White
#ffffffPage canvas, card surfaces, button text on cobalt fill, heading text on dark sections
Graphite
#171717Primary body text, heading text, hairline borders, icon strokes — the workhorse near-black that carries UI structure
Carbon
#070707Deepest text, dark gradient anchor points, near-black accents where maximum contrast is needed
Ink
#000000Absolute black for borders, icons, and the film-strip frame effect — appears most in structural borders rather than type
Fog
#edededSoft card surface lift, input fields, subtle background differentiation from pure white canvas
Mist
#b9b9b9Light surface wash, disabled or decorative backgrounds
Dove
#c3c3c3Mid-neutral border for tertiary dividers
Iron
#696969Muted body copy, secondary borders, placeholder text — the dominant mid-gray carrying prose-level hierarchy
Typography
Type scale
Major Second (1.125) · 20px basetext-150
150px · 400 · 1.2The quick brown fox jumps
display
64px · 400 · 0.9 · -1.15px trackingThe quick brown fox jumps
heading-lg
40px · 400 · 1 · -0.88px trackingThe quick brown fox jumps
heading
34px · 400 · 1 · -1.02px trackingThe quick brown fox jumps
text-30
30px · 400 · 0.9The quick brown fox jumps
heading-sm
22px · 400 · 1.2 · -0.46px trackingThe quick brown fox jumps
text-17
17px · 400 · 1.2The quick brown fox jumps
text-16
16px · 400 · 0.85The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
ITC Garamond Std Light Narrow
- Weights
- 400
- Sizes
- 15px, 17px, 30px, 40px, 64px
- Line height
- 0.90, 1.20
- Letter spacing
- -0.018em at 64px, -0.022em at 40px, -0.023em at 30px, -0.017em at 17px, -0.017em at 15px
- Fallback
- EB Garamond, Cormorant Garamond, or Playfair Display (lighter weights)
Editorial serif — deployed for the brand-defining typographic moments: the 'Analogue aF-1' wordmark, the nostalgic pull-quote ('Remember when every shot was a moment to cherish?'), and section-level statements. Light weight at large sizes is deliberately anti-luxury-tech; a Garamond at 64px weight 400 whispers where most product pages shout with bold sans. Narrow variant tightens the serif into modern proportions.
Additional typeface
Graphik Medium
- Weights
- 400
- Sizes
- 11px, 13px, 14px, 15px, 16px, 22px, 34px, 40px, 150px
- Line height
- 0.85, 1.00, 1.20, 1.50
- Letter spacing
- -0.0670em, -0.0530em, -0.0450em, -0.0300em, -0.0250em, -0.0210em, -0.0200em
- Fallback
- Inter, Manrope, or DM Sans at weight 400
Geometric sans for all functional UI: navigation, buttons, input fields, captions, body labels, and the massive 150px display headline. Single weight (400) at every size creates a remarkably consistent voice — no bold/light toggle. The 150px instance is the 'af-1' hero display. Extremely tight tracking (-0.067em at the largest size) pushes the geometric forms into near-architectural density.
Additional typeface
sans-serif
- Weights
- 400
- Sizes
- 12px
- Line height
- 1.2
sans-serif — detected in extracted data but not described by AI
Spacing & shape
Spacing
- Density
- compact
- Max width
- 1200px
- Section gap
- 50px
- Card padding
- 20px
- Element gap
- 10px
Border radius
cards
20pxpills
100pximages
30pxinputs
15pxbuttons
10pxSpacing scale
2px3px4px5px10px11px14px15px19px20px24px25px29px30px40px50px60px100px115px132px200pxGuidelines
Do
- Use Garamond weight 400 at 40-64px for editorial moments — quotes, product names, section openers. This is the system's signature voice.
- Reserve #002fff exclusively for the single primary action on any given screen. Never use it for decoration, tags, or secondary buttons.
- Apply 20px radius to cards and 30px radius to product imagery. The rounded softness is a counterpoint to the stark black/white palette.
- Anchor sections with 50px vertical gaps and keep card padding at 20px. The compact density is intentional — the system breathes through whitespace, not through padding bloat.
- Use Graphik Medium at weight 400 exclusively. Do not introduce bold or light variants — the single-weight consistency is the design language.
- Frame full-bleed photography with the film-strip perforation motif when presenting analog/nostalgic imagery. The border IS the brand statement.
- Set letter-spacing at -0.018em or tighter for any display text above 30px. The tight tracking pushes geometric forms into architectural density.
Don’t
- Never apply #002fff to backgrounds, icons, or text — it is a button fill only. Decorative blue dilutes its power as the system's one action color.
- Do not introduce drop shadows. The system uses flat surfaces and hairline borders. The only shadow permitted is the inset white glow on inputs.
- Do not use bold weights on Garamond. The light weight is the point — bold Garamond breaks the editorial whisper into a shout.
- Never use corner radii below 10px for interactive elements. The rounded geometry is non-negotiable for the premium feel.
- Do not add gradients to UI components. Gradients appear only as atmospheric washes on full-bleed sections, never on buttons, cards, or inputs.
- Do not use warm colors, greens, oranges, or reds for any state. The system is achromatic + cobalt. If you need a success/error state, use the neutral scale (#171717, #696969).
- Do not use Garamond for functional UI text (buttons, labels, inputs). It is reserved for editorial moments. Graphik handles everything functional.
Components
Primary Action Button
The single most important interactive element — a filled cobalt blue pill that commands the visual hierarchyBackground: #002fff. Text: #ffffff, Graphik Medium 14px, weight 400. Padding: 10px 20px. Border-radius: 10px. No border, no shadow. This button is the system's one chromatic moment — use it sparingly, only for the singular ask per screen.
Ghost/Dismiss Button
Secondary negative action — opt-out companion to the primary CTABackground: transparent. Text: #171717, Graphik Medium 14px. Padding: 10px 20px. Border: 1px solid #ededed. Border-radius: 10px. On hover the border darkens to #171717.
Email Input Field
Signup form input for the hero newsletter captureBackground: #ffffff. Border: none. Placeholder text: #b9b9b9, Graphik Medium 14px. Padding: 15px 20px. Border-radius: 15px. The field visually merges with the adjacent button into a continuous pill. Inset white glow (rgba(255,255,255,0.15) 0px 0px 0px 1px inset) is the only shadow in the system.
Scroll Prompt Pill
Persistent floating CTA at the bottom of hero sectionsBackground: #ffffff with slight transparency/blur. Text: #696969, Graphik Medium 12px. Border-radius: 100px (full pill). Positioned center-bottom, indicates downward scroll.
Product Image Card
Showcase of the camera product at multiple anglesBackground: #ededed. Border-radius: 30px. No shadow, no border. Product render sits centered on the soft gray surface. The 30px radius gives the hardware a premium, almost pillowy presentation.
Pre-Order Action Card
Right-column purchase block in the product detail sectionRight-aligned text block: 'Pre-order now' heading (Graphik Medium 34px, #171717), subtitle, price (Graphik Medium 22px bold-weight, #171717). Contains the Primary Action Button (#002fff) and Ghost Dismiss Button. Below: small payment method text in #696969.
Testimonial Mini Card
Social proof — features a person and their handleSmall square card with rounded corners (20px), showing a portrait photo with name overlay in #ffffff serif. Compact, unobtrusive, positioned floating in the layout.
Film-Strip Full-Bleed Frame
Editorial photography section with analog film border treatmentFull-width image section. Left and right edges show a repeating film-perforation pattern in #000000, framing the central photograph. Central image: dark, moody editorial photography. Serif headline overlays the image center in #ffffff. The film-strip border is the signature visual motif — a literal reference to analog photography.
Hero Gradient Banner
Atmospheric product reveal at page topFull-bleed section with a radial blue-to-white gradient. Center text: 'Analogue aF-1' (Graphik Medium 150px, #ffffff) with subtitle in #ededed. The blue radiates from the center-bottom and fades to white at edges, creating a product-spotlight atmosphere. The camera render sits centered in the lower half.
Brand Wordmark
Top-center logo lockup'analogue' in Graphik Medium, lowercase, #000000. Small, precise, centered in the header. No tagline, no icon — the wordmark is the entire identity mark.
Language Selector
Top-right locale switcherCompact text control: globe icon + 'English' in Graphik Medium 12px, #171717. Subtle, right-aligned in header.
Press Logo Strip
Media mention band at section transitionHorizontal row of press logos (Techeblog, Camera, PetaPixel, etc.) in #696969 on a white band. Separated by vertical dividers in #ededed. Establishes editorial credibility.
Surfaces & elevation
Level 1
Canvas
#ffffffPrimary page background — dominant surface across all sections
Level 2
Fog Surface
#edededElevated card surface, input field backgrounds, subtle differentiation
Level 3
Blue Wash
#00368cAtmospheric radial gradient vignette in the hero — the only chromatic surface treatment
The system is intentionally flat. Elevation is communicated through surface color shifts (white → #ededed) and generous border-radius, never through shadows. The only shadow in the entire system is an inset white glow on input fields. This is a deliberate editorial-print aesthetic — like ink on paper, not like glass on glass.
Layout & imagery
Layout
Page is max-width 1200px centered. Hero is full-bleed with centered text and centered product render — symmetric, vertical stack. Second section is full-bleed with film-strip borders on edges, headline centered over image. Third section splits into a two-column layout: left column is a vertical stack of product detail cards (alternating image orientations, 20px radius), right column is a sticky-ish pre-order action card with text + CTA stack. A small floating testimonial card overlaps the product stack. The grid is asymmetric in the product section but symmetric in hero and editorial photo sections. Navigation is minimal: centered wordmark top, language selector top-right, no visible menu until scroll. Section rhythm: white → full-bleed dark image → white with 2-column product grid. Spacing is compact (50px section gaps) with generous internal padding around the hero gradient.
Imagery
The visual language is editorial photography with product renders. The hero features a high-fidelity 3D product render of the Analogue aF-1 camera on a soft blue radial wash — the product is presented dead-center, no lifestyle context, the object IS the hero. The second section is full-bleed dark editorial photography (couple on a beach at dusk) framed by a black film-strip perforation pattern on left and right edges — this is the signature motif, a literal analog film border. Lower sections show additional product renders at multiple angles (back, front, side) on soft #ededed card backgrounds. Photography treatment is moody, cinematic, low-key — warm skin tones against deep blue dusk. No stock-photo feel anywhere. Icons are minimal: a globe for language, no decorative iconography.
Design notes
Agent Guide
**Quick Color Reference** - Background: #ffffff - Surface: #ededed - Primary text: #171717 - Muted text: #696969 - Border/divider: #ededed - primary action: #002fff (filled action) **3-5 Example Component Prompts** 1. **Hero Section**: Full-bleed white canvas. Centered wordmark 'analogue' in Graphik Medium 14px, #000000. Headline 'Analogue aF-1' in Graphik Medium 150px, #ffffff, letter-spacing -10px, centered over a radial blue gradient (rgb(0,54,140) → rgb(0,79,206) → rgb(237,237,237)). Subtitle in Graphik Medium 14px, #ededed. Email input (#ffffff, 15px padding, 15px radius) inline with a primary action button (#002fff, 10px 20px padding, 10px radius, white text 'Stay tuned'). 2. **Film-Strip Editorial Section**: Full-bleed dark photograph with a black film-perforation pattern (sprocket holes) running vertically on left and right edges. Centered serif headline in #ffffff, ITC Garamond Std Light Narrow 40px, weight 400, letter-spacing -0.88px. Scroll prompt pill floating at bottom center (#ffffff background, 100px radius, 'Keep scrolling' in Graphik Medium 12px, #696969). 3. **Pre-Order Card**: Right-aligned block. Heading 'Pre-order now' in Graphik Medium 34px, #171717, letter-spacing -1.02px. Subtitle in Graphik Medium 14px, #696969. Price '€449.99' in Graphik Medium 22px, #171717. Primary button (#002fff fill, white text 'Pre-order now', 10px radius, 10px 20px padding). Ghost button below (transparent, #171717 border 1px, 'No Thanks', 10px radius). Payment note in Graphik Medium 11px, #696969. 4. **Product Detail Card**: Background #ededed, border-radius 30px, no shadow. Camera product render centered. No text inside the card. Cards stack vertically in the left column of a 2-column layout, with 50px gaps between them. 5. **Press Logo Strip**: White background band. Five logos in a horizontal row, separated by 1px vertical dividers in #ededed. Logo text in #696969, Graphik Medium 12px. Centered, max-width 1200px.
Similar brands
Leica Camera
Same editorial-print approach to a photography product — serif type, generous whitespace, minimal UI, and an almost religious devotion to the product as the hero image
Teenage Engineering
Stark black/white product pages with geometric sans-serif type and product renders on neutral gray card surfaces with generous border-radius
Aesop (aesop.com)
Editorial typography mixing serif and sans, generous negative space, an almost monochrome palette with minimal accent color, and confident asymmetric product presentations
Nothing (nothing.tech)
Product launch page with centered hero, dark editorial photography, and the same compact density + single-accent-color restraint
Arc Browser
Mixes a distinctive serif (in Arc's case, custom) with a clean geometric sans for functional UI, on near-monochrome canvases with one electric accent
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
