Forms in Low Light — A Graphite Image Carousel

Summary

A calm, editorial image carousel rendered as a complete one-screen gallery landing on a graphite + off-white 'paper' palette. A sticky translucent paper nav sits over a centered hero band (an uppercase 'Carousel Design' pill eyebrow, an extrabold tight-tracked 'A gallery that frames the work, not itself.' headline, and a muted intro line), then the carousel itself: a meta row ('Editorial Set 04' label + a bold 'Forms in Low Light' title on the left, an 'images' icon + '03 / 09' counter on the right) above a single commanding 16:9 hero frame on a near-black graphite stage with a soft bottom vignette, glass prev/next caret arrows that sit quiet until hover, a bottom-left 'Frame 03 / Ridge at Dusk' caption, a bottom-right glass control cluster (play + fullscreen), and a centered dot-pagination row. Beneath the stage a precise horizontally-scrolling thumbnail strip (the active thumb wears a double-ring 'thumb-active' highlight, the rest sit at 55% opacity with a hairline ring and brighten on hover, the right edge fades out via a mask). Below the carousel a three-up feature row in a hairline-gridded card ('Thumb-synced focus', 'Quiet arrows', 'Swipes at 390'), then a full-bleed dark graphite palette section ('Graphite, off-white, a single platinum line.' with a four-swatch ramp #1c1c1e / #2c2c2e / #c7c7cc / #fbfbfa and a paper 'Open the editor' CTA), then a paper footer. Restrained monochrome aesthetic: graphite #1c1c1e on paper #fbfbfa with a single platinum #c7c7cc accent line, Inter throughout with tight display tracking.

Style

A calm, editorial, almost-monochrome aesthetic where the image is the only color and the chrome stays out of the way. The whole page sits on an off-white 'paper' #fbfbfa ground with a graphite ramp (50 #f7f7f8 through 900 #1c1c1e) for type, borders and the dark stage, a single platinum #c7c7cc reserved as the one accent value, and pure-white pill/card surfaces. Typography is Inter at every weight (300..800) with a tight display tracking (-0.045em via .tracking-display / letterSpacing.tightest) on headlines, the wordmark and section titles, and a muted graphite-500 for body. The carousel hero is a near-black graphite-900 stage with a soft bottom-up vignette gradient (the .img-grain::after overlay) so captions stay legible, a large soft drop shadow (.hero-shadow), and a 1px graphite ring. Controls are 'glass': rgba(28,28,30,0.72) with backdrop-blur(14px) saturate(150%) and a white/20 ring, sitting quiet until hover then snapping to near-solid graphite. The active thumbnail wears a double box-shadow ring (a 2px paper gap then a 4px graphite ring via .thumb-active) plus an inset platinum hairline; inactive thumbs sit at 55% opacity behind a graphite-200 ring and brighten to full on hover. Soft decorative blurred blobs (graphite-100 and platinum/30) bleed off the hero band corners, a diagonal repeating-linear-gradient 'swatch' texture marks the paper chip in the palette ramp, and a linear-gradient mask fades the right edge of the thumbnail strip. Smooth scroll, antialiased text, a graphite ::selection. Calm, precise, gallery-like; warm human copy with zero em-dashes.

Layout & Structure

A sticky translucent paper nav, then a centered hero / intro band (a pill eyebrow + an extrabold display headline + a muted intro line, with soft blurred corner blobs), then the carousel section (a meta row above a 16:9 graphite hero stage with glass arrows, a caption, a control cluster and dot pagination, then a horizontally-scrolling thumbnail strip, then a three-up feature card row), then a full-bleed dark graphite palette section (a copy column + a four-swatch ramp), then a paper footer. Most containers center in mx-auto max-w-[1180px] px-6.

Sticky translucent nav

Hero / intro band

Carousel meta row

Hero stage (the active frame)

Thumbnail strip

Feature card row

Dark palette section (full-bleed)

Footer

Responsive reflow

Special Notes

Built on the Tailwind CDN with a custom theme.extend: colors.graphite { 50 #f7f7f8, 100 #ececee, 200 #d8d8dc, 300 #b7b7bd, 400 #8e8e93, 500 #636366, 600 #48484a, 700 #3a3a3c, 800 #2c2c2e, 900 #1c1c1e }, platinum #c7c7cc, paper #fbfbfa; fontFamily.sans = ['Inter','system-ui','sans-serif']; letterSpacing.tightest -0.045em. Google Fonts: Inter (weights 300;400;500;600;700;800). CSS keys: html scroll-behavior smooth; body background #fbfbfa + -webkit-font-smoothing antialiased; .tracking-display letter-spacing -0.045em; ::selection background #1c1c1e color #fbfbfa. .thumb-active = box-shadow 0 0 0 2px #fbfbfa, 0 0 0 4px #1c1c1e, with .thumb-active::after { content '', position absolute, inset 0, border-radius 0.5rem, box-shadow inset 0 0 0 1.5px rgba(199,199,204,0.55) }. .hero-shadow = box-shadow 0 30px 60px -25px rgba(28,28,30,0.45), 0 12px 24px -16px rgba(28,28,30,0.30). .glass = background rgba(28,28,30,0.72) + backdrop-filter blur(14px) saturate(150%) (+ -webkit-). .img-grain = position relative; .img-grain::after = content '', absolute inset 0, pointer-events none, background linear-gradient(180deg, rgba(28,28,30,0) 55%, rgba(28,28,30,0.42) 100%). .swatch = background repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 6px, rgba(255,255,255,0) 6px 12px). .fade-edge-r = mask-image linear-gradient(90deg, #000 88%, transparent 100%) (+ -webkit-mask-image); the strip also sets scrollbar-width none to hide its scrollbar. Icons via Iconify (Phosphor 'ph:*' set: square-half-bold, images-square, caret-left-bold, caret-right-bold, play-fill, corners-out, cursor-click, swap, device-mobile, arrow-up-right-bold, github-logo, x-logo, dribbble-logo). Images via Unsplash photos (object-cover). Graphite #1c1c1e is the type/structure value, paper #fbfbfa is the ground and the type-on-dark color, platinum #c7c7cc is the single reserved accent (the inset thumb hairline + the dark CTA hover); the carousel hero is a near-black graphite-900 stage. The reusable prompt-library value is the IMAGE CAROUSEL pattern: one commanding 16:9 hero frame on a dark stage with quiet glass arrows + an in-frame caption + dot pagination, synced to a horizontally-scrolling thumbnail strip whose active thumb shares a double-ring highlight, in a restrained graphite + off-white skin, wrapped into a complete one-screen gallery landing (a sticky translucent nav, a centered hero band, a three-up feature row, a dark palette section and a footer). Original prompt-library product for the placeholder brand 'FrameStudio'. Responsive: the hero keeps its 16:9 frame, the dot pagination + counter hide below md/sm, the thumbnail strip scrolls horizontally with a right-edge mask, the feature row + palette section collapse to one column, the headline clamps 42px -> 64px, no overflow at 390px.