CubeCraftLabs is the maker / R&D branch of CubeCraft Creations. Where Creations is the storefront of finished handmade goods — warm, rounded, blue→purple gradient, Nunito — Labs is the workshop bench where things get designed and built: technical, dark, precise. The two brands share exactly two things — the cube motif and the CubeCraft name. Everything else deliberately diverges so Labs reads as its own identity.

This is a standalone design system so the two brands can evolve independently: edits here never touch Creations, and vice versa.

Sources

CubeCraft Creations design system — the parent brand this diverges from (cube DNA + name only). Its guide describes the warm/gradient storefront identity.
CubeCraftLabs logo exploration — CubeCraftLabs Logo.dc.html (working lockups) and CubeCraftLabs Brand Spec.dc.html (spec sheet), authored in the originating project.
PNG exports — assets/logos/CubeCraftLabs_*.png.

No external codebase or Figma file backs this system yet; it was authored from the logo exploration. If a Labs product codebase appears later, build UI kits from it.

CONTENT FUNDAMENTALS

Voice & Tone

Labs speaks like an engineer at the bench — precise, dry, confident. It's the same maker as Creations, but in "build log" mode rather than "shop" mode.

First-person plural ("we") for the team; second-person ("you") for the reader.
Sentence case for prose; lowercase for tags/badges; UPPERCASE for buttons and eyebrow labels only.
Short, declarative sentences. Command-line cadence. "Printed fresh. Hand-finished. Versioned."
Build/maker vocabulary — build, ship, prototype, iterate, spec, tolerance, revision. Terminal metaphors ($ make …, ✓ build complete) are on-brand for headers and hero moments.
Restrained. Fewer exclamation points than Creations. Precision over enthusiasm.
No emoji in UI. Status is shown with the green/red tokens or a ✓/✗ glyph, not emoji.

Tagline: Design. Prototype. Ship.

Casing

Headlines: Sentence case
Nav items: Title Case
Buttons: UPPERCASE, 0.08em tracking
Eyebrows / section labels: UPPERCASE, 0.14em tracking
Tags/badges: lowercase
Body: sentence case

VISUAL FOUNDATIONS

Color

A dark "workshop bench" palette. Charcoal ground, gold as the single brand accent, terminal green/red for status. There is no gradient — the Creations blue→purple is explicitly absent.

Token	Hex	Role
`--ccl-charcoal`	`#1a1a1a`	Page background
`--ccl-charcoal-2`	`#202020`	Raised surface
`--ccl-charcoal-3`	`#262626`	Input / code block
`--ccl-gold`	`#e5c07b`	Brand accent + logo mark
`--ccl-gold-dim`	`#caa869`	Gold hover / pressed
`--ccl-text`	`#d4d4d4`	Primary text
`--ccl-text-muted`	`#6b6b6b`	Secondary text
`--ccl-border`	`#2a2a2a`	Hairline borders
`--ccl-border-2`	`#333333`	Stronger border / grid lines
`--ccl-green`	`#98c379`	Success
`--ccl-red`	`#e06c75`	Error

Gold is precious — reserve it for the mark, "Labs", links, active states, and the single primary action per view. Never flood a surface with gold; never fill a large area with it.

Typography

JetBrains Mono is the sole typeface (loaded from Google Fonts), at weights 400 / 500 / 700 / 800. The monospace grid is the point — it signals code, precision, and the bench.

Display / Wordmark: 800, mixed case, 0.02em tracking. Wordmark = CubeCraft in text color + Labs in gold, optional gold cursor block.
Headings: 700
Body: 400, line-height 1.7
Buttons: 700, UPPERCASE, 0.08em
Eyebrows: 700, UPPERCASE, 0.14em

No second family. No serif. Mono does everything.

Spacing

4px base unit. Generous breathing room around the mark. Section padding 40–64px vertical.

Corners & Borders

Square everywhere — border-radius: 0. This is a hard rule and the sharpest tell against Creations' rounded system.
Borders do the work shadows would: 1px solid #2a2a2a hairlines, #333 for stronger rules and grid lines.
Accent/outline elements: 1.5px solid #e5c07b.

Backgrounds & Surfaces

