beautifului.dev

Beautiful UI — Crafted primitives for AI-native interfacessaved 17d ago · captured 17d ago

Eleven details, eleven pinned.

View as Markdown ↗

Colors8 colors · ground #1B1C1E

ground#1b1c1e·98.69%#44464b·0.88%#6e6f71·0.28%#898a8c·0.08%#304177·0.05%accent#5e75bc·0.02%#44599e·0.01%#a0c0ff·0.01%

Sized by coverage · click to copy.

Typography1 family · 5 styles · Inter

Beautiful UI for AI-native interfaces.

Inter · 21/29 · 600 · -0.42px

New components, in your inbox.

Inter · 19/26 · 600 · -0.38px

Loading State

Inter · 13/20 · 600 · -0.14px

Body

Pixel-grid loader with shimmer and elapsed time.

Inter · 13/19 · 400 · -0.14px

Small

Components

Inter · 12/17 · 400 · -0.14px

Specimens are the page's own words at their measured metrics.

ButtonsBook a call1 style

Book a call

primary · fill #2b2c2f · label #f2f3f4 · radius 9999px · border 0px · padding 0px 10px · height 28px · type 11.5px / 500

Shape5 radii · 135 uses

8px47 uses · 35%

9999px28 uses · 21%

7px25 uses · 19%

6px21 uses · 16%

14px14 uses · 10%

AnalysisA component catalog set up like a quiet dev-tool workspace.

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.

Style recipeBuild a dark, restrained dev-tool surface where the content is the only thing with personality. - **Surface:** one flat graphite background, #1b1c1e, with ~98% coverage.

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.

Details11 worth noting

beautifului.dev — the captured page — Docs, 1440 × 900 · captured Sep 23, 2026

1Hatched outer gutters
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.
2Dashed construction-line dividers
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.
3Numbered one-line specimen header
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.
4Oversized empty stage card
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.
5In-stage segmented variant switcher
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.
6Loader with mono elapsed timer
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.
7Fading sticky component index
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.
8Built-by plug in the rail
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.
9Inline entity chips in prose
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.
10Tinted tag pills in records table
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.
11Understated newsletter close
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.

saas · docs · dark · dark-techno, minimal · technical, calm, premium, futuristic

beautifului.dev

More like this