2Nong – Design System

Overview

The 2Nong Design System is a shared foundation used across the mobile app and the website. It includes design tokens, reusable components, layout rules, and accessibility guidelines.

The goal is to ensure every new feature feels consistent, works well for low-tech users, and can be implemented efficiently by engineering teams.

Why a Design System

• UI inconsistency between app screens and website pages
• Duplicated components and repeated styling decisions
• Slower design-to-dev handoff and higher rework cost
• Accessibility gaps across different teams and platforms

Scope

• App: core flows, camera capture, results, guidance, and account areas
• Website: marketing pages, project pages, and content layouts
• Shared: typography, color, spacing, iconography, motion, and states

Foundations

• Typography scale optimized for readability and large text
• Color palette with strong contrast and clear semantic meanings
• Spacing and layout rules to reduce cognitive load
• Consistent elevation, radius, and icon usage

Component Library

Reusable components are designed with consistent variants and states across App + Website:

• Buttons, badges, form fields, and navigation
• Cards, lists, empty states, and content blocks
• Feedback patterns: alerts, toasts, loading, and error states
• AI result presentation: confidence, severity, and recommendations layout

Documentation & Governance

• Storybook documentation with usage guidelines and examples
• Component naming conventions and variant rules
• Do/Don't guidance to keep patterns consistent
• Contribution workflow for adding or updating components

Implementation

For the website, components align with Bootstrap 5 patterns and utilities to keep implementation fast. For the app, the same design tokens and component specifications ensure consistent behavior and visuals.

• Reusable UI patterns mapped to code-friendly variants
• Accessible touch targets and readable defaults
• States defined for loading, error, empty, and success

Impact

• Faster delivery with fewer UI regressions and rework
• Consistent experience across App + Website
• Clearer handoff between Product, Design, and Engineering
• Improved accessibility and usability for low-tech users

Next Steps

• Expand component coverage and patterns for new features
• Introduce theming support for seasonal campaigns
• Add visual regression checks to protect UI consistency
• Improve cross-platform alignment for AI results and education content