Layout — Coconut Design System

Page Structure

Dashboard Shell

Dashboard

v3.10

MENU

Home

Systems

Infra

Settings

Page Title

Description text here

STAT

1,247

STAT

99.97%

STAT

Active

Layout Tokens

Token	Value	Usage
`--topbar-h`	56px	Fixed topbar height. Blur backdrop, 1px border-bottom.
`--sidebar-w`	240px	Fixed sidebar width. White bg, 1px border-right.
`--radius`	12px	Default border radius for cards, inputs, containers.
`--radius-lg`	16px	Large radius for modals, feature cards.
Main padding	1.5rem 2rem	Content area padding. Reduced on mobile.
Grid gap	0.75rem	Default gap for all card/stat grids.

Topbar Anatomy

56px fixed, backdrop-filter: blur(12px)

Dashboard v3.10

admin@example.com

notifications

dark_mode

translate

logout

.topbar {
    height: var(--topbar-h);     /* 56px */
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    position: fixed; top: 0; left: var(--sidebar-w);
    right: 0; z-index: 50;
}

/* Left: Logo (22px) + Divider + Title + Version badge */
/* Right: Email (mono) + Bell (30x30) + Theme + Lang + Logout */

Sidebar Anatomy

240px fixed, colored icon squares (28x28, 7px radius)

Navigation

Home

Systems

Infrastructure

Settings

<a class="sidebar-link active">
  <span class="sidebar-icon" style="background:#744F28;">
    <span class="material-symbols-outlined">home</span>
  </span>
  Home
</a>

/* Icon: 28x28, border-radius: 7px, white icon on colored bg */
/* Active: accent-container bg, on-accent-container text */
/* Link: 36px height, 6px radius, 0.84rem */

Grid System

CSS Grid with auto-responsive columns

4 Columns — Stat Cards

1fr

3 Columns — Standard

1fr

2:1 — Main + Side Panel

Main Content

Side

.grid { display: grid; gap: 0.75rem; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

/* Responsive: auto-fit for stat cards */
.stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

Responsive Breakpoints

Breakpoint	Width	Changes
`Desktop`	> 1200px	Full layout: sidebar visible, all grid columns
`Small Desktop`	901–1200px	grid-4 → 2-col, grid-3 → 2-col
`Tablet`	≤ 900px	Sidebar hidden → hamburger overlay, topbar compact
`Small Tablet`	≤ 600px	Hide email, compact topbar actions
`Phone`	≤ 480px	Single column, smaller padding, reduced font sizes

@media (max-width: 900px) {
    .sidebar { display: none; }
    .main-content { margin-left: 0; }
    .hamburger { display: flex; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .main-content { padding: 1rem; }
}