Floating Shell

The floating shell is the signature RetailOS layout pattern. Instead of the app filling the entire browser viewport, it sits inside a rounded container with an outer margin --- making the application feel like a premium product, not a website.

Live Preview -- Light Mode

Dashboard

Pendapatan

12.4jt

Transaksi

142

Live Preview -- Dark Mode

Dashboard

Pendapatan

12.4jt

Transaksi

142

Anatomy

+------ Browser Viewport (body bg: #C8C3B5) ------+
|  12px margin                                      |
|  +---- Floating Shell (radius: 14px) ----------+  |
|  |  +-- Sidebar --+  +-- Main Content ------+  |  |
|  |  |  240px      |  |  flex: 1             |  |  |
|  |  |  #FAFAF7    |  |  overflow-y: auto    |  |  |
|  |  |             |  |  #FAFAF7             |  |  |
|  |  +-------------+  +----------------------+  |  |
|  +----------------------------------------------+  |
|  12px margin                                      |
+---------------------------------------------------+

Colors

Element	Light Mode	Dark Mode
Body background	#C8C3B5	#2A2820
Shell background	#FAFAF7	#1C1A17
Shell shadow	0 16px 48px rgba(0,0,0,0.12)	0 16px 48px rgba(0,0,0,0.40)

CSS Implementation

/* Body --- the visible outer area */
body {
  margin: 0;
  padding: 0;
  background-color: #C8C3B5;
  height: 100vh;
  overflow: hidden;
}

.dark body {
  background-color: #2A2820;
}

/* The floating shell container */
.app-shell {
  margin: 12px;
  border-radius: 14px;
  overflow: hidden;
  height: calc(100vh - 24px); /* viewport minus top + bottom margin */
  display: flex;
  background-color: var(--bg-body);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

.dark .app-shell {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.40);
}

/* Sidebar */
.app-sidebar {
  width: 240px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  background-color: var(--bg-body);
}

/* Main content area */
.app-main {
  flex: 1;
  overflow-y: auto;
  background-color: var(--bg-body);
}

React Implementation

export function AppShell({ children }: { children: React.ReactNode }) {
  return (
    <div className="h-screen bg-[#C8C3B5] dark:bg-[#2A2820] overflow-hidden">
      <div className="m-3 rounded-[14px] overflow-hidden h-[calc(100vh-24px)] flex bg-bg-body shadow-[0_16px_48px_rgba(0,0,0,0.12)] dark:shadow-[0_16px_48px_rgba(0,0,0,0.40)]">
        {children}
      </div>
    </div>
  );
}

Why the Floating Shell?

1. Premium feel. The outer margin and shadow create a sense of physical product --- the app feels like a dedicated device, not a browser tab.

2. Visual boundaries. The rounded corners and shadow clearly define where the app begins and ends, reducing cognitive load.

3. Brand differentiation. No other retail ERP uses this pattern. It is immediately recognizable as RetailOS.

4. Dark mode elegance. The warm dark body color (#2A2820) with the darker shell creates beautiful depth.

Responsive Behavior

Breakpoint	Shell Margin	Border Radius
Desktop (>1024px)	12px	14px
Tablet (640--1024px)	8px	12px
Mobile (<640px)	0px	0px (full bleed)

On mobile, the floating shell effect is removed. The app fills the entire viewport because:

• Screen real estate is too precious for decorative margins
• Mobile apps already feel like dedicated products
• Safe areas handle the visual boundary role

@media (max-width: 1024px) {
  .app-shell {
    margin: 8px;
    border-radius: 12px;
    height: calc(100vh - 16px);
  }
}

@media (max-width: 640px) {
  body {
    background-color: var(--bg-body); /* No visible body bg */
  }
  .app-shell {
    margin: 0;
    border-radius: 0;
    height: 100vh;
    box-shadow: none;
  }
}

DO and DON'T

DO

• Always wrap the app in the floating shell on desktop and tablet
• Use the exact body background colors specified (#C8C3B5 / #2A2820)
• Remove the shell on mobile for a full-bleed experience
• Keep the shell height at calc(100vh - 24px) to show body color evenly

DON'T

• Don't add a border to the shell --- the shadow alone defines the edge
• Don't change the outer margin (12px is precisely calibrated)
• Don't nest floating shells --- the pattern applies once at the app root
• Don't apply the shell to mobile apps (React Native) --- it is a web-only pattern