Templates · Beta
Design taste,
extracted.
Curated cinematic storefronts. Open any style for colors, type, spacing, components, and a DESIGN.md your storefront generator can use.
Apple — MacBook Neo
Apple's MacBook Neo product page radiates cool luminosity — a gallery-white canvas where enormous weight-700 headlines at 80-96px dominate above feather-light body copy, creating a tension between mass and air. The page background stays #f5f5f7, one step off pure white, giving cards and content wells a surface-lift effect without any shadows. Negative letter-spacing tightens progressively with size — display headlines track at -0.022em while body text breathes at -0.003em, a signature move that makes large type feel chiseled rather than loose. The single interactive accent (#0071e3 CTA blue) appears only on the 'Buy' pill button and nav links, rationed so every appearance reads as an instruction to act. Product gradients — dark-to-citrus-green, dark-to-blue, dark-to-violet — serve as full-bleed theatrical backdrops for each color finish showcase, never decorating UI chrome.
Linear
Linear presents a sophisticated and focused dark-mode experience, reminiscent of a command center dashboard. A deep charcoal base creates a serious, immersive canvas, while subtle gradients and layered surfaces build depth without harsh contrasts. Distinctive muted text colors (#8a8f98 for secondary, #62666d for tertiary) maintain readability against the dark backdrop. Critically, interaction is marked by a single vivid lime green (#e4f222), applied selectively to primary calls to action, preventing visual clutter and guiding the user's eye with precision.
Resend
Resend is a pure black command surface — the canvas is #000000 with near-zero colorfulness (1%), giving the entire interface the weight of polished obsidian. Headlines use a custom serif (Domaine) at display sizes with tight -0.01em tracking, while UI copy runs in Inter and monospaced code elements appear in CommitMono, creating a three-voice typographic hierarchy that signals dev tooling without decoration. Color appears almost exclusively as functional data punctuation: violet for code identity, blue for interactive borders, and a handful of vivid status colors (green, red, yellow, light blue) that function as email event indicators — never as decoration. The system uses subtle border-based elevation (1px hairlines at #292d30) rather than shadows, keeping all surfaces flush and matte on black.
Antimetal
Antimetal operates in two visual modes that coexist on one page: a deep navy-to-electric-blue hero that feels like staring into a server rack at night, and a near-white #f8f9fc product surface that reads like a technical dashboard in daylight. The transition between these modes is dramatic and intentional — dark atmospheric entry, then immediate pivot to a light, data-dense product UI. The single color that bridges both modes is a vivid chartreuse (#d0f100) used exclusively on primary CTAs, creating an almost jarring contrast against both the dark hero and the light product surface. Typography is custom throughout: abcdFont handles all UI at tight tracking (-0.016em), while ivarTextFont with OpenType alternates takes headlines at display sizes, giving the largest text a slightly editorial, high-craft quality uncommon in infrastructure tooling. Elevation is achieved through layered blue-tinted shadows (rgba(0,39,80,...)) rather than dark fills, so even raised surfaces feel part of the same chromatic family.
Anthropic
Anthropic's site runs on warm ivory parchment (#faf9f5) — not white, not gray, but the color of aged paper under good light. The palette is almost entirely achromatic, with the entire chromatic budget spent on a single earthy terracotta accent (#d97757) held in reserve in CSS tokens but largely absent from the visible UI. Two custom type families do all the personality work: Anthropic Sans drives navigation and UI at tight tracking, while Anthropic Serif delivers editorial weight in headlines and featured content — the serif-plus-grotesque pairing signals research institution, not startup. Headlines use a thick double-underline on key words (visible on 'research' and 'products') as the sole decorative device — it replaces color as the emphasis mechanism. The massive feature cards flip to near-black (#141413) background, creating hard-edged alternating surface bands with zero gradient or shadow softening.
Mercury
The design feels like a command center at twilight, expansive and focused. A deep, near-black neutral palette (#1e1e2a, #171721) creates an immersive, cinematic canvas where glowing off-white text (#ededf3) provides crisp clarity. All energy is channeled into a single, vibrant violet-blue accent (#5266eb) reserved strictly for primary calls-to-action, like indicator lights on a high-tech console. The typography is a defining feature, with custom fonts used at light weights for headlines, creating an authoritative yet approachable voice. The contrast between spacious, atmospheric hero imagery and the stark, text-driven UI below creates a journey from aspiration to action.
MuxMux
Mux embodies a 'developer's playroom' aesthetic: a grid-lined parchment canvas framing dark, rounded interface cards that feel like sophisticated terminal windows. The overall impression is one of playful precision, with clean, monospace-adjacent typography and vibrant orange accents that highlight interactive elements and functional states. Design components are substantial yet friendly, marked by generous radii and a focus on content hierarchy through contrasting dark cards on a light background. Visual interest is maintained through a subtle underlying grid and whimsical 'robot' illustrations.
LottielabLottielab
Lottielab employs a crisp, bright aesthetic with ample negative space. It combines straightforward typography with a vibrant violet accent for primary actions, creating a focused, inviting user experience. Surfaces are predominantly clean white, complemented by subtle background neutrals to delineate content areas. The overall impression is one of clarity and approachable functionality, emphasizing content and interaction without visual clutter.
EndlesstoolsEndlesstools
Endless Tools employs a dark, high-contrast digital workspace aesthetic. Deep charcoal and true black surfaces form the canvas, punctuated by crisp white text for primary content and subtle gray for secondary information. The system leverages stark typography and meticulously crafted card-like elements with delicate inset borders instead of heavy shadows, creating depth through material treatment rather than traditional elevation. Bright, vivid accents appear sparingly, highlighting interactive elements or brand identity with energetic, almost neon, hues against the monochrome backdrop.
KosmikKosmik
Kosmik's design system uses a bright, inviting canvas with a single vibrant orange as its brand accent. Typography is a key element, with a mix of custom fonts offering both robust headlines and nuanced body text. Components are light, favoring subtle shadows and rounded edges, creating an approachable and focused interface. The overall impression is one of clarity and warmth, with functional elements highlighted rather than aggressively asserted.
Linearity
Linearity employs a 'creative darkroom' aesthetic, juxtaposing crisp white and vibrant orange accents against predominantly dark, atmospheric surfaces. Typography is sharp and compact, driving home key messages with clear hierarchy. Components are lightweight with generous corner rounding, giving an approachable, almost playful feel, while maintaining functional clarity in an otherwise dramatic visual landscape. Color is used sparingly but impactfully to highlight interactive elements and guide user attention.
Hyper FoundationHyper Foundation
Hyperliquid presents a dark, immersive interface dominated by a deep green-black canvas. Typography is a precise blend of a traditional serif for commanding headlines and a clean sans-serif for functional content, making blocks of text feel grounded yet efficient. A vivid, almost neon, mint green color serves as the sole accent, highlighting interactive elements and drawing focus to key information. Components are understated, often using ghost styling or subtle outlines, and leverage large rounded corners to soften the overall impression.
NEARNEAR
NEAR utilizes a high-contrast dark theme with a prominent, vibrant green accent that electrifies interactive elements and key brand messaging. Typography is weighty for headings and precise for body text, creating a serious yet cutting-edge atmosphere. Components feature stark black fills, white text, and minimal rounded corners, emphasizing functionality and digital precision over organic softness. The overall aesthetic is one of a 'midnight command center'—dark, digital, and punctuated by bursts of algorithmic green.
Mockups made easyMockups made easy
Maneken employs a crisp, purposeful design language that balances robust product presentation with a clean, light interface. Strong, compact typography anchors key messages, while a singular vivid blue accent color highlights interactive elements and calls to action. Surfaces are typically flat and highly contrasting using white, black, and light gray, with occasional subtle dark cards setting off mockups. The overall feeling is direct and functional, designed to keep focus on the visual content.
Spline
The design feels like a creative void, a deep space canvas where ideas materialize as glowing forms. An absolute black (#000000) background serves as this void, making every piece of content feel like it's emitting light. Hierarchy is achieved not through shadows or solid grays, but through layered translucency — panels and buttons are semi-transparent white overlays, creating a glassmorphism effect. The custom Spline Sans typeface is used universally at normal weights, giving headings a confident but understated presence. A single, energetic Spline Blue (#0062ff) is reserved for primary actions, acting as a focused beacon in the minimalist dark environment.
VSCO®
VSCO's design system creates a raw, utilitarian feel, blending high-contrast black and white with a select, vibrant yellow accent. The heavy reliance on a custom sans-serif font with tight letter-spacing for headlines establishes a direct, unadorned communication style. The overall impression is one of stark professionalism with a hint of creative energy, achieved through the deliberate scarcity of color and the bold, geometric typography.
Jam
Jam's aesthetic is a 'developer's command center' — a dark, subdued interface with cool gray and violet tones providing a focused workspace. Typography is compact and precise, minimizing visual noise. A vibrant green accent color serves as a functional 'on' switch, highlighting critical actions and active states. Surfaces are subtly layered with soft, rounded corners, creating a sense of approachability within the dark theme.
ClearbitClearbit
Clearbit employs a spacious, light-themed interface centered around a clean white canvas and subtle elevated surfaces. Typography is compact and confident, primarily in a muted indigo, setting a tone of understated authority. Visual hierarchy is established through precise spacing and a single vivid blue accent color that highlights interactive elements and draws attention to key information, making the interface feel precise and purposeful.
Savvycal
SavvyCal feels like a playful, yet precise, garden of productivity. The dominant use of organic greens and a vibrant lime accent creates an energetic atmosphere, grounded by a warm, almost parchment-like off-white background. The interplay between the structured, almost architectural feel of GT-America typefaces and the more expressive, flowing display type of GT-Alpina gives the system its distinctive voice: serious about function, but delivered with a light, engaging touch. Small, unexpected flourishes like the 'new' badge and the subtle orange accent line add personality without sacrificing clarity.
Elementor
Elementor's visual system is a high-contrast monochrome stage where black and near-white alternate as the sole performers — no brand color claims the throne, just pure #000000 and #f6f6f6 pushed to 19:1 contrast ratios. The hero is a full-bleed moody lifestyle photograph with massive weight-900 Roobert headlines in white overlay, commanding attention through scale rather than color. Roobert's 'ss14' feature and tight negative letter-spacing (-0.02em at display sizes) give the type a compressed urgency. Black-filled CTA buttons and white-filled secondary buttons create the only color distinction on the page — the entire interactive vocabulary runs on this two-tone switch. Cards flip between pure black (#000000, 16px radius, 24px padding) and pure white (#ffffff, 16px radius, 48px/32px padding), creating a checkerboard depth without any shadow or elevation.
MagicbeansMagicbeans
Magic Beans employs a clean, Notion-inspired aesthetic with abundant white space and high-contrast typography. Accents of vibrant orange and green punctuate the monochrome base, primarily through subtle iconography, adding a touch of playfulness to an otherwise business-focused interface. Emphasis is placed on clear information hierarchy through distinct text sizing and bold headings, while soft card shadows and fully rounded buttons suggest an approachable, user-friendly experience.
Shelby
Shelby presents as a bold, almost playful take on enterprise software, fusing a deep, rich cacao-brown with a vibrant, energetic hot pink. This highly chromatic palette creates a high-contrast experience, where text and key elements pop dramatically. The use of custom, strong sans-serif typography paired with a monospaced font reinforces a technical yet approachable identity, while sharp corners are softened by occasional, deliberate slight rounding, hinting at precision within expressiveness.
Epidemicsound
This design system presents a clean, approachable aesthetic with a strong emphasis on content, rather than heavy ornamentation. Subtle background color shifts create visual segmentation, preventing the flat UI from feeling stark. Type takes center stage, particularly the custom 'Sebenta Font' for headlines, which adds a distinct, sophisticated character, contrasting the straightforward 'Inter' for body copy. Playful, high-contrast accent colors are used sparingly to draw attention to key interactive elements and promotions, injecting vibrancy into an otherwise restrained palette.
Tailark Pro
Tailark Pro presents an airy, contemporary aesthetic that feels like an interactive museum exhibition of digital components. It achieves this with an almost entirely achromatic palette, punctuated by carefully selected, vibrant accents on interactive elements or illustrative details. The use of multiple shades of near-white for backgrounds and surfaces, combined with subtle, layered box-shadows, creates depth and structure without heavy lines or strong color contrasts. Typography is primarily utilitarian sans-serif, anchoring the UI, while a mono-spaced font adds a technical, precision-engineered feel to code-like elements. Asymmetric and varied border radii on cards create a dynamic, modern presentation.
Slab
Slab's design system feels like a warm, engaging knowledge hub, balancing a serious intent with inviting visual cues. The predominant use of varied neutrals provides clarity and structure, offset by a rich, deep berry background in the hero, creating an immediate sense of depth and distinction. Strategic pops of vivid red and blue for CTAs act as clear beacons against the otherwise subdued palette. Custom fonts with precise letter-spacing contribute to a distinguished readability, ensuring information feels approachable yet authoritative.
BaseHubBaseHub
BaseHub employs a 'dark modern command center' aesthetic, characterized by a deep, near-black canvas and layered dark gray surfaces. A single vivid orange electrifies interactive elements and critical accents, with subordinate blues for minor semantic cues. Typography is compact and precise, maintaining readability within the dark theme. The system emphasizes clear segmentation through subtle borders rather than heavy shadows or large elevation shifts, creating a focused and organized visual experience.
June
June presents a clean, approachable SAAS aesthetic built on a foundation of white space and subtle surface variations. Typography, primarily SF Pro Rounded, strikes a balance between professional clarity and a hint of friendly roundness. A single vivid violet accent color is used sparingly to highlight key information and interactive elements, creating points of visual interest without overwhelming the interface. Components are lightweight with soft shadows and rounded corners, conveying a sense of digital product, not corporate rigidity.
herding.app
This design system evokes a digital craftsman's workshop feel, with a muted dark palette and subtle elevation shifts creating a sense of depth and organization. The interplay of soft, almost invisible backgrounds with crisp white typography and geometric accents defines a precise yet approachable atmosphere. Rounded corners on interactive elements provide a gentle contrast to the otherwise stark, modular structure, hinting at user-friendliness within a powerful system.
Super
This system projects an image of focused utility and quiet confidence, using a stark black-on-white text, highlighted by a single vibrant yellow accent. The design leans into sharp contrasts and subtle textural variations in its neutral palette, allowing content to take center stage without visual noise. Generous padding around elements creates a sense of airiness, emphasizing the digital-first nature of the product.
Allbirds
Allbirds presents a natural, approachable e-commerce experience. Soft neutrals and muted chromatic colors provide a calming backdrop for product-focused layouts. The combination of a friendly sans-serif with a distinctive serif for headlines creates a balance of modern utility and understated elegance. Key elements like buttons and inputs feature large, almost pill-like border radii, contributing to an overall soft and inviting touch.
Zendesk
Zendesk's homepage projects warmth and authority through an unusual pairing: near-black almost-green ink (#11110d) on warm off-white (#f5f5f2), punctuated by a single electric lime (#d1f470) that reads as both verdant and technological. The dark forest-green event banner (#203524) at the top immediately signals brand confidence — deep, earthy, not the expected corporate blue. Body text lives in near-black #11110d rather than pure black, giving the page a slightly warm, organic undertone that softens what could otherwise feel austere. The signature move is the lime CTA: vivid enough to stop the eye, yet grounded enough to feel like a product choice rather than a marketing trick. Card surfaces use #f5f5f2 — a shade away from white — so card lifts happen through warm contrast rather than shadows.
CommonCommon
Common presents a clean, productivity-focused interface built on a nearly achromatic palette. A playful gradient and two vibrant accent colors punctuate the UI, creating a dynamic contrast against the muted background. Components are lightweight and low-to-no shadow, emphasizing flat surfaces and a sense of speed. Typography is structured and compact, supporting a dense information display without visual clutter.
TimescaleTimescale
Timescale's design system evokes an industrial blueprint aesthetic with a high-contrast monochrome base accented by a warm, vibrant orange and a functional lime yellow. Strong geometric lines define UI elements, often creating outlined, sketched forms. Surfaces are predominantly stark white, providing a canvas for bold typography and diagrammatic illustrations. Typographic hierarchy is established through a combination of font family, weight, and specific letter-spacing, rather than relying solely on size, creating a dense yet legible information display ideal for technical content.
Tinybird
Tinybird presents a 'data noir' aesthetic, marrying industrial-strength data tools with a sophisticated, restrained dark theme. The interplay of near-black backgrounds and pristine white text creates a high-contrast experience, punctuated by a single, vibrant green accent. Careful use of grayscale and subtle elevation on cards provides depth, ensuring critical information stands out against the dark canvas without feeling overwhelming.
Eight Sleep
Eight Sleep's design evokes a sense of sophisticated, premium technology, akin to a high-end personal device, through its dominant dark surfaces and stark monochromatic palette. The experience is primarily dark, using a deep #121212 background, sharply contrasted by bright white typography and subtle gray accents. A singular vivid violet (#4158ee) serves as the primary accent, appearing sparingly on interactive elements to create precise visual cues without becoming distracting. The design prioritizes visual clarity and focused attention on product features, employing carefully structured dark surfaces rather than relying on heavy shadows or complex color schemes.
PrismicPrismic
Prismic embraces a high-contrast, functionally colorful aesthetic where sharp, modern sans-serif typography grounds an otherwise energetic palette. Neutrals provide a strong foundation for interface elements, while saturated blues, purples, and greens punctuate interactive states and draw attention to key elements. The system balances visual density with comfortable spacing, promoting a clear hierarchy and an approachable feel without sacrificing professionalism.
Depot
Depot’s aesthetic is a high-contrast dark mode, evoking a command center's precision. Deep, near-black backgrounds frame content, punctuated by vivid green accents that immediately draw the eye to critical interactive elements. A subtle progression of dark grays creates layered surfaces, adding depth and structure without reliance on heavy shadows. The overall impression is one of efficiency and focused power without distraction, like a purpose-built tool designed for speed.
1Password
The design feels like a high-security airlock transitioning into a well-lit control room. An immersive, deep-space dark hero (#1D1D21) establishes a serious, secure atmosphere, which gives way to crisp white (#FFFFFF) content sections focused on informational clarity. The signature brand blue (#145FE4) is used exclusively for calls-to-action and active states, acting like an indicator light confirming interaction. Typography is a key differentiator; the custom font `agileSans` at large sizes with tight negative letter-spacing creates dense, architectural headlines. Buttons are distinctly full-pill (9999px radius), contrasting with the generally sharp, un-rounded cards, creating a focused tension between interactive and container elements.
Kit
Kit reads like a warm editorial notebook — cream-tinted parchment (#f2efe9) as the page base, heavy black headlines punching out of it at weight 700, and a single sky-blue accent (#44b1ff) that appears on CTAs and interactive highlights against the near-black (#1e1e1e). The palette is intentionally muted and hand-curated: soft pastel blocks (dusty blue, blush pink, peach, sage green) appear as section backgrounds, never as text or interaction states, making the one vivid blue feel like a highlighter on a notebook page. KitSansFont at 80px/64px in the custom weight 500 dominates hero spaces with tight -0.009em tracking, while Libre Franklin handles everything else across the content hierarchy — a two-font system where custom display and workhorse utility stay in clearly assigned lanes. Radius tokens are tight and intentional: 12px on buttons and cards, 8px on secondary UI, creating a slightly-rounded-but-serious personality that avoids both sharp corporate rigidity and bubbly consumer softness.
Videoconferencia
Microsoft Teams' page feels like a sunlit open-plan office — bright white expanses punctuated by the distinctive Teams violet-purple (#5d5bd4) and dense navy text (#17253d). The light is almost clinical, with near-zero ambient color tinting, pulling all chromatic attention to the vivid Teams purple accent and photography. Segoe UI Variable's tight negative tracking at display sizes (−0.025em at 48px) is the typographic signature — Microsoft's own variable font doing what no system font substitute can replicate, with headlines that compress horizontally as they scale up. Cards sit as floating white rectangles with a 24px corner radius and a paired micro-shadow system, never harsh — rgba(0,0,0,0.12) 0px 0px 2px plus rgba(0,0,0,0.14) 0px 2px 4px creates a faint lift without drama. The only pill-shaped element (200px radius) reserved for one secondary UI button variant signals interactivity hierarchy without color alone.
SaveDaySaveDay
SaveDay uses a bold, monochrome industrial scanner aesthetic: high-contrast black text on white or light gray surfaces dominates, providing a no-nonsense, functional atmosphere. Key sections and interactive elements are highlighted with a vibrant, almost neon yellow, acting as a functional accent rather than decorative flourish. Typography is dense and commanding, especially for headings, contrasting with crisp, minimal UI elements.
Ghost
This design system grounds a clean, light interface with judicious dark elements, creating a sense of professional authority. A stark contrast between near-black text and a bright white background establishes immediate readability, while subtle, desaturated grays provide tiered information. The vivid lime green is reserved for primary calls to action, standing out against the neutral palette like a beacon. The interplay of sharp, functional typography with soft, rounded elements, especially in buttons, creates a balanced, approachable feel without sacrificing precision.
Aesop
The design evokes a scholarly apothecary's formulary, where every element is presented with meticulous precision. It operates on a starkly limited palette of warm off-white and charcoal, creating a high-contrast, text-forward environment. A rigid, architectural layout with sharp 0px corners dominates, reinforcing a sense of order and clinical quality. The system's signature is the typographic tension between the humanist serif 'Zapf-Humanist' for expressive headlines and the neutral sans-serif 'SuisseIntl' for all functional text, lending an air of classicism to a modern digital interface.
Stability AI
Stability AI's design evokes a sophisticated, high-tech command center with its deep, dark palette and vibrant purple accents. The dominant use of Achromatic Raven for backgrounds provides a sleek, near-black foundation, while crisp Archivo typography in white and light gray ensures clarity. Generous spacing and the playful use of fully rounded buttons contrast with otherwise sharp edges, creating a balance between serious technicality and modern approachability.
Luro
Luro embraces a dark, expansive interface defined by deep, rich backgrounds and luminous, glowing accents. Primary information is presented with high contrast white typography against these dark canvases, punctuated by a vivid magenta that creates a sense of digital energy and highlights interactive elements. Components often exhibit large, soft radii and pronounced, color-tinted shadows, giving them a distinct 'floating' quality within the dark environment. The overall aesthetic suggests a high-tech, immersive experience focused on product insights.
Specify
Specify employs a light-themed interface with subtle gray surfaces that provide depth without harsh contrast. Prominent, controlled typography, primarily in a dark charcoal, guides the user, punctuated by a single vibrant violet accent color that denotes interactive elements and brand presence. Components are gently rounded and softly shadowed, creating a friendly yet precise tool-like aesthetic for a design token engine.
TrunkTrunk
Trunk employs a 'digital engineering blueprint' aesthetic: a dark, technical canvas dominated by deep grays and blacks, accented by circuit-like line art and subtle energetic color highlights. Typography is concise and functional, emphasizing density and clarity within constrained blocks. Components feature soft, rounded edges and minimal elevation, promoting a lightweight and efficient user experience typical of development tooling.
ChecklyCheckly
Checkly employs a dark-mode command center aesthetic with a focus on code-centric visualization. Deep blues and near-black surfaces are punctuated by vivid blue accents for interactive elements and critical information. Typography is precise and utilitarian, prioritizing legibility within code blocks and clean hierarchy for display text. Components feature subtle elevation and controlled use of rounded corners, creating a sense of understated robustness.