misoto22 design

白色重置

一套给软件、写作与摄影用的纯白单色设计系统。底是纸白，记号是近黑，文件里剩下的唯一彩色是状态——它绑定在状态上，永远不绑定品牌。

组件: 49
Token: 137; 亮色与暗色
圆角级数: 4; 没有第五级
带模糊的阴影: 0; 深度是一条细线

安装

pnpm add @misoto22/design

六个运行时依赖——Radix 负责没人该重写的行为，cmdk 负责 combobox 模式，react-day-picker 负责日历，lucide 负责图标，sonner 负责 toast，clsx 加 tailwind-merge 负责让类名冲突按调用方的意思解决。没有路由、没有状态库、没有 CSS-in-JS。

// Once, at your app root — the compiled stylesheet carries the tokens,
// the utilities the components use, and the vendored faces.
import '@misoto22/design/styles.css'

import { Button, Field, Input } from '@misoto22/design'

export function SignIn() {
  return (
    <form className="flex flex-col gap-4">
      <Field label="Email" required>
        <Input type="email" />
      </Field>
      <Button type="submit">Continue</Button>
    </form>
  )
}

基础

色彩一张白纸做底，一个近黑的记号，三种线的粗细，以及状态色。字体排印三种字体，一条标题阶梯，页面标题之上什么都没有。空间与形状页面的边距、几种度量宽度，以及四个圆角。动效一条曲线，三档时长，以及一条不可选的减少动效规则。

组件

已经在用 Tailwind？

把可移植的 token 层单独拿走，省掉第二份工具类。模式是 <html> 上的一个属性，所以它可以在首次绘制前写好，永远不会闪出错误的主题。

/* An app that already compiles Tailwind takes the token layers only, and
   skips a second copy of the utilities. */
@import 'tailwindcss';
@import '@misoto22/design/tokens.css';
@import '@misoto22/design/semantic.css';
@import '@misoto22/design/keyframes.css';

/* Generate the utilities the library's own components use. */
@source '../node_modules/@misoto22/design/dist';

@custom-variant dark (&:is([data-mode='dark'] *));

<!-- The mode is an attribute on <html>, so it can be written before first
     paint and never flashes the wrong theme. -->
<html data-mode="dark">

// Every component merges your className LAST, through tailwind-merge — so a
// conflicting utility replaces the built-in one instead of racing it in the
// stylesheet.
<Button className="px-2">Tight</Button>
// → px-2 wins; the base px-6 is dropped, not emitted alongside it.

你是 agent 在读这一页？

这个站点写了两遍。页面给人看；下面这些文件是同样的内容，写给不渲染 CSS 的读者——每个属性连同类型、键盘约定、完整示例源码，按一次顺序读排好。

/llms.txt索引——这套系统是什么，以及每个组件一条链接。
/llms-full.txt全部内容合成一个文件。
/components/button/llms.txt单个组件，单独一份。