CONSTRUCTION SCREENS

• shows the passage of time
• allows you to “scroll construction”

Example:

2025 ───────── 2026 ───────── 2027

        (current moment)

Interface behavior

Click on the object

Shows:

• Passport
• Participants
• status
• Risks

Click on company. Shows:

• projects
• Role
• Loading

Click on the link. Shows:

• Contract
• amount
• Timeline
• status

Click on the risk. Shows:

• description
• Criticality
• Responsible

Color system (required)

This makes the interface “smart” without text:

• I'm fine.
• > risk
• The problem
• Data / Neutrality
• * Finances

Minimum user scenario. Think of an agent or investor:

• Opens the system
• Sees the object
• Sees:
• Contractor
• Bank
• Risks
• Notices
• Clicks
• Sees the problem
• Adopts a decision

All in 10–20 seconds

MVP-version of the screen (realizable)

Must be:

graph (nodes + links)

? object card

* List of participants

> basic status

1–2 Risk

No need to immediately:

❌ BIM

* Complicated analytics

> complicated filters

> overloaded panels

How to implement it (right on the stack)

Frontend:

• React + Next.js
• Cytoscape.js (graph)
• React Query
• Tailwind

Components:

GraphCanvas

• Node Drawing
• Zoom
• drag

NodeCard

• pop-up card

SidePanel

• object data

Timeline

• time scale

JSON for graph (under UI)

Here is the format that should come with the backend:

