Factory.ai

Factory.ai, brutalist, monochromatic

Preview image. Unlock full-res

Architectural blueprint on white marble. Lines are crisp, colors are limited, and every element serves a clear, functional purpose.

Industryai, dev-tools
Palette
#020202
#eeeeee
#fafafa
#b8b3b0
#3d3a39
#a49d9a
#ef6f2

Factory.ai embraces a 'technical brutalism meets digital precision' aesthetic, prioritizing informational clarity and directness. The near-monochromatic palette, dominated by light grays and deep charcoals, provides a stark, high-contrast backdrop for technical content. A single vivid orange accent color is deployed sparingly as a functional indicator, highlighting interactive elements and key information without visual noise. The strong typographic voice, characterized by precise letter-spacing and a monospace variant for code, reinforces the structured, engineering-focused identity. Prioritize Factory Black (#020202) for primary text and Factory Light Gray (#eeeeee) for background, ensuring AAA contrast. Apply Geist font consistently for all UI text, utilizing negative letter-spacing for large headlines (e.g., -0.0480em at 60px) to achieve a condensed, precise appearance. Use Geist Mono for all code snippets and CLI instructions at weights 400 and sizes 12-18px for clear distinction. Implement Cool Gray (#b8b3b0) for subtle borders and dividers to maintain visual structure without heavy lines. Reserve Code Orange (#ef6f2e) strictly for highlighting functional elements like 'NEW' badges and active indicators. Maintain a default border radius of 4px for buttons and form elements, extending to 6px for elevated cards. Ensure consistent vertical spacing of 24px and horizontal elements gaps of 12px or 8px using the base 4px unit. Avoid using chromatic colors beyond Code Orange (#ef6f2e) to maintain the stark, technical aesthetic. Do not introduce shadows or complex gradients; rely on color and typography for hierarchy and depth. Do not use generic system fonts; always specify Geist or Geist Mono for design consistency. Avoid excessive padding or large border radii; the design favors a compressed, precise feel. Do not use underlines for links unless on hover, rely on color and context (Factory Black on light backgrounds). Avoid arbitrary text styling (bolding, italics); rely on the established type scale (Geist, 400 weight) for hierarchy. Do not deviate from the specified negative letter-spacing values, especially for headlines, as it is a core characteristic of the brand's typography.

More like this