CURATED · OPEN · FREE
Basement Studio
A digital studio & branding powerhouse making cool shit.
agency dev creative
01
Identity DNA
digital studio branding creative agency experimental
A dark, immersive digital workshop or gallery showcasing high-end creative work.
02
Color
#ffffffInk
#e6e6e6Ink soft
#000000BG
#1a1a1aBG soft
#2e2e2eBG quiet
#c4c4c4Muted
rgba(230, 230, 230, 0.3)Line
High-contrast monochrome with deep blacks and bright whites, accented only by project imagery.
03
Typography
geometric-sans · monospace
display 76px · 600h1 38px · 600body 16px · 400caption 13px · 60004
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
96px
Grid-based layout with generous padding and gutters, typically 16px or 24px.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 999px
Subtle horizontal dividers using rgba(230, 230, 230, 0.3) at 1px width.
06
Layout
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
Full-width hero images followed by grid-based project showcases with large titles and descriptions.
07
Motion & Interaction
220ms micro
400ms small
800ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
Smooth transitions for color and background-color changes. · Transform-based animations for interactive elements.
Cursor changes to pointer or alias; subtle color or background transitions. · Immediate feedback, often through link navigation.
08
Components
button Text-based navigation links with bold weight, no visible backgrounds or borders. card Project entries featuring large imagery alongside descriptive text, separated by thin lines. chip None observed. input None observed. hero Immersive full-width image or video background with overlaid text and a 'Scroll to Explore' prompt. 09
Voice & Don'ts
Tone Confident, bold, and slightly irreverent. Headlines Large, tight-tracked geometric sans-serif with high contrast. CTAs Direct and action-oriented, often lowercase or matching the brand voice. Don't use serif fonts — screenshot shows geometric sans-serif for all text. Don't add background colors to buttons — screenshot shows text-only navigation links. Don't use heavy drop shadows — screenshot shows completely flat surfaces. Don't use rounded corners on cards or containers — screenshot shows sharp, square edges. Don't use multiple accent colors — screenshot shows a strictly monochrome palette with project imagery providing color. Don't clutter the layout with borders — screenshot shows minimal horizontal dividers. Avoid: Formal corporate language Avoid: Cluttered interfaces Avoid: Low-contrast text 10
Inside the pack — real screenshots
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 Captured from the live site · real computed styles
11
System prompt
Basement Studio is a high-end creative agency specializing in digital experiences and branding. The design DNA is defined by a deep black (#000000) background and pure white (#ffffff) ink, creating a stark, high-contrast canvas. Typography utilizes geometric sans-serif (Geist) and monospace (Geist Mono) categories. The layout is spacious and grid-based, prioritizing bold headlines and immersive project imagery. Critical don'ts: never add background colors to buttons, never use rounded corners on containers, and never introduce multiple accent colors into the core interface.
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: This site is worth including as a prime example of a premium, dark-themed creative agency portfolio with a bold, minimalist aesthetic.
