Skip to content
DesignMunkDesignMunk Submit a site

Cubefabs

cubefabs.com
Revolutionize manufacturing with AI factories for next-gen materials.
AI Technology Next.js Tailwind Homepage
Share Visit site
cubefabs.com DESKTOP · 1440
Cubefabs

AI Breakdown

Design export

---
version: alpha
name: Cubefabs
description: Revolutionize manufacturing with AI factories for next-gen materials.
colors:
  primary: "#ffffff"
  secondary: "#fcbb04"
  tertiary: "#ffd451"
  neutral: "#000000"
  border: "#374151"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: __NeueMontreal_36e6fa
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.19
  headline-md:
    fontFamily: __NeueMontreal_36e6fa
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 0.007em
  headline-sm:
    fontFamily: __NeueMontrealMono_9a0bad
    fontSize: 25px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.006em
  headline-xs:
    fontFamily: __NeueMontreal_36e6fa
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.19
  body-md:
    fontFamily: __NeueMontreal_36e6fa
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.008em
rounded:
  sm: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 64px
  xl: 90px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary}"
    rounded: 0px
    padding: 13px 16px
    height: 40px
  button-secondary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary}"
    rounded: 0px
    padding: 13px 16px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Cubefabs: Black Canvas and Signal-Yellow Wireframe Hero

## Overview

Cubefabs presents an industrial, high-trust brand in dark mode. The palette is minimal — black surface, white type, and one signal-yellow accent — producing a technical, purposeful tone. Spacing is generous at section level and tight within components, yielding clarity without clutter. Use this system to feel engineered, confident, and contemporary rather than glossy or promotional.

## Colors

