A stark architectural model or a bold graphic print.
02
Color
#000000Ink
#FFFFFFBG
rgba(229, 231, 235, 1.0)Line
Strict binary palette: pure black (#000000) on pure white (#FFFFFF).
03
Typography
geometric-sans · monospace
display60px · 400
body16px · 400
Use 'Alpha' font family for primary display and body text · Use 'Takt' font family for monospace elements · Maintain consistent font-weight of 400 across all text elements
04
Spacing
4px
8px
12px
16px
24px
32px
40px
48px
64px
96px
Generous whitespace with large vertical gaps between major elements
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 0px
Thin 1px borders using rgb(229, 231, 235) for subtle separation
06
Layout
1280container
12columns
24pxgutter
768 / 1024breakpoints
Asymmetric split layout with massive geometric shapes on left and right, minimal navigation at top
07
Motion & Interaction
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0.0, 0.2, 1.0)easing
All transitions applied to all properties (transition: all) · Simplified motion focusing on element visibility and position changes
Cursor changes to pointer on interactive elements · Standard click behavior with transition animations
08
Components
buttonText-only navigation links with pointer cursor
cardNo traditional cards; content presented as large geometric compositions
chipNot present in the visible design
inputNot present in the visible design
heroDominant geometric circle/semicircle compositions with minimal text
09
Voice & Don'ts
ToneMinimal, direct, architectural
HeadlinesLarge geometric shapes serve as visual headlines
CTAsUnderstated text links rather than prominent buttons
Don't add rounded corners — screenshot shows sharp, geometric edges on all shapes
Don't introduce color variations — screenshot shows strictly black (#000000) and white (#FFFFFF)
Don't use multiple font weights — screenshot shows consistent weight 400 throughout
Don't add drop shadows — screenshot shows flat, 2D compositions without depth effects
Don't create complex navigation menus — screenshot shows minimal text links at top
Don't add decorative illustrations — screenshot uses only abstract geometric forms
Don't use gradient backgrounds — screenshot shows solid white (#FFFFFF) background
Captured from the live site · real computed styles
11
System prompt
Co Projects is a minimalist, experimental portfolio site using a stark black-and-white palette with massive geometric circle and semicircle compositions as the primary visual language. The design features pure white (#FFFFFF) background with solid black (#000000) geometric shapes and minimal navigation text. Typography uses the 'Alpha' font family in a geometric sans-serif category at weight 400, with 60px display size and 16px body text. The layout is asymmetric with generous whitespace and large vertical gaps. Key characteristics include: no color variations, no rounded corners, no shadows, no gradients, and minimal text content. Navigation consists of simple text links ('Co Projects', 'Builder', 'About') with pointer cursors. All transitions apply to all properties. The site avoids decorative elements, complex navigation, and text-heavy introductions, focusing instead on bold geometric forms as visual focal points.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
