name: Local Link Kr Mobile Design System
description: Dark compact mobile surface for bilingual local-service requests and session actions.
colors:
background: "#101415"
surface: "#182022"
text: "#f7fbf8"
muted: "#9aa8a1"
accent: "#8fe388"
border: "#2b3834"
danger: "#ffb4a8"
typography:
body: { fontFamily: "system React Native font", fontSize: 14px, fontWeight: 400, lineHeight: 20px, letterSpacing: 0 }
title: { fontFamily: "system React Native font", fontSize: 28px, fontWeight: 800, lineHeight: 1.15, letterSpacing: 0 }
subtitle: { fontFamily: "system React Native font", fontSize: 15px, fontWeight: 400, lineHeight: 22px, letterSpacing: 0 }
button: { fontFamily: "system React Native font", fontSize: 15px, fontWeight: 700, lineHeight: 1.2, letterSpacing: 0 }
meta: { fontFamily: "system React Native font", fontSize: 12px, fontWeight: 700, lineHeight: 1.2, letterSpacing: 0 }
spacing:
xs: 6px
sm: 10px
md: 16px
lg: 24px
xl: 32px
rounded:
md: 8px
components:
root: { padding: 24px, gap: 16px, background: "{colors.background}" }
primaryButton: { minHeight: 48px, radius: 8px, paddingHorizontal: 16px, background: "{colors.accent}" }
languageButton: { radius: 8px, border: "1px solid {colors.border}", padding: "6px 10px" }
stat: { radius: 8px, border: "1px solid {colors.border}", padding: 16px }
requestRow: { radius: 8px, border: "1px solid {colors.border}", background: "{colors.surface}", padding: 16px }Overview
Local Link Kr Mobile is a compact Expo mobile UI for local request and session workflows. The design is dark, direct, and service-oriented: language switching, session actions, local region/category/business counts, and request rows are visible on the first home surface.
The visual source is the mobile theme token file, the primary button component, and the home screen implementation.
Colors
The palette is near-black with green accent. background anchors the screen, surface frames rows, text is high contrast, muted supports helper copy, border separates panels, and danger is reserved for error text.
Accent should be used for primary buttons, status badges, and decisive actions. Avoid adding multiple bright brand colors; local-service clarity matters more than decoration.
Typography
Use native React Native fonts. The title is 28px and heavy. Subtitles are 15px with 22px line height. Buttons use 15px bold text on accent. Row titles are 16px heavy; metadata and badges are 12px.
Layout
Home uses a ScrollView content container with 24px padding and 16px gaps. The header is a row with flexible text and a compact language button. Actions stack vertically. Stats form a three-column row, then request rows follow.
Elevation & Depth
Depth is minimal. Use surface background and borders rather than shadows. Pressed buttons use opacity changes.
Shapes
The app uses a single 8px radius for buttons, language switch, stats, and request rows. Keep this consistency unless a later component needs a true pill.
Components
PrimaryButton is accent-filled, at least 48px tall, centered, and disabled via opacity. LanguageButton is bordered and compact. Stat cards show a heavy value and muted label. Request rows show title, status badge, metadata, and body text.
Do's and Don'ts
Do keep Korean and English labels short enough for mobile rows.
Do keep primary actions clearly stacked and reachable.
Do reserve danger for real session or request errors.
Don't add large illustrative cards.
Don't weaken contrast on request titles or current user state.