# beautifului.dev

Source: https://www.beautifului.dev/
Captured: 2026-09-23
Tags: saas, docs, dark, both, dark-techno, minimal, technical, calm, premium, futuristic
Colors: #1b1c1e, #44464b, #6e6f71, #898a8c, #304177, #5e75bc, #44599e, #a0c0ff
Type (h1): Inter · 21px/28.875px · 600 · tracking -0.42px — "Beautiful UI for AI-native interfaces."
Type (h2): Inter · 19px/26.125px · 600 · tracking -0.38px — "New components, in your inbox."
Type (h3): Inter · 13px/19.5px · 600 · tracking -0.14px — "Loading State"
Type (body): Inter · 12.5px/18.75px · 400 · tracking -0.14px — "Pixel-grid loader with shimmer and elapsed time."
Type (small): Inter · 11.5px/17.25px · 400 · tracking -0.14px — "Components"
Type (button): Inter · 11.5px/17.25px · 500 · tracking -0.14px — "Book a call"
Button: "Book a call" — fill #2b2c2f, text #f2f3f4, radius 9999px, border 0px, padding 0px 10px, height 28px, type 11.5px/500
Radii: 8px (47), 9999px (28), 7px (25), 6px (21), 14px (14)

## Images

- Hero (desktop): https://media.lvly.design/library/beautifului-dev/hero.webp?v=dd8f7598
- Page crop (mid-1): https://media.lvly.design/library/beautifului-dev/mid-1.webp?v=7920737f
- Page crop (mid-2): https://media.lvly.design/library/beautifului-dev/mid-2.webp?v=2a982c56
- Hero (mobile): https://media.lvly.design/library/beautifului-dev/mobile-hero.webp?v=bb52cd6b
- Full page (desktop): https://media.lvly.design/library/beautifului-dev/full.jpg?v=112d5cee
- Full page (mobile): https://media.lvly.design/library/beautifului-dev/mobile-full.jpg?v=213866db
- Clip preview (mp4): https://media.lvly.design/library/beautifului-dev/video-n5hs15.preview.mp4?v=41bd8ae8

A component catalog set up like a quiet dev-tool workspace. The whole page is one graphite surface (#1b1c1e), framed by gutters with diagonal hatching on both sides. Inside, a sticky left rail holds a hand-drawn blue "B" monogram, a sun/moon toggle, a two-line Inter 600 headline at only 21px, and a long component index. On the right is a single column of numbered specimens: each gets a "01" mono index, a white 13px title and a gray one-line description on the same baseline, then a large empty stage card with a hairline border, 14px radius and one live component centered inside it. Everything is small and set tight (12.5px body, -0.14px tracking). Color is nearly absent: the blue appears only in the logo, the "Built by Turbo" arrow and a primary Accept button, and green and orange show up only as status data inside the demos. The components carry the page and the chrome stays out of the way.

## Steal-worthy details

- Hatched outer gutters: fine diagonal line texture fills the space outside the 960px content frame. It marks the page's edge without using a border or a color shift.
- Dashed hairline grid: a dashed vertical line separates the rail from the content, and dashed horizontal rules separate the specimens. It reads like a blueprint's construction lines, not like section breaks.
- Specimen header in one line: a mono "01" index, a white 600 title and a gray description sit on a single baseline above each stage. It works as a numbered spec sheet without a single heading tag larger than 13px.
- Oversized empty stage: each demo floats in a roughly 610×270px card with only a hairline border and a slightly lighter fill. The empty space frames the component the way a museum plinth frames an object.
- Variant switcher docked at the bottom of the stage: a tiny segmented pill (Drive / Dots / Orbit / Surfer) sits at the stage's bottom edge, so you switch variants in place, with no tabs above and no separate code pane.
- Loader label with a live mono timer: a pixel-grid glyph, a gray verb ("Churning") and an elapsed "13.9s" in monospace. It is a lovable loading state that also reports progress.
- Sticky rail that fades out: the index scrolls under a bottom fade, and the last items drop toward invisibility, which hints that the list continues without a scrollbar.
- Studio plug placed in the rail: "Built by Turbo" with a blue hand-drawn arrow, two gray lines and a 28px "Book a call" pill (#2b2c2f fill). The page credits its maker without a banner or a footer section.
- Inline data chips in sentence copy: a vendor avatar chip and a green "7 days" pill sit inside the body text of the recommendation card, so the prose itself carries the structured facts.
- Colored tag columns in a dense table: the records table gives each status and category its own muted tinted pill, the one place where the page lets color multiply.
- Newsletter as one more specimen: the closing signup uses the same 19px 600 heading and a small inline field and pill, so it doesn't break the catalog's rhythm.

## Style recipe

Build a dark, restrained dev-tool surface where the content is the only thing with personality.

- **Surface:** one flat graphite background, #1b1c1e, with ~98% coverage. Cards lift only slightly (#1f2023–#232427) with a 1px hairline border around #2b2c2f / #44464b at low opacity. No shadows, gradients or glows. Outside the main content frame (~960px), fill the gutters with a subtle 45° hatched line texture in #2a2b2e.
- **Structure:** use dashed 1px hairlines (#44464b at ~50%) for every structural division, vertical and horizontal, like construction lines. Use a sticky left rail about 290px wide for identity and navigation, and one content column for specimens.
- **Type:** Inter only, small and tight. Display is 21px/600 with -0.42px tracking (-0.02em). Section heads are 19px/600. Item titles are 13px/600 in #f2f3f4. Body is 12.5px/400 with 18.75px leading and -0.14px tracking, in #898a8c. Small labels and buttons are 11.5px (500 for buttons). Use a monospace face only for indices ("01") and live numbers ("13.9s"), in #6e6f71.
- **Grays:** text #f2f3f4 → #898a8c → #6e6f71. Lines #44464b. Filled controls #2b2c2f.
- **Accent:** a periwinkle blue, #5e75bc (lighter tint #a0c0ff, deeper #304177), used only for the brand mark and a hand-drawn arrow or doodle. Reserve a brighter system blue (~#3b99fc) for a single primary action inside a component. Semantic green and orange appear only as data (status pills, confidence bars), never as decoration.
- **Radii:** 6–8px for inputs, list rows and active nav items. 14px for stage cards. 9999px for every button, segmented control and chip.
- **Controls:** buttons are 28px-tall pills with 10px horizontal padding, #2b2c2f fill, #f2f3f4 text and no border. For segmented controls, draw a darker track and show the selected segment as a raised #2b2c2f pill with a hairline edge.
- **Rhythm:** give every block the same numbered header line (index, title, one-sentence gray description) and a generous empty stage where the object sits centered with ~50% negative space. Put variant toggles inside the stage at its bottom edge, not in tabs above it.
- **Voice:** a light theme toggle (sun/moon pill), a fading list edge in place of scrollbars, and one hand-drawn mark for warmth against the technical grid.