# Argent Machined

Cool silver CNC precision: hairline drawings, 2px corners, dimension ticks, Space Grotesk headings and a single blueprint cobalt. For engineering software, simulation, CAD and metrology products.

> 由 freedesignmd-library 提交 ac4258d5449a3c280aed4b1ac737684ce7646ede 的结构化规则转换；不是上游原有 Markdown。

## 设计原则

Argent Machined is a technical drawing rendered as an interface. The canvas is cool silver (`#eef0f3`) under a faint 24px blueprint grid, structure is drawn in 1px hairlines with small crop marks at card corners, and numbers carry units and tolerances the way a part print does (`Ø 12.000 ±0.005 mm`). Type pairs Space Grotesk headings with IBM Plex Sans for reading and Plex Mono for every dimension. Blueprint cobalt (`#0b57d0`) is the only chroma and it marks what is selected, measured or editable, like a callout on a drawing.

## 标志性设计

- Blueprint grid: 24px `--grid-line` lattice behind hero and canvas areas, fading out at the edges
- Crop marks: 8px corner ticks on cards instead of rounded corners (2px radius max)
- Dimension labels: mono values with units and `±` tolerance, set between extension lines
- Cobalt callouts mark selection, measurement and editable fields only
- Hairline everything: 1px borders, 1px focus offsets, 1px chart strokes

## 浅色配色

| 角色 | 值 |
| --- | --- |
| background | `#eef0f3` |
| foreground | `#11151a` |
| card | `#f9fafb` |
| cardForeground | `#11151a` |
| muted | `#e2e5ea` |
| mutedForeground | `#4d5663` |
| primary | `#0b57d0` |
| primaryForeground | `#ffffff` |
| secondary | `#e0e4ea` |
| secondaryForeground | `#11151a` |
| accent | `#dbe7fb` |
| accentForeground | `#0a3d91` |
| border | `rgba(17,21,26,0.14)` |
| input | `rgba(17,21,26,0.3)` |
| ring | `#0b57d0` |
| destructive | `#b3261e` |
| destructiveForeground | `#ffffff` |
| success | `#1b7a46` |
| successForeground | `#ffffff` |
| warning | `#f1b72c` |
| warningForeground | `#241a00` |

## 深色配色

| 角色 | 值 |
| --- | --- |
| background | `#0f1216` |
| foreground | `#e9edf2` |
| card | `#161a20` |
| cardForeground | `#e9edf2` |
| muted | `#1f242c` |
| mutedForeground | `#9aa5b4` |
| primary | `#6ea2ff` |
| primaryForeground | `#06101f` |
| secondary | `#232932` |
| secondaryForeground | `#e9edf2` |
| accent | `#17284a` |
| accentForeground | `#cfe0ff` |
| border | `rgba(255,255,255,0.1)` |
| input | `rgba(255,255,255,0.18)` |
| ring | `#8ab4ff` |
| destructive | `#ff8077` |
| destructiveForeground | `#190504` |
| success | `#55d28a` |
| successForeground | `#04140a` |
| warning | `#f1b72c` |
| warningForeground | `#241a00` |

## 字体

```json
{
  "display": "Space Grotesk",
  "body": "IBM Plex Sans",
  "mono": "IBM Plex Mono",
  "googleFontsUrl": "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap",
  "fallbacks": {
    "display": "ui-sans-serif, system-ui, -apple-system, sans-serif",
    "body": "ui-sans-serif, system-ui, -apple-system, sans-serif",
    "mono": "ui-monospace, SFMono-Regular, Menlo, monospace"
  }
}
```

## 排版

```json
{
  "display": {
    "font": "display",
    "size": 64,
    "leading": 1.04,
    "weight": 600,
    "tracking": "-0.04em"
  },
  "h1": {
    "font": "display",
    "size": 42,
    "leading": 1.1,
    "weight": 600,
    "tracking": "-0.03em"
  },
  "h2": {
    "font": "display",
    "size": 26,
    "leading": 1.2,
    "weight": 500,
    "tracking": "-0.02em"
  },
  "h3": {
    "font": "display",
    "size": 17,
    "leading": 1.35,
    "weight": 500,
    "tracking": "-0.01em"
  },
  "body": {
    "font": "body",
    "size": 15,
    "leading": 1.6,
    "weight": 400,
    "tracking": "0em"
  },
  "small": {
    "font": "body",
    "size": 13,
    "leading": 1.5,
    "weight": 400,
    "tracking": "0em"
  },
  "label": {
    "font": "mono",
    "size": 11,
    "leading": 1.3,
    "weight": 500,
    "tracking": "0.08em",
    "uppercase": true
  },
  "mono": {
    "font": "mono",
    "size": 13,
    "leading": 1.55,
    "weight": 400,
    "tracking": "0em"
  }
}
```