{

  "nodes": [

    "id": "p1", "type": "project", "label": "LC North", "status": "risk" ,

    "id": "c1", "type": "company", "label": "customer", "status": "active" ,

    "id": "c2", "type": "company", "label": "contractor", "status": "active" ,

    "id": "r1", "type": "risk", "label": "Breaking deadlines", "status": "high"

  ],

  "edges": [

    { "source": "c1", "target": "p1", "type": "customer" },

    { "source": "c2", "target": "p1", "type": "contractor" },

    { "source": "p1", "target": "r1", "type": "risk" }

  ]

The main meaning of the screen. Strictly speaking:

This is not an interface

This is a visualization of construction reality

What you get. With this screen, you can:

• show the investor the product
• Show the state the system
• Give the developers a task
• run MVP

Next step. Now there are 3 strong directions:

1. Make UI specification (pixel to pixel)→ for designer

2. Start Code (React + Cytoscape)→ The real prototype

3. . Collect product presentation→ to attract resources

UI SPEC: CONSTRUCTION CRYSTAL (CORE SCREEN)

Overall Layout Structure

? Screen Grid

┌───────────────────────────────────────────────┐

│ TOP BAR                                      │

├──────────────┬───────────────────────┬────────┤

│ LEFT MENU    │   GRAPH CANVAS        │ RIGHT  │

│              │                       │ PANEL  │

│              │                       │        │

├──────────────┴───────────────────────┴────────┤

│ TIMELINE                                      │

└───────────────────────────────────────────────┘

TOP BAR (top panel)

Composition:

> Search

• placeholder: “Search for objects, companies...”
• debounce: 300ms
• results:
• projects
• Company

> Filters

• Region (dropdown)
• status (multi-select)
• Stage (multi-select)

> Modes

• toggle:
• Object
• Region
• Industry

The user

• Avatar
• Menu:
  
• Profile
• Exit

LEFT MENU (navigation)

Width

• 72px (collapsed)
• 240px (expanded)

Paragraphs:

Behaviour:

• hover → tooltip
• active → backlight
• click → context change

GRAPH CANVAS (center)

Main Component: GraphCanvas

Functions: Graph drawing

• library: Cytoscape.js
• layout: force-directed

Nodes

Node types:

• title
• Status (color)
• Stage
• budget
• Timeline

*Participants

• list of companies
• Role
• status

> Risks

• Risk List
• severity
• status

> contracts

• Room
• amount
• status

> Action

• “Appoint a task”
• “Update the status”
• “Adding risk”

Company selected

• title
• type
• rating
• projects
• Loading

Risk is selected

• description
• Level
• date
• Responsible
• button “close”

TIMELINE (bottom panel)

Component: Timeline

Visual:

• drag → time travel
• click → go to date
• Mode:
• Actual status
• forecast

STATUS OF THE SYSTEM

Loading

• skeleton UI
• Spinner in the center

Empty

• “No data”
• button “create an object”

Error

• Message
• retry

Partial Data

• part of nodes
• Warning

UX-RIGHTS (very important)

No overloaded forms

→ only actions through context

All in a click

→ no difficult navigation

Color = meaning

→ user reads screen without text

80% - visual

→ 20% — text

DESIGN TOKENS

Colors:

• Primary: #2563EB
• Success: #16A34A
• Warning: #F59E0B
• Danger: #DC2626
• Neutral: #64748B

Background:

• Dark mode:
• bg: #0F172A
• panel: #1E293B

Typography:

• Heading: 16–20px
• Text: 14px
• Signatures: 12px

COMPONENT TREE

App

 ├── TopBar

 ├── Sidebar

 ├── GraphCanvas

 │    ├── Node

 │    ├── Edge

 │    └── Tooltip

 ├── EntityPanel

 └── Timeline

CRITICAL COMPONENTS

If you do MVP - focus on:

• GraphCanvas
• EntityPanel
• API graph

WHAT IT IS. This is already:

• design document
• Task for designer
• Frontend Task
• Product Prototype

Honest conclusion. You're not just drawing the interface right now.

We create a new way to see construction

Next step. Now there are two powerful directions:

1. Make a Figma-structure (screens + Status)

2. Start Code (React + Cytoscape)

We do Figma-structure level of the product, and not just “beautiful screens”. It will be a system of files, pages, components and states that can be immediately given to the designer and start work.

🎯 FIGMA STRUCTURE

Crystal Buildings (MVP)

File structure of Figma

Filename: Crystal Construction — MVP UI Kit & App

Pages (pages)

1. Cover

2. Design System

3. Components

4. Layouts

5. Screens (Core)

6. Screens (States)

7. Flows

8. Dev Handoff

Page 1: Cover

Contents:

• Product name
• logo (if any)
• version (v0.1 MVP)
• date

This is important for presentations.

Page 2: Design System. The basis of everything. Without it, there will be chaos.

Colour

> Primary

• Primary — #2563EB
• Success — #16A34A
• Warning — #F59E0B
• Danger — #DC2626

Background (Dark UI)

• Background — #0F172A
• Panel — #1E293B
• Border — #334155

Neutrals

• Text Primary — #E2E8F0
• Text Secondary — #94A3B8

Typography

Grid

• 12-column grid
• Margin: 24px
• Gutter: 16px

Spacing

• 4 / 8 / 12 / 16 / 24 / 32

Page 3: Components. That's the most important. Do it like a library.

Buttons

Options:

• Primary
• Secondary
• Danger

Status:

• Default
• Hover
• Active
• Disabled

Input

• Default
• Focus
• Error
• Filled

Status Badge

Node (count node). This is a key component.

Options:

Project Node

• Big
• Blue

Company Node

• medium
• Grey

Risk Node

• small
• red

Edge (communication)

• solid
• dashed
• red (risk)
• double (finance)

Panel Card

Used in the right panel:

• title
• content
• actions

Page 4: Layouts. Collecting the screen skeleton.

Layout 1: Main App

TopBar

Sidebar | Graph | RightPanel

Timeline

Layout 2: Full Graph

No right panel

Layout 3: List View

For projects / companies

Contents:

• Graph
• Right Panel (object)
• Top Bar
• Timeline

This is the main product screen.

Screen 2: Project Lis

• table
• Filters
• status

Screen 3: Company List

• list of companies
• rating
• Roles

Screen 4: Analytics

• KPI
• graphs
• risk map

Page 6: Screens (States). Very important. It's 80% UX.

For Graph:

State 1 — Default

• selected object

State 2 — Node Hover

• Highlighting Links

State 3 — Node Selected

• active panel

For the system:

Loading

• skeleton
• spinner

Empty

• “No data”
• CTA button

Error

• Message
• retry

For Right Panel:

Object selected

Company selected

Risk selected

Page 7: Flows. Showing scripts.

Flow 1: View object

• Opening
• Selection of object
• Link analysis
• Risk Viewer

Flow 2: Dealing with Risk

• Click on risk
• Opening the panel
• Closure of risk

Flow 3: Add member

This is what developers need.

Page 8: Dev Handoff. For transfer to development.

Contents:

• Dimensions of components
• spacing
• Colors
• Status

Required:

• Auto Layout
• Variants
• Naming system

Naming Convention

Very important.

Components:

Button/Primary

Button/Secondary

Node/Project

Node/Company

Node/Risk

Panel/Object

Panel/Company

Panel/Risk

Status:

Button/Primary/Hover

Node/Project/Active

Panel/Object/Expanded

What should be done first

Day 1–2:

• Design System
• Colors
• Typography

Day 3–4:

• Components
• Node
• Panel

Day 5–6:

• Main Screen

In a week you already have a product.

Honest conclusion. This is no longer a “design.”

This is the industry interface operating model

Next step 

1. > Start UI development (React)

2. . Collect product presentation (based on Figma)