Skip to content
IMBRIQ.Design system
Light themeView product
Resources/Design system
IMBRIQ DESIGN SYSTEM 03.1

A clear workflow.
Built for industrial packaging.

A light industrial interface for an algorithmic packaging API. Measured dimensions, real reference photographs and inspectable calculation results support each decision.

Explore components Download tokens
IDENTITY / 01IMBRIQ
IMBRIQ.

Packaging algorithms. Inspectable results.

LIGHT BY DESIGNv3.1
01 / CONTINUITY

Keep one part in view.

Keep the current carton or case visible as the user changes contents and protection. Preserve the selected camera direction.

02 / PRECISION

Present the evidence.

Distinguish the configurable envelope, live dimension checks and recorded native results. Name the calculation behind each result.

03 / RESTRAINT

Let the product lead.

Use mineral surfaces, graphite type and fine rules. Reserve violet for interaction.

02 / Foundations

Light surfaces. Clear hierarchy.

Mineral backgrounds, white working surfaces and graphite text support an asymmetric composition. Violet identifies actions and active states.

Color

Colors with defined roles
#5144CE

Action

color.primary

Primary actions and selection.

#242A29

Graphite

color.text

Headings and essential information.

#5E6663

Supporting text

color.text-muted

Supporting copy and descriptions.

#F5F6F3

Mineral canvas

color.bg

Quiet background for the product scene.

#ECEEE8

Subtle surface

color.surface-subtle

Flat grouping surfaces and secondary areas.

#DEDFD9

Divider

color.border

Section rules and restrained separation.

Information

#245EAD on #EDF4FF

Success

#216E4E on #EAF6EF

Attention

#8A5A13 on #FFF5DD

Error

#B53737 on #FDEFEF

Typography

Sans serif for content. Monospace for data.
Display56 / 1.12 · 600

The packaging API for cartons and cases.

Heading32 / 1.25 · 600

Define the protection.

Body16 / 1.65 · 400

Review the part, protective insert and container before engineering approval.

Label14 / 1.5 · 500

Parts and requirements

Technical12 / 1.5 · mono

PART ENVELOPE · 214 × 110 × 65 mm

Spacing & shape

A 4 px base unit
4
8
12
16
24
32
48
64
96
6 px
10 px
16 px

Flat editorial surfaces first. Use the radius scale for controls and genuine working panels.

03 / Components

Consistent controls for every workflow.

The product uses these shared React components. Inspect their interaction and feedback states below.
LIVE COMPONENTS

Action hierarchy

One primary action per task
Select an action to inspect its feedback.

Size & state

All targets are at least 44 px high
44 px
48 px
52 px
Disabled
Loading example
Sample project

Keep destructive actions explicit and contextual.

Visible keyboard focus Native control semantics Reduced-motion support Responsive composition

04 / Product patterns

Configure. Check. Inspect.

Five directly accessible steps keep configuration, review and export readable. Native examples expose actual calculated geometry in a separate inspection workspace.
PRODUCT WORKSPACES

Give each result its input, its scope and its next useful action.

Configuration preview
Packaging → Contents → Protection → Review → Export. Dimensions and preferences persist in the browser.
Open configurator
Live dimension check
The current API compares one part envelope with nominal carton or case dimensions.
Try the API
Recorded native result
Inspect independent packing, insert and nesting examples, with the actual returned geometry and files.
Inspect results
01

Keep the choice visible.

Show packaging, interior dimensions and protection in a persistent recap. Suggestions become selections only after an explicit action.

02

Make inspection useful.

Offer top and perspective views, a section view and camera reset. Keep controls reachable on mobile.

03

Match claims to evidence.

Never present the three recorded examples as one project or imply that editing the configurator regenerates their CAD files.

Compare nominal case dimensions.

Catalog comparison specimen
  1. Packaging family
  2. Catalog screening
  3. Project quantity
  4. Review

This component specimen compares prepared part envelopes with catalog dimensions using a local rule. The product configurator uses the screening API.

Prepared dimensions for this component example.

Catalogs to compare
Nominal dimension shortlist

Required envelope: 540 × 320 × 170 mm. Ranked by smallest nominal internal volume; engineering review is required.

The loading opening is smaller than the nominal interior (20.63 × 12.76 in per manufacturer). Check insertion clearance against the current drawing.

Manufacturer specifications
10 references compared · 4 outside this sample envelope

ZARGES K470-40568 is the suggested reference. This choice applies only to the component preview and is not saved.

Screening assumptions and review

Prepared part envelope: 520 × 300 × 150 mm, plus 10 mm allowance on each side. The local rule checks nominal dimensions with horizontal rotation. Container geometry, loading access, protective insert material and transport requirements need engineering review.

Manufacturer references support comparison. They do not establish a supplier partnership, availability or approved fit.

05 / Writing & behavior

Use precise, verifiable language.

Name the input, action and result. Keep the distinction between a reference example and a customer design explicit.

Write the next action.

Use a concrete verb and name its object. Keep one clear action at each decision point.

Contact sales
Action labels · sentence case

Always include the unit.

Distinguish part dimensions, nominal container dimensions and declared weight.

600 × 400 × 220 mm
Dimensions · L × W × H

Describe the actual state.

Show which data and checks support the result. Confirm success only after the operation completes.

Reference packaging configuration
Status · actual capability
Keyboard

Logical order, visible focus, Escape to close a dialog.

Mobile

Keep the next action stable. Show only the inputs needed for the current step.

Motion

Preserve orientation while editing. Render on demand and respect reduced motion; provide a useful dimensional fallback.

Image & motion direction

Realistic materials. Restrained movement.
01 / IMAGE

Give the object room.

Use an asymmetric composition with one large product scene. Keep flat surfaces and fine rules; use metal, foam and plastic materials with credible contact shadows.

02 / MOTION

Connect each transformation.

Move only to explain a selected change. Camera reset is explicit, dimension changes preserve direction, and static recorded results do not imply a running calculation.

03 / CONTROL

Keep inspection controls accessible.

Keep view, selection and export controls keyboard accessible. Respect reduced motion. Show a dimensional fallback if 3D is unavailable. A geometric check does not approve production.

06 / Implementation

Shared foundations in code.

The tokens, React primitives and documented rules live alongside the product.
React / shared componentsui.tsx
import { Button, Field, Badge } from './ui';

<Badge tone="warning">Review required</Badge>

<Field label="Parts and requirements"
       htmlFor="project">
  <textarea rows={3} />
</Field>

<Button type="submit">
  Save project brief
</Button>

Design tokens

Semantic colors, typography, spacing, shape and interaction values in JSON.

Download JSON

Implementation guide

Component contracts, product vocabulary and contribution rules are versioned with the source.

docs/DESIGN_SYSTEM.md
Maintain a consistent product language.

Extend a shared component before introducing a new visual convention.

Back to IMBRIQ