Industrial Tactility · Design System

The Architectural
Kraft

A high-end industrial editorial design system built for B2B packaging. Precision meets raw material — digital space treated like a physical workshop.

Explore Components View Principles
Design Philosophy
B2B
Industrial Editorial
Primary Surface
#f9f9f7
Paper-on-Stone
Sustainability
Active
In Stock

Color & Surface Theory

The Palette

Primary
#6c5842 · Kraft Warmth
Primary Container
#867159 · Milled Tan
Secondary
#3a3a3a · Logistics Steel
Tertiary
#45634b · Forest Green
Surface
#f9f9f7 · Main Canvas
Surface Low
#f4f4f2 · Utility Areas
Surface Lowest
#ffffff · Cards & Entry
Surface Highest
#e2e3e1 · Footer / Nav

Typography

The Editorial Anchor

Display LG · Manrope 800 · 3.5rem · −0.02em

Market
Dominance.

Headline MD · Manrope 700 · 1.75rem

Section titles that
anchor the layout.

Body MD · Inter 400 · 0.875rem

All functional text uses Inter for technical clarity. Designed for B2B operators who need reliable, fast-scanning copy without sacrificing aesthetic integrity.

Label MD · Inter 400 · 0.75rem · on_surface_variant

Technical specifications, metadata, dimensions, and secondary content use this style. It creates a subtle hierarchy of information that doesn't overwhelm the primary data the user needs to act on.

Components & Primitives

The Building Blocks

Buttons

Input Fields

Inventory Chips

Stamped-metal tag aesthetic using secondary_fixed palette. Used for SKUs, availability states, and material labels.

Kraft 200gsm In Stock FSC Certified MOQ 500 EU Ready Sustainable

Signature Component

The Spec Sheet

Product Specification

Reference: KN-2024-PKG-007

B2B Verified
Material Kraft Liner 200gsm, FSC Certified
Dimensions 420 × 297 × 180 mm (L × W × H)
Print Method Flexographic, up to 4-colour process
MOQ 500 units / run
Availability In Stock — Ships within 5 business days

Do's & Don'ts

Design Principles

Do
  • Use asymmetrical margins — place content in an 8-column offset for an editorial feel.
  • Use Forest Green sparingly — only for success, availability, or eco-friendly certifications.
  • Use tight spacing (0.3rem–0.6rem) for technical data, 3.5rem for section breathing room.
  • Define boundaries through background color shifts, not lines.
  • Use glassmorphism (80% opacity, 24px blur) for floating nav elements.
Don't
  • Don't use pure black (#000000). Always use on_surface (#1a1c1b) for an ink-on-paper feel.
  • Don't use rounded-full corners. Stick to md (0.375rem) or lg (0.5rem) for a structured industrial look.
  • Don't use Information Blue for links. Use primary (#6c5842) with increased weight.
  • Don't use drop shadows for depth — use tonal layering instead.
  • Don't use 1px solid borders. Separate sections with background transitions.