## 间距

```json
[
  4,
  8,
  12,
  16,
  24,
  32,
  48,
  64,
  96,
  128
]
```

## 布局

```json
{
  "maxWidth": 1200,
  "columns": 12,
  "gutter": 24,
  "sectionY": 96,
  "sectionYMobile": 56,
  "measure": "68ch",
  "notes": [
    "Everything snaps to the 24px blueprint grid: gutters, card heights and section padding are multiples of 8.",
    "Docs layout: 240px sidebar, 720px content column, 200px on-this-page rail.",
    "Drawings and charts may bleed to the container edge with crop marks showing the true frame."
  ]
}
```

## 圆角

```json
{
  "sm": "1px",
  "md": "2px",
  "lg": "3px",
  "xl": "4px",
  "full": "9999px"
}
```

## 动效

```json
{
  "duration": {
    "instant": 70,
    "fast": 120,
    "base": 200,
    "slow": 380
  },
  "easing": {
    "standard": "cubic-bezier(0.4, 0, 0.2, 1)",
    "out": "cubic-bezier(0.2, 0, 0, 1)",
    "in": "cubic-bezier(0.4, 0, 1, 1)"
  },
  "reveal": {
    "distance": 6,
    "stagger": 40
  },
  "signature": {
    "name": "Trace and lock",
    "description": "Dimension lines and chart strokes draw themselves over the slow duration (stroke-dashoffset), then lock with a 1px cobalt flash on the endpoint. UI chrome transitions in 120ms linear-feeling steps; nothing eases past its final position."
  }
}
```

## 图像

```json
"Orthographic CAD views and exploded assemblies drawn in 1px strokes on the blueprint grid, shaded with flat silver gradients. Photography is limited to machined parts on a white sweep, with callout leader lines in cobalt pointing to features."
```

## 图标

```json
"Sharp-cornered 1.5px stroke icons at 18px on a 24px grid, square caps and miter joins. Measurement glyphs (diameter, angle, tolerance) are custom and always set in `foreground`; only selected tools turn cobalt."
```

## 组件规则

