Flattened Design Guidelines & Do's and Don'ts

Comprehensive visual and technical rules for building flattened, single-line management interfaces across Viet Co Tuong.

Visual Do's & Don'ts Comparison

Directly resolving the thick lines, gutter trenches, and multi-layer shadows.

❌ THICK LINE / SHADOW GUTTER (NO) Anti-pattern: Visual Gutter Clutter

Technical Token Specifications

Design token mappings for colors, typography scale, and Skin B density geometry.

--v-color-bg Page and canvas background

Light: #f1efe8

Dark: #0f1714

--v-color-surface Cards, sidebars, table background

Light: #fffdf7

Dark: #15211d

--v-color-surface-elevated Header, dropdowns, top overlays

Light: #ffffff

Dark: #1b2b26

--v-color-text Headings and primary text

Light: #15211d

Dark: #e3ece8

--v-color-text-muted Labels, subtitles, metadata

Light: #53605b

Dark: #9eb1aa

--v-color-border Crisp 1px hairline border

Light: rgba(21, 33, 29, 0.14)

Dark: rgba(227, 236, 232, 0.16)

--v-color-primary Forest jade brand primary / active accents

Light: #0f5a48

Dark: #49a389

--v-color-primary-contrast Text on primary buttons

Light: #f8faf8

Dark: #06120d

--v-color-success Success state and finished jobs

Light: #166534

Dark: #4ade80

--v-color-danger Errors, destructive actions

Light: #b91c1c

Dark: #f87171

--v-color-warning Warnings and caution badges

Light: #b45309

Dark: #f59e0b

Copy-Paste CSS Recipes for Apps

Standard CSS blocks to use directly in apps/dash and apps/home.

1. Single-Line Sidebar Boundary & Seamless Active Item

/* Sidebar right-border is the separator. Active item merges into content */
.sidebar {
  border-inline-end: 1px solid var(--v-color-border);
  background: var(--v-color-surface);
}

.sidebar-link {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-inline-end: 1px solid transparent;
}

/* Active item has top/bottom borders, shares content background, masks right border */
.sidebar-link[aria-current="page"] {
  background: var(--v-color-bg);
  color: var(--v-color-primary);
  box-shadow: inset 3px 0 0 var(--v-color-primary);
  border-top: 1px solid var(--v-color-border);
  border-bottom: 1px solid var(--v-color-border);
  margin-inline-end: -1px;
  position: relative;
  z-index: 2;
  border-inline-end: 1px solid var(--v-color-bg);
}

.content {
  background: var(--v-color-bg);
  border-inline-start: 0;
  margin-inline-start: 0;
}

2. Button Tabs & Segmented Pills (Skin B)

.btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.btn-tab {
  min-height: 2rem;
  padding: 0 0.75rem;
  border: 1px solid var(--v-color-border);
  border-radius: var(--v-radius-xs, 2px);
  background: var(--v-color-surface);
  font-size: var(--v-text-label);
  font-weight: 600;
}

.btn-tab.active,
.btn-tab[aria-selected="true"] {
  border-color: var(--v-color-primary);
  color: var(--v-color-primary);
  background: color-mix(in srgb, var(--v-color-primary) 8%, var(--v-color-surface));
}

3. Master-Detail Split Pane (Messages & Chat)

.split-container {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) 1fr;
  border: 1px solid var(--v-color-border);
  border-radius: var(--v-radius-sm, 6px);
  background: var(--v-color-surface);
}

.split-master {
  border-inline-end: 1px solid var(--v-color-border); /* Single Line */
}

.split-header {
  border-bottom: 1px solid var(--v-color-border); /* Single Line */
}