Obsidian
#000000Page background, card surfaces, primary canvas — the default stage for all content
Guglieri
guglieri.com
Website preview
The design language
Guglieri is a monochrome typographic gallery: pure obsidian canvas, one voice of custom variable display type at its heaviest weight, and zero chromatic noise. The entire system is achromatic — every interface element, border, and label lives on a grayscale between true black and pure white, with the only color in the experience coming from editorial imagery and artwork. Hierarchy is built through weight, size, and negative letter-spacing rather than color, with the custom Raveo Variable font pushing to weight 1000 to create visual mass without warmth. Components are stripped to their skeletons: pill buttons with hairline borders, generous section spacing, and text-driven navigation. The mood is a designer-critic's reading room — confident, editorial, anti-decorative.
Color palette
neutral
Paper White
#ffffffPrimary text, pill button fills, display headlines on dark, thin borders for reverse-contrast components
Carbon
#111111Input fields, secondary surface elevation, subtle dark borders — one shade above Obsidian for depth without contrast
Graphite
#1c1c1cElevated surface layer above the canvas — for overlay cards, tooltips, and floating panels
Smoke
#454545Headline accent borders, secondary text, low-emphasis dividers
Ash
#575757Body-level borders, inactive dividers, low-contrast separators between sections
Near Black
#050505Subtle hairlines and body borders that are nearly invisible against Obsidian
Typography
Type scale
Minor Third (1.2) · 12px basedisplay
64px · 1000 · 1 · -2.56px trackingThe quick brown fox jumps
heading-sm
32px · 1000 · 1.06The quick brown fox jumps
body
22px · 1000 · 1.18 · -0.44px trackingThe quick brown fox jumps
body-sm
14px · 1000 · 1.2The quick brown fox jumps
caption
12px · 400 · 1.2 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Arial
- Weights
- 400
- Sizes
- 14px
- Line height
- 1.2
Arial — detected in extracted data but not described by AI
Additional typeface
Raveo Variable Variable
- Weights
- 1000
- Sizes
- 12px, 14px, 22px, 32px, 64px
- Line height
- 1.00, 1.06, 1.18, 1.20, 1.60
- Letter spacing
- -0.04em at 64px, -0.02em at 22px, normal at 12px
- Fallback
- Inter (weight 900) or Manrope (weight 800)
- Features
- 'blwf', 'cv03', 'cv04', 'cv09', 'cv11'
Display and heading font at its heaviest weight (1000). The variable axis is not used — the system commits to maximum weight to create typographic mass without chromatic weight. Sizes scale from 64px display down to 12px micro-labels (e.g., nav items 'NEW', 'Feed'). Letter-spacing tightens aggressively at large sizes (-0.04em at 64px, -0.02em at 22px) to lock the glyphs into a single visual block. Font features 'blwf', 'cv03', 'cv04', 'cv09', 'cv11' activate specific stylistic alternates — a signature typographic fingerprint. No web-safe substitute captures this; 'Inter' at weight 900 is the closest match, but weight and openness will differ.
Additional typeface
System Sans-Serif
- Weights
- 400
- Sizes
- 12px
- Line height
- 1.20
- Fallback
- system-ui, -apple-system, 'Segoe UI', Roboto
Secondary utility text — nav links, metadata, timestamps, captions. Weight 400 only; no bold variants. The system font acts as a quiet complement to Raveo's display voice.
Additional typeface
Inter Display
- Weights
- 400
- Sizes
- 22px
- Line height
- 1.18
- Fallback
- Inter
One-off paragraph text at 22px — lighter weight than Raveo at the same size creates a body/heading tension within the same line height
Spacing & shape
Spacing
- Density
- compact
- Max width
- 1200px
- Section gap
- 116px
- Card padding
- 40px
- Element gap
- 10px
Border radius
cards
4pxlinks
8pxpills
50pxbuttons
40pxSpacing scale
4px8px10px12px14px16px24px40px116pxGuidelines
Do
- Use Raveo Variable at weight 1000 for all headings and display text — never reduce to 700 or below; the heaviness is the signature
- Set letter-spacing to -0.04em on 64px display text and -0.02em on 22-32px headings; let it breathe to 0 at 12px micro-labels
- Maintain 0% colorfulness: every UI color must be achromatic. Never introduce a brand hue, accent, or state color
- Use the 116px section gap between major content blocks; this generosity is what makes the page feel like a gallery, not a feed
- Set pill buttons to 40-50px border-radius so they read as fully rounded, not as rounded rectangles
- Place carousel pagination dots right-aligned directly under the display headline, spaced 10px apart
- Activate the font features 'blwf', 'cv03', 'cv04', 'cv09', 'cv11' on every Raveo Variable instance — they are part of the typographic identity
Don’t
- Never introduce color — no blues, no greens, no warm tones. The only color allowed is grayscale and the hues within editorial imagery
- Never set Raveo Variable below weight 1000; lighter weights break the heavy typographic voice
- Never use a standard sans-serif for display text; Raveo's compressed, heavy form factor is the entire brand
- Never add drop shadows, glows, or gradients — the system is flat by intent; depth comes from grayscale layering only
- Never center body text — left-align everything except display headlines; the asymmetric grid is the layout voice
- Never pad buttons less than 40px horizontally; pill shapes need space to read as pills, not chips
- Never use icons in the nav row; nav items are heavy type only. The icon language is reserved for buttons and cursors
Components
Pill CTA Button
Primary action trigger — the only filled button in the system40px border-radius (full pill), 40px horizontal padding, ~28px vertical padding. White background (#ffffff) with a black arrow icon. No text label — the arrow IS the affordance. Hairline 1px border optional. Used for carousel next, send, go.
Outline Pill Button
Secondary action with ghost treatment40-50px border-radius, white 1px border on Obsidian background, transparent fill. Arrow or dot inside. Inverts the primary pill: same shape, no fill.
Top Navigation Bar
Primary site navigationHorizontal row, 8px element gap, 12px vertical padding. Brand block (name + local time) left, nav links right. Nav items in Raveo Variable at 12px weight 1000, tracking normal. Active item ('NEW') uses Paper White; inactive items use Ash (#575757) with 1px borders forming underline-style separators.
Display Headline
Section and page titlesRaveo Variable at 64px, weight 1000, line-height 1.0, letter-spacing -0.04em. Always Paper White on Obsidian. Two-line max. This is the loudest element on every page — it carries the brand voice alone.
Carousel Pagination Dots
Indicates position within a horizontal scroll gallerySequence of short horizontal lines (16-20px wide, 2-3px tall), Ash (#575757) inactive, Paper White active. Right-aligned under display headline. Spacing 10px between dots.
Section Transition Label
Bridge between content blocks ('Next — About')Raveo Variable at 64px, weight 1000. Word 'Next' in Ash (#575757) at reduced opacity, dash separator, section name in Paper White. Sits at the leading edge of a full-bleed image or new section.
Footer Link Block
Social and contact links in the page footerTwo-column layout. Left column: intro text + email address in Raveo at 14-22px, weight 1000, Paper White. Right column: stacked social links (Twitter, Instagram, LinkedIn) at 32px Raveo weight 1000, no underlines, no bullets — just stacked heavy type.
Brand Header
Identity lockup in the top-left cornerTwo lines: 'Claudio Guglieri' in Raveo Variable 14px weight 1000 Paper White, with 'Local time — HH:MM City' beneath in system sans-serif 12px weight 400 Ash. No logo mark — the name IS the mark.
Bordered Link
Inline text links with border underlines8px border-radius on hover or focus. Text in Paper White, 1px Ash border as underline. 8px padding on tap target.
Image Gallery Card
Container for editorial imagery in carousel or gridNo card surface — images float on Obsidian with 40px between cards. Optional 4px radius on individual images. Images are the content; no shadow, no border, no background plate.
Surfaces & elevation
Level 0
Obsidian
#000000Page canvas — the base floor for all content
Level 1
Carbon
#111111Input fields and subtle elevation — one shade above the canvas for form surfaces
Level 2
Graphite
#1c1c1cFloating panels, overlay cards, tooltips — two shades above the canvas
Level 3
Paper White
#ffffffInverted surface for filled pill buttons and the rare reverse-contrast element
The system is intentionally flat. No drop shadows, no glows, no gradients. Depth is implied by grayscale layering (Obsidian canvas → Carbon form surface → Graphite overlay) and by spacing alone. This flatness is the signature: every pixel of visual weight goes into typography, not into chrome.
Layout & imagery
Layout
Full-bleed dark page with max-width 1200px content container. Hero is a single display headline right-aligned beside a left-aligned image gallery, with carousel controls beneath the headline. Sections are separated by 116px vertical gaps with no dividers or alternating bands — the rhythm comes from spacing alone. The footer is a two-column block: left column is contact text, right column is stacked social links in heavy type, both on the same Obsidian surface. Navigation is a sticky top bar with brand left and nav right. Content sections use asymmetric compositions (text-right/image-left, or full-bleed image with overlay type) rather than centered stacks. The 'Next — Section' transition pattern is a recurring device: a large display label in mixed gray and white at the leading edge of the next section.
Imagery
Imagery is editorial and high-contrast: black-and-white photography of working environments (desks, monitors, rooms) anchors content sections, while colorful 3D cursor renderings and graphic illustrations punctuate the hero — these are the only chromatic elements on the page, and they function as artwork within an otherwise monochrome frame. Images float on Obsidian with no borders or shadows; they are edge-to-edge or generous-margined, never thumbnail-sized. No icons in the UI itself — interaction symbols are reserved for buttons. Icon style in any UI context: none; the system relies on type and arrows. Photography treatment is documentary and candid (B&W, no color grading, no vignettes). The visual density is low: a few large images per page, each given room to breathe.
Design notes
Agent Guide
**Quick Color Reference** - background: #000000 - surface: #111111 - elevated surface: #1c1c1c - text: #ffffff - border: #575757 - accent: none - primary action: no distinct CTA color **Example Component Prompts** 1. **Display headline block**: 64px Raveo Variable weight 1000, color #ffffff, line-height 1.0, letter-spacing -2.56px. Right-aligned within a 1200px max-width container. Sits on #000000 canvas with 116px space above and below. 2. **Pill navigation button**: 12px Raveo Variable weight 1000, text #ffffff (active) or #575757 (inactive). No background, no border. 8px gap between items, 12px vertical padding. Horizontal row, left-aligned brand / right-aligned nav. 3. **Footer social link stack**: 32px Raveo Variable weight 1000, color #ffffff, line-height 1.06, letter-spacing -0.64px. Three items stacked vertically with 0px gap between them. No bullets, no underlines, no icons. Left-aligned in a two-column footer layout. 4. **Section transition label**: 64px Raveo Variable weight 1000. First word in #575757, em-dash, second word in #ffffff. Left-aligned, 1200px max-width, sitting at the top edge of a full-bleed B&W image section. 5. **Carousel pagination**: Five short horizontal bars (18px wide, 2px tall), spaced 10px apart, right-aligned. Bars 1-4 in #575757, bar 5 (current) in #ffffff. Sits 24px below the display headline.
Similar brands
Are.na
Same ultra-minimal dark canvas with no chrome, left-aligned typographic navigation, and editorial image blocks floating on a near-black surface
Rauno Freiberg
Personal portfolio with monochrome palette, custom variable display type, and large negative-tracked headlines as the primary brand element
Vercel Design
Pure black background, system sans-serif body, and one display weight carrying all hierarchy — minimal UI lets the type do the work
Minimal Gallery (independent designers)
Treats the personal site as a gallery wall — generous spacing, B&W editorial photography, and no decorative UI elements
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