```json
{
  "button": {
    "base": "display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 18px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0em; border-radius: var(--radius-md); border: 1px solid transparent; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard)",
    "primary": {
      "rest": "background: var(--primary); color: var(--primary-foreground); border-color: color-mix(in oklab, var(--primary) 75%, black)",
      "hover": "background: color-mix(in oklab, var(--primary) 88%, white)",
      "active": "background: color-mix(in oklab, var(--primary) 88%, black)"
    },
    "secondary": {
      "rest": "background: var(--silver-sheen); color: var(--secondary-foreground); border-color: var(--input); box-shadow: var(--shadow-sm)",
      "hover": "border-color: var(--primary); color: var(--primary)",
      "active": "background: var(--muted)"
    },
    "outline": {
      "rest": "background: transparent; color: var(--foreground); border-color: var(--foreground)",
      "hover": "background: var(--foreground); color: var(--background)",
      "active": "background: var(--muted); color: var(--foreground)"
    },
    "ghost": {
      "rest": "background: transparent; color: var(--muted-foreground)",
      "hover": "background: var(--accent); color: var(--accent-foreground)",
      "active": "background: var(--secondary)"
    },
    "focus": "outline: 1px solid var(--ring); outline-offset: 3px; box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 20%, transparent)",
    "disabled": "opacity: 0.45; cursor: not-allowed"
  },
  "input": {
    "rest": "display: block; width: 100%; height: 38px; padding: 0 12px; font-family: var(--font-mono); font-size: 14px; color: var(--foreground); background: var(--card); border: 1px solid var(--input); border-radius: var(--radius-md); outline: none; transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard)",
    "placeholder": "color: var(--muted-foreground); opacity: 1",
    "hover": "border-color: var(--foreground)",
    "focus": "border-color: var(--ring); box-shadow: 0 0 0 1px var(--ring), 0 0 0 4px color-mix(in oklab, var(--ring) 18%, transparent)",
    "invalid": "border-color: var(--destructive); box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 22%, transparent)",
    "disabled": "opacity: 0.5; cursor: not-allowed; background: var(--muted)"
  },
  "card": {
    "rest": "background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 24px; transition: border-color var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 24px 24px",
    "hover": "border-color: var(--primary); box-shadow: var(--shadow-md)"
  },
  "badge": {
    "base": "--tone: var(--primary); --tone-foreground: var(--primary-foreground); display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; white-space: nowrap",
    "solid": "background: var(--tone); color: var(--tone-foreground); border: 1px solid var(--tone)",
    "soft": "background: color-mix(in oklab, var(--tone) 12%, var(--card)); color: var(--foreground); border: 1px solid color-mix(in oklab, var(--tone) 28%, transparent)",
    "outline": "background: transparent; color: var(--foreground); border: 1px solid var(--border)"
  },
  "nav": {
    "bar": "display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 24px; background: var(--silver-sheen); border-bottom: 1px solid var(--border)",
    "link": "padding: 6px 2px; margin: 0 10px; border-bottom: 2px solid transparent; border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0em; color: var(--muted-foreground); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard)",
    "linkHover": "color: var(--foreground); border-bottom-color: var(--border)",
    "linkActive": "color: var(--foreground); border-bottom-color: var(--primary)"
  },
  "table": {
    "table": "width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums",
    "th": "text-align: left; height: 40px; padding: 0 16px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; background: var(--muted); color: var(--muted-foreground); border-bottom: 1px solid var(--border)",
    "td": "height: 40px; padding: 0 16px; border-bottom: 1px solid var(--border); color: var(--foreground); transition: background-color var(--duration-fast) var(--ease-standard)",
    "rowHover": "background: var(--accent); color: var(--accent-foreground)"
  },
  "dialog": {
    "overlay": "position: fixed; inset: 0; background: rgba(17,21,26,0.5); display: grid; place-items: center; padding: 24px",
    "panel": "width: min(520px, 100%); background: var(--card); color: var(--card-foreground); border: 1px solid var(--foreground); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 24px"
  },
  "tabs": {
    "list": "display: flex; gap: 24px; border-bottom: 1px solid var(--border)",
    "tab": "height: 40px; padding: 0; margin-bottom: -1px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted-foreground); cursor: pointer; font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0em; transition: color var(--duration-base) var(--ease-standard), background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard)",
    "tabHover": "color: var(--foreground)",
    "tabActive": "color: var(--foreground); border-bottom-color: var(--primary)"
  },
  "link": {
    "rest": "color: var(--primary); text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--duration-fast) var(--ease-standard), text-decoration-color var(--duration-fast) var(--ease-standard)",
    "hover": "color: var(--accent-foreground)"
  }
}
```

## 额外规则

```json
{
  "primary": "Blueprint cobalt: selection, measured values, the one primary action. It marks what the user can edit or inspect.",
  "mutedForeground": "Axis labels, units and annotations; never for primary values."
}
```

## 推荐做法

- Print values with units and tolerance in mono: `Ø 12.000 ±0.005 mm`
- Align cards, charts and sections to the 24px grid
- Use cobalt only for what is selected, measurable or editable
- Add 8px crop-mark corners to hero cards and drawings
- Draw charts with 1px strokes and label axes with units in `muted-foreground`

## 避免做法

- Don't round corners beyond 4px or use pill buttons
- Don't use gradients other than `--silver-sheen`; metal is suggested, not rendered
- Don't use cobalt as a decorative fill or for large backgrounds
- Don't hide units: a bare number in this system is a bug
- Don't use drop shadows heavier than `--shadow-md` inside the app shell

## 来源

https://github.com/tammo1007/freedesignmd-library/blob/ac4258d5449a3c280aed4b1ac737684ce7646ede/design-systems/argent-machined.ts

源码按上游 MIT 许可分发，详见随附 LICENSE。