Mote Design System

A lean, framework-agnostic design system for agriculture analytics products with dense telemetry dashboards, live device summaries, and application-event workflows.

This package is intentionally small:

• semantic CSS tokens for brand and theme control
• one Tailwind preset for semantic utilities
• one plain CSS component layer for shared dashboard primitives
• no framework runtime and no build step required

What It Is Optimized For

• telemetry-heavy dashboards with large numbers of datapoints
• workspace-style products with shared shell, filters, charts, and summary rails
• consistent visual language across multiple frontend applications
• light and dark dashboard themes that stay readable at high information density
• Chinese and English UI copy without font fallback glitches

Install

npm install @mote/design-system tailwindcss

Next.js Setup

tailwind.config.js

module.exports = {
  presets: [require("@mote/design-system/preset")],
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/**/*.{js,ts,jsx,tsx,mdx}"
  ]
};

app/globals.css

@import "@mote/design-system/styles.css";

The shared CSS already includes the layout primitives. Add @mote/design-system/plugin only if you want those helpers available as Tailwind plugin utilities as well.

Generic Tailwind App Setup

1. Import @mote/design-system/styles.css after your base stylesheet.
2. Add @mote/design-system/preset to your Tailwind config.
3. Override CSS variables in your app shell or theme layer if you need a different brand.

Brand and Theme Overrides

The system is driven by CSS custom properties. Override tokens in :root, [data-brand], or any app shell wrapper.

:root {
  --ds-color-accent: 19 132 117;
  --ds-color-accent-soft: 221 243 237;
  --ds-color-chart-humidity: 19 132 117;
  --ds-radius-panel: 2rem;
  --ds-font-sans: "Inter", "PingFang SC", "Noto Sans SC", sans-serif;
}

Recommended override groups:

• brand accent and chart colors
• fonts
• panel radius
• canvas tone

Dark mode is token-driven:

<div data-theme="dark">
  <div class="ds-app">...</div>
</div>

The default font stack is bilingual-safe for English and Simplified Chinese. Replace it with your own brand font only if the replacement also covers both scripts or has a reliable CJK fallback chain.

Do not introduce a third panel depth. The system is intentionally limited to:

• panel: large dashboard section
• subpanel: smaller repeated or supporting section inside a panel

Use spacing, not another card level, to separate major dashboard regions.

Tailwind Tokens

The preset exposes semantic keys such as:

• bg-ds-canvas
• bg-ds-surface
• bg-ds-surfaceAlt
• text-ds-strong
• text-ds-body
• text-ds-muted
• text-ds-accent
• border-ds-line
• shadow-ds-panel
• rounded-ds-panel
• backdrop-blur-ds

It also adds layout helpers:

• ds-layout-toolbar
• ds-layout-metrics
• ds-layout-split
• ds-focus-ring

Shared Component Classes

The CSS layer provides a minimal dashboard vocabulary:

• ds-app
• ds-shell
• ds-sidebar
• ds-main
• ds-panel
• ds-subpanel
• ds-toolbar
• ds-control
• ds-metric-grid
• ds-kpi-card
• ds-data-list
• ds-table
• ds-button
• ds-pill

These classes are plain CSS, so they can be used in React, Vue, Svelte, Astro, or server-rendered HTML without a wrapper library.

Example Markup

export function TelemetryWorkspace() {
  return (
    <div className="ds-app">
      <div className="ds-shell">
        <aside className="ds-sidebar">{/* nav */}</aside>
        <main className="ds-main">
          <header className="ds-page-header">{/* title + filters */}</header>

          <section className="ds-toolbar ds-layout-toolbar">
            <label className="ds-control">Search metrics</label>
            <label className="ds-control">Farm</label>
            <label className="ds-control">Zone</label>
            <label className="ds-control">Window</label>
            <label className="ds-control">Cadence</label>
          </section>

          <section className="ds-metric-grid ds-layout-metrics">
            <article className="ds-panel ds-kpi-card">{/* KPI */}</article>
            <article className="ds-panel ds-kpi-card">{/* KPI */}</article>
            <article className="ds-panel ds-kpi-card">{/* KPI */}</article>
          </section>

          <section className="ds-layout-split">
            <article className="ds-panel">{/* chart panel */}</article>
            <aside className="ds-panel ds-panel-stack">{/* summary rail */}</aside>
          </section>
        </main>
      </div>
    </div>
  );
}

Product Rationale

See DESIGN.md for the ADR-derived frontend scope, the visual rules extracted from the reference screenshot, and the design principles behind this package.

Preview

Open preview/index.html to inspect the typography, palette, KPI cards, split layout, and table treatment without bootstrapping an app shell first.