Page: flat charcoal #1a1a1a. No gradients, no photographic hero washes.
Surfaces: raised by a hair (#202020) or bounded by a border, not by shadow.
Graph-paper grid (#333 at ~32px) is a legitimate background texture for badge/blueprint contexts.
Terminal window chrome (dot header + ~/path) is a recurring motif for headers and hero blocks.

Shadows

Effectively flat. At most a 1px seam (--shadow-raised). No soft drop shadows — they read "consumer app", which is the wrong brand.

Motion

Easing cubic-bezier(0.2, 0, 0, 1); 100ms micro, 160ms base.
Interactions are crisp, not bouncy. Buttons nudge 1px down on press. A blinking cursor block is the one signature animation (use sparingly).

Hover & Interaction States

Primary button: gold → gold-dim.
Secondary/ghost: faint gold wash / text turns gold.
Links: underline or color to gold; never a gradient.
Scrollbar: 6px slim, thumb #333 → gold on hover.

ICONOGRAPHY

Lucide Icons (stroke-based, 2px, from CDN https://unpkg.com/lucide@latest) — inherited from the Creations toolchain, recolored to --ccl-text / --ccl-gold. Same clean line style suits the mono aesthetic.
Terminal glyphs — $, ✓, ✗, > — are used as functional icons in headers and status lines.
No emoji. No hand-drawn UI SVGs.
The cube mark is not an icon — it's the logo. Use the CubeMark component or the SVGs in assets/logos/, never redraw it.

Logo assets (`assets/logos/`)

cube-wireframe.svg — assembled gold wireframe cube (inline/compact)
cube-exploded.svg — exploded cube, the primary mark
cube-grid-stamp.svg — cube on graph paper (badge)
cubecraftlabs-lockup.svg — horizontal cube + wordmark lockup
CubeCraftLabs_*.png — rendered PNG lockups (primary, inline, terminal, grid stamp)

The cube geometry is fixed: viewBox 0 0 200 200, top vertex (100,44), shoulders (146,70)/(54,70), waist (100,96), base (100,150). Never recolor the faces or add faces beyond the three visible.

FILE INDEX

/
├── styles.css                    ← root stylesheet (link this)
├── readme.md                     ← this file
├── SKILL.md                      ← Agent Skill definition
│
├── tokens/
│   ├── fonts.css                 ← JetBrains Mono @import
│   ├── colors.css                ← color custom properties
│   ├── typography.css            ← type scale + weights + tracking
│   └── spacing.css               ← spacing, radius(0), border, motion
│
├── assets/logos/                 ← cube SVGs + PNG lockups
│
├── components/
│   ├── core/     Button · Badge · Tag · CubeMark + core.card.html
│   ├── icons/    Icon (lucide + terminal) · IconButton
│   ├── forms/    Input · Textarea · Select · Checkbox · Radio · Switch · Field + forms.card.html
│   └── surfaces/ Card · Terminal + surfaces.card.html
│      (each component: .jsx / .d.ts / .prompt.md)
│
└── guidelines/
    ├── colors/     accent · neutrals · status
    ├── typography/ wordmark · scale
    ├── spacing/    spacing & corners
    ├── brand/      cube marks · lockup · app-logo
    ├── workflows/  label-library
    └── ui-kits/    build-console

Components

Component	Group	Description
`Button`	core	Square, uppercase, mono action — primary / secondary / ghost
`Badge`	core	Square outlined lowercase status chip — default / success / error / muted
`Tag`	core	Lowercase content tag — optional `#`, removable `×`
`CubeMark`	core	The cube logo as inline SVG — wireframe / exploded / grid
`Icon`	icons	Two sets in one API: `lucide` (UI chrome) + `terminal` (CLI glyphs, brand-signature)
`IconButton`	icons	Square icon-only action, same variants as `Button`
`Input`	forms	Square mono text field, gold focus, optional `$` prompt
`Textarea`	forms	Multi-line field, same well, vertical resize
`Select`	forms	Native select, square well, gold chevron
`Checkbox`	forms	Square box, gold check
`Radio`	forms	Square with inner gold square (never a circle)
`Switch`	forms	Square track + square knob, gold when on
`Field`	forms	Label + control + hint/error row wrapper
`Card`	surfaces	Flat bordered panel — eyebrow/title/actions/footer, optional gold rail
`Terminal`	surfaces	Console / code block — title bar + toned mono lines (brand-signature surface)

Intentional additions

No source component library existed — everything was authored from the brand guidelines. CubeMark exists because the cube is the core brand asset and needs a first-class API. The terminal icon set and the Terminal surface encode the build-log / CLI motif that defines Labs. All form controls are deliberately square (checkbox, radio, switch) to hold the hard no-radius rule. The Build Console UI kit (guidelines/ui-kits/) shows the whole system composed into a print-farm dashboard.

Relationship to CubeCraft Creations

	Creations	Labs
Purpose	Storefront, finished goods	Workshop, prototyping, R&D
Ground	White / lavender-gray	Charcoal `#1a1a1a`
Accent	Blue→purple gradient	Gold `#e5c07b`
Type	Nunito (rounded)	JetBrains Mono
Corners	8–20px rounded	Square (0)
Shared	Cube motif · "CubeCraft" name	← same

Keep them apart. Do not import Creations gradient/Nunito/rounded tokens into a Labs design, or vice versa.

readme.md Unescape Escape

CubeCraftLabs Design System