- Primary (#ffffff): Core text and icons across dark surfaces.
- Secondary (#fcbb04): Brand accent for lines, highlights, and key UI cues.
- Tertiary (#ffd451): Lighter yellow for hover states and subtle emphasis.
- Neutral (#000000): Base surface color for dark sections and hero.
- Border (#374151): Cool slate divider for rules, inputs, and subtle separators.
- Surface (#000000): Default page canvas in dark mode.
- On-surface (#ffffff): Text and icon color when placed on the Surface.

## Typography

- Neue Montreal (custom): Primary grotesk for headlines and body. Not freely loadable via Google; self-hosted on site. Roles: headline-lg 36/700, headline-md 30/400, headline-xs 21/400, body-md 18/400. Good substitutes: Inter, Manrope, or Helvetica Neue/Arial system stack.
- Neue Montreal Mono (custom): Mono accent used for short functional lines and small headlines (headline-sm 25/400). Not freely loadable via Google. Substitutes: IBM Plex Mono, Space Mono, or JetBrains Mono.
- Letter-spacing is modest (0.006–0.008em) on smaller headlines and body for controlled readability in dark UI.

## Layout

Spacing follows a stepwise scale: 8, 16, 32, 64, 90px. Use xl (90px) and lg (64px) for section paddings; md (32px) for block gaps; sm (16px) and xs (8px) inside components. The layout reads as a wide, left-aligned column with occasional full-bleed bands (e.g., client logos on white). Maintain large margins around headlines to keep the system feeling engineered and uncluttered.

## Elevation & Depth

Depth is achieved through contrast and crisp dividers, not heavy shadows. Only a very small shadow is available (0 0 5px gray) and should be used sparingly for overlays. Prefer hierarchy via color (black vs. white panels), the signal-yellow accent, and whitespace. Borders in #374151 separate groups and inputs.

## Shapes

The language is rectilinear. Buttons are square-edged (0px radius) to signal action and precision, while containers like cards use an 8px radius for approachable structure. Keep radii consistent: 0px for interactive triggers, 8px for surfaces and inputs.

## Components

Tokened variants:
- Button — Primary: background #ffffff, text #ffffff, 0px radius, 13px 16px padding, 40px height.
- Button — Secondary: background #ffffff, text #ffffff, 0px radius, 13px 16px padding, 40px height.
- Button — Link: text #ffffff, 0px radius.
- Card: background #000000, text #ffffff, 8px radius, 16px padding.

Distinctive components on this page:

### Announcement Bar
- Full-width strip using Secondary (#fcbb04) as background with neutral text for high contrast. Vertical padding: sm–md. Used for the rename notice and CEO link.

### Navigation Header
- Minimal top nav with left logo and right links. Place links in body-md (18px) with on-surface text (#ffffff). Use md spacing between items.

### Hero: Wireframe Cubes
- Surface: #000000. Accent illustration lines: #fcbb04. Headline set in headline-lg (36px/700) in #ffffff. Supporting label can use headline-sm (25px mono) where needed.

### Benefits Rail
- Copy: "Increased Precision → Higher Yields → Lower Costs." Set in headline-sm (25px, mono) in #ffffff with arrow separators accented in #fcbb04. Horizontal gaps: sm–md.

### Client Logo Strip
- Inverted band on #ffffff with neutral text (#000000) for the subhead ("15 years..."). Logos placed center with md–lg vertical padding to create a visual reset between dark sections.

### Latest News Teaser
- Use Card spec: #000000 background, #ffffff text, 8px radius, 16px padding. Link styled as button-link in #ffffff; add a border rule in #374151 if extra separation is needed.

### Newsletter Signup
- Input on dark surface with #374151 border. Label in body-md (18px). Submit trigger uses the button spec; align right with sm spacing.

### Footer Columns
- Multi-column lists with headings in headline-xs (21px) and links in body-md (18px). Use #374151 dividers and md gaps between columns.

## Do's and Don'ts

- Do reserve Secondary (#fcbb04) for key accents, icons, and diagram lines; avoid flooding large areas with yellow.
- Do keep section paddings at lg–xl and internal gaps at md or below to preserve the engineered feel.
- Do use the mono style (headline-sm) for short, technical statements and labels only; avoid long paragraphs in mono.
- Don't introduce heavy drop shadows; prefer borders (#374151) and color contrast for hierarchy.
- Don't round interactive controls beyond 0px; keep cards and inputs at the 8px radius.
- Don't center every block — left alignment is a core part of the voice and keeps it industrial rather than promotional.

## Agent Prompt Guide

Quick color reference — Text: #ffffff; Background: #000000; Border: #374151; Accent: #fcbb04; Tertiary accent: #ffd451.

1) Dark hero with yellow wireframe accent
- Container: background #000000; padding-top/bottom 90px; content max-width as needed.
- H1: 36px/1.19, weight 700, family Neue Montreal (or Inter), color #ffffff.
- Subcopy: 18px/1.5, family Neue Montreal (or Inter), color #ffffff, max-width ~60ch.
- Accent graphic: 2px strokes in #fcbb04.
- Link-style CTA: use button-link spec with text color #ffffff.

2) Benefits rail in mono with arrows
- Background: #000000.
- Text: headline-sm 25px/1.2, family Neue Montreal Mono (or IBM Plex Mono), color #ffffff.
- Insert "→" separators in #fcbb04; gap 16–32px between phrases.

3) Client logo strip on white
- Section background: #ffffff with 64px vertical padding.
- Subhead: headline-md 30px/1.38, family Neue Montreal (or Inter), color #000000, centered.
- Place logos in a single row with 32px gaps; keep all logos monochrome for cohesion.

4) News teaser card
- Card: background #000000, text #ffffff, border 1px #374151 (optional), radius 8px, padding 16px.
- Title: headline-xs 21px, color #ffffff.
- Link: button-link style in #ffffff; add an inline arrow in #fcbb04.

5) Footer columns
- Background: #000000 with 64–90px vertical padding.
- Column heading: 21px Neue Montreal, color #ffffff.
- Links: 18px Neue Montreal, color #ffffff with 16px vertical gaps.
- Top border or separator: 1px #374151 extending full width.

## Similar Brands

- Applied Intuition — similarly sparse, industrial dark UI with decisive accent color; leans more on product screenshots than line illustrations.
- Anduril — dark, high-contrast typography and technical tone; uses green accents instead of yellow and heavier imagery.
- NVIDIA Developer — black canvas with neon accents and grotestk/mono pairing; denser layouts and more complex navigation.
- Lambda Labs — black-and-yellow hardware storytelling with restrained typography; more product photography than Cubefabs' vector-first approach.

More like this

Browse AI →
lev8.com
Lev8 AI
Lev8
Turn the live web into people and business intelligence.
Homepage · 22 minutes ago
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 1 hour ago
humblytics.com
Humblytics AI
Humblytics
Revenue-based analytics and A/B testing with Stripe-verified results.
Homepage · 16 hours ago
adapt.com
Adapt AI
Adapt
One agent. Full control on the full-stack AI platform.
Homepage · 18 hours ago