name: nk304 Mobile Design System
description: Soft green enterprise workspace UI for mobile operations, assistant, inventory, tickets, admin, and collaboration screens.
colors:
screen: "#f4f7f2"
surface: "#fafbf7"
surface2: "#edf3ea"
card: "#fbfcf8"
cardActive: "#e5efe2"
border: "#d4dece"
text: "#18231b"
textSecondary: "#52604f"
textMuted: "#7b8677"
primary: "#d8ead8"
primaryStrong: "#17604d"
workspaceBg: "#eef6ef"
workspaceCard: "#fbfcf8"
workspaceAccent: "#3e7a96"
success: "#237a55"
danger: "#c33d37"
warning: "#a66316"
typography:
meta: { fontFamily: "system React Native font", fontSize: 12px, fontWeight: 600, lineHeight: 1.25, letterSpacing: 0 }
body: { fontFamily: "system React Native font", fontSize: 15px, fontWeight: 400, lineHeight: 22px, letterSpacing: 0 }
bodyLarge: { fontFamily: "system React Native font", fontSize: 17px, fontWeight: 600, lineHeight: 1.3, letterSpacing: 0 }
section: { fontFamily: "system React Native font", fontSize: 20px, fontWeight: 700, lineHeight: 1.2, letterSpacing: 0 }
title: { fontFamily: "system React Native font", fontSize: 28px, fontWeight: 700, lineHeight: 1.15, letterSpacing: 0 }
spacing:
xs: 4px
sm: 8px
md: 12px
lg: 16px
xl: 20px
xxl: 24px
xxxl: 32px
rounded:
sm: 6px
md: 8px
lg: 10px
xl: 16px
pill: 999px
components:
screen: { paddingHorizontal: 16px, gap: 16px, background: "{colors.screen}" }
panel: { padding: 16px, gap: 12px, radius: 10px, border: "1px solid {colors.border}", shadow: "0 10px 28px rgba(37, 56, 43, 0.10)" }
textField: { minHeight: 48px, radius: 8px, background: "{colors.surface2}", paddingHorizontal: 12px }
primaryButton: { minHeight: 48px, radius: 8px, background: "{colors.primaryStrong}" }
statusPill: { radius: 999px, padding: "4px 12px", border: "1px solid currentColor" }
brandMark: { size: 56px, radius: 16px, background: "{colors.primary}" }Overview
nk304 Mobile is an Expo Router workspace application with many operational surfaces: assistant, rooms, workspaces, inventory, tickets, notices, reports, admin data, system status, audit logs, files, settings, and open-chat flows. The design system must keep those surfaces coherent through shared primitives.
The visual source is apps/mobile/src/ui/theme.ts and apps/mobile/src/ui/primitives.tsx.
Colors
The palette is soft green-gray. screen is the base, surface and card hold content, surface2 supports inputs, and primaryStrong is the main action color. workspaceAccent provides a secondary blue-green for workspace-specific accents.
Semantic colors are success, danger, and warning. StatusPill maps tone to semantic color but stays outline-first.
Typography
The type scale is compact: 12px meta, 15px body, 17px bodyLarge, 20px section, and 28px title. Headings and buttons are bold but not oversized, which is important for dense enterprise screens.
Layout
Screen and SafeScrollView own safe-area-aware padding. Content uses 16px horizontal padding and a 16px gap by default. Panels provide the dominant repeated surface across screens.
Elevation & Depth
Panels use a subtle green shadow and a one-pixel border. Most controls should use background, border, and semantic color rather than heavy elevation.
Shapes
Use 8px to 10px for controls and panels, 16px for brand marks or large icons, and 999px for status pills. Keep radius modest so dense admin and inventory surfaces remain structured.
Components
Screen and SafeScrollView handle safe areas. Panel is the default content group. Heading, Label, and Body encode typography. TextField uses surface2 and primaryStrong selection. PrimaryButton uses primaryStrong fill and surface text. StatusPill is outlined and semantic.
BrandHeader combines the brand mark, label, title, and subtitle. It should appear at onboarding or top-level identity moments, not inside every dense table-like screen.
Do's and Don'ts
Do build new mobile screens from the shared primitives.
Do keep safe-area behavior in Screen or SafeScrollView.
Do use semantic colors for operational state.
Don't hardcode screen-specific colors when a theme token exists.
Don't make every workflow look like a marketing landing page.