# wireframe.co

Source: https://wireframe.co/
Captured: 2026-10-30
Tags: agency, landing, light, both, minimal, swiss, calm, confident, human, technical
Colors: #fcfcfb, #d4d3d3, #bee4f7, #b3b3b3, #8d8e8e, #717172, #4f4f52, #96d0f9
Type (h1): InterDisplay · 44px/44px · 600 · tracking -0.66px — "Wireframe Aa Design Studio"
Type (h3): InterVariable · 12px/20px · 425 · tracking -0.06px — "Career"
Type (body): InterVariable · 16px/24px · 425 · tracking -0.24px — "World-class visual design, shipped in weeks not months. From standout marketing "
Type (small): InterVariable · 13px/20px · 450 · tracking -0.065px — "Work Soon"
Type (button): InterVariable · 13px/20px · 500 · tracking -0.065px — "Quick message"
Button: "Quick message" — fill #fdfdfc, text #1d93d2, radius 8px, border 0px, padding 0px 16px, height 40px, type 13px/500
Radii: 8px (5), 10px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/wireframe-co/hero.webp?v=9cfdd910
- Page crop (mid-2): https://media.lvly.design/library/wireframe-co/mid-2.webp?v=c31e1d09
- Hero (mobile): https://media.lvly.design/library/wireframe-co/mobile-hero.webp?v=d4b12fc0
- Full page (desktop): https://media.lvly.design/library/wireframe-co/full.jpg?v=a4e7b077
- Full page (mobile): https://media.lvly.design/library/wireframe-co/mobile-full.jpg?v=64becb4d
- Clip preview (mp4): https://media.lvly.design/library/wireframe-co/video-eb239q.preview.mp4?v=75a98ba3

A one-person studio site that reads like a well-kept settings panel: a near-white `#fcfcfb` canvas ruled by faint dashed vertical guides, a three-column layout with a sticky left nav, one narrow 456px content column and a right rail of small live widgets (visitor count, a Mode toggle, Follow on X). Everything is Inter at 13–16px with weight 425–500 and slight negative tracking. The only display moment is a 44px InterDisplay 600 headline whose word "Design" is set in sky blue and recolored by a little floating swatch picker. Credibility comes from lists, not imagery: career rows with app-icon tiles, a three-column client roll, and then a single black testimonial card with a pink-red streak graphic, the one loud surface on the page.

## Steal-worthy details

- Dashed vertical construction lines run the full height at every column edge (1px dashed `#d4d3d3` on `#f6f6f4`/`#fcfcfb`), so the grid stays visible as a design object and the page reads like a Figma frame, which fits a studio called Wireframe
- A floating swatch strip (six 14px dots in a white 8px-radius pill with a soft shadow) overlaps the headline and recolors the accent word live, a playful brand demo that costs one component
- The headline's second line tints one word (sky-blue "Design" beside near-black "Studio") instead of using a gradient or a highlight, which brands the page with color alone
- A disabled nav item ("Work" grayed to `#b3b3b3`) carries a hand-drawn cyan ellipse scribble around a "Soon" label, a human mark on an otherwise ruled layout
- An ambient status line above the H1 (moon icon, "Good evening · 10:27 PM" at 12px `#8d8e8e`) and a right-rail "54,025 visitors" counter with a tiny bar glyph make a static page feel alive and local
- The CTA pair contrasts a near-black filled button (`#2f2f31` gradient, 8px radius, 40px tall, 13px/500) with a borderless text action in `#1d93d2` led by a Telegram glyph, a primary and a "low-commitment" path side by side
- Career rows use 48px white app-icon tiles (10px radius, hairline border, faint shadow) with company and role stacked left and the date range right-aligned to the column edge in gray tabular figures
- The client roll is a plain three-column text grid of names at 14px with no logos, ending in a gray "Your project ▸" cell that turns the list into an invitation
- After a page of near-white, one black testimonial card (10px radius, wider than the column by 16px each side) with a diagonal pink-red light-streak image delivers the quote at 20px white, attribution split under a hairline: Raycast logo left, name right
- The contact address is pinned bottom-left in the sticky nav ("For new business inquiries:" at 11px over the email at 14px), so the way to hire is always on screen without a footer

## Style recipe

Build on a near-white canvas (`#fcfcfb` content, `#f6f6f4` gutters) with 1px dashed `#d4d3d3` vertical guide lines drawn at every column boundary, top to bottom; the visible grid is the decoration. Lay out three columns: a sticky left rail (logo mark, 14px nav links, contact email pinned to the bottom), one narrow content column around 456px, and a right rail of small, quiet widgets right-aligned. Use Inter for everything: body 16/24 at weight 425 with -0.24px tracking, UI and labels 13/20 at 450–500 with -0.065px, section labels 12px `#8d8e8e`; reserve InterDisplay 600 at 44/44 with -0.66px tracking for the single H1. Ink is `#1f1f21`, secondary text `#4f4f52`/`#717172`, disabled `#b3b3b3`. Color is rationed: one sky-blue accent (`#1d93d2` for links and icon actions; a lighter `#5ab4f0`-ish tint for one headline word) and nothing else colored except brand logos. Primary button: near-black fill with a subtle top-down gradient, white 13px/500 text, 8px radius, 40px height, 16px side padding; pair it with a borderless accent text link led by a 14px icon. Separate sections with full-column 1px `#e8e8e6` hairlines and generous 48–64px vertical space; label each section with a small gray caption rather than a heading. Present proof as lists: icon tiles (48px, 10px radius, white, hairline border, faint shadow) beside two-line rows with right-aligned gray dates, and plain-text name grids. Allow exactly one dark surface per page (a black 10px-radius card with a vivid abstract image) for the strongest quote. Add one or two human touches: a hand-drawn scribble around a label, a time-of-day greeting, a live counter. No hero image, no gradients on backgrounds, no shadows beyond the faintest on tiles and popovers.