@agentic-design-kits/verdigris 0.0.0-stage → 2026.1113.1

package/tokens.json

@@ -0,0 +1,618 @@
+{
+ "name": "Verdigris",
+ "version": 1,
+ "color": {
+  "themes": [
+   {
+    "id": "light",
+    "name": "Light"
+   },
+   {
+    "id": "dark",
+    "name": "Dark"
+   }
+  ],
+  "tokens": [
+   {
+    "name": "paper",
+    "value": {
+     "light": "#f2ede1",
+     "dark": "#0b1716"
+    },
+    "usage": "Page background. Warm cream in light, a green-black in dark. Every text color below is checked against it."
+   },
+   {
+    "name": "ink",
+    "value": {
+     "light": "#10201f",
+     "dark": "#ece6d8"
+    },
+    "usage": "Body text, headings and the scotch rule on `paper` (14.4:1 light, 14.7:1 dark). Also the fill of a hovered or pressed outlined button."
+   },
+   {
+    "name": "muted",
+    "value": {
+     "light": "#566460",
+     "dark": "#a6b5b0"
+    },
+    "usage": "Secondary text on `paper` (5.3:1 light, 8.6:1 dark)."
+   },
+   {
+    "name": "rule",
+    "value": {
+     "light": "#c9c5b4",
+     "dark": "#3a4a47"
+    },
+    "usage": "Thin 1px row dividers. Decorative only: never the only boundary of a control."
+   },
+   {
+    "name": "accent",
+    "value": {
+     "light": "#0f8f8c",
+     "dark": "#5fd4cc"
+    },
+    "usage": "Verdigris for LARGE shapes only, and the 3px focus ring (3.4:1 on light `paper`, 10.3:1 dark). Never small text."
+   },
+   {
+    "name": "accent-ink",
+    "value": {
+     "light": "#ffffff",
+     "dark": "#0b1716"
+    },
+    "usage": "Text on a verdigris fill: 6.3:1 on light `accent-text`, 10.3:1 dark."
+   },
+   {
+    "name": "accent-text",
+    "value": {
+     "light": "#0b6b69",
+     "dark": "#5fd4cc"
+    },
+    "usage": "Verdigris for small text on `paper` (5.4:1 light, 10.3:1 dark) and the fill of the primary button."
+   },
+   {
+    "name": "accent-bright",
+    "value": {
+     "light": "#5fd4cc",
+     "dark": "#5fd4cc"
+    },
+    "usage": "Verdigris for small text and marks on `bar` (8.5:1)."
+   },
+   {
+    "name": "copper",
+    "value": {
+     "light": "#b0612f",
+     "dark": "#e39a68"
+    },
+    "usage": "Copper for LARGE ornament only (3.9:1 on light `paper`)."
+   },
+   {
+    "name": "copper-text",
+    "value": {
+     "light": "#8f4a22",
+     "dark": "#e39a68"
+    },
+    "usage": "Copper for labels and small ornament on `paper` (5.7:1 light, 7.9:1 dark). Never marks an action."
+   },
+   {
+    "name": "copper-bright",
+    "value": {
+     "light": "#e39a68",
+     "dark": "#e39a68"
+    },
+    "usage": "Copper on `bar` (6.6:1)."
+   },
+   {
+    "name": "bar",
+    "value": {
+     "light": "#0e2a29",
+     "dark": "#132c2a"
+    },
+    "usage": "Dark surfaces that stay dark in both themes: the panel, the drawer, the top bar while either is open, a bottom bar, the toast."
+   },
+   {
+    "name": "bar-ink",
+    "value": {
+     "light": "#f2ede1",
+     "dark": "#ece6d8"
+    },
+    "usage": "Text on `bar` (13:1 light, 11.9:1 dark)."
+   },
+   {
+    "name": "row-hover-bg",
+    "value": {
+     "light": "{bar}",
+     "dark": "#132c2a"
+    },
+    "usage": "List row fill on hover."
+   },
+   {
+    "name": "row-active-bg",
+    "value": {
+     "light": "{bar}",
+     "dark": "{bar}"
+    },
+    "usage": "List row fill when active."
+   },
+   {
+    "name": "row-fg",
+    "value": {
+     "light": "{bar-ink}",
+     "dark": "{ink}"
+    },
+    "usage": "All text on a filled row."
+   },
+   {
+    "name": "row-edge",
+    "value": {
+     "light": "{copper-bright}",
+     "dark": "{copper}"
+    },
+    "usage": "6px left edge of the active row."
+   },
+   {
+    "name": "code-keyword",
+    "value": {
+     "light": "#b3197c",
+     "dark": "#ff6fc4"
+    },
+    "usage": "Code only: magenta for keywords (`import`, `const`, `if`) in a highlighted block on `paper` (5.5:1 light, 7.8:1 dark). Never outside `pre` and `code`."
+   },
+   {
+    "name": "code-string",
+    "value": {
+     "light": "#00727c",
+     "dark": "#4fd3dc"
+    },
+    "usage": "Code only: teal for strings, attribute values and HTML tags on `paper` (5.0:1 light, 10.9:1 dark). Bluer than verdigris, so it never reads as the accent."
+   },
+   {
+    "name": "code-constant",
+    "value": {
+     "light": "#a85000",
+     "dark": "#ffa04a"
+    },
+    "usage": "Code only: orange for numbers, constants, properties, function and attribute names on `paper` (4.8:1 light, 9.7:1 dark). Yellower than vermilion, so it never reads as the accent."
+   },
+   {
+    "name": "code-comment",
+    "value": {
+     "light": "{muted}",
+     "dark": "{muted}"
+    },
+    "usage": "Code only: comments, in `muted` (5.0:1 light, 9.6:1 dark)."
+   },
+   {
+    "name": "code-keyword-bright",
+    "value": {
+     "light": "#ff6fc4",
+     "dark": "#ff6fc4"
+    },
+    "usage": "Code only: magenta on a dark `bar` block (`.pre--bar`), in both themes (7.7:1 light bar, 6.8:1 dark bar)."
+   },
+   {
+    "name": "code-string-bright",
+    "value": {
+     "light": "#4fd3dc",
+     "dark": "#4fd3dc"
+    },
+    "usage": "Code only: teal on a dark `bar` block (10.7:1 light bar, 9.6:1 dark bar)."
+   },
+   {
+    "name": "code-constant-bright",
+    "value": {
+     "light": "#ffa04a",
+     "dark": "#ffa04a"
+    },
+    "usage": "Code only: orange on a dark `bar` block (9.5:1 light bar, 8.5:1 dark bar)."
+   },
+   {
+    "name": "code-comment-bright",
+    "value": {
+     "light": "#b9b5ab",
+     "dark": "#b9b5ab"
+    },
+    "usage": "Code only: comments on a dark `bar` block, the dark theme's `muted` (9.4:1 light bar, 8.4:1 dark bar)."
+   }
+  ]
+ },
+ "type": {
+  "fonts": [
+   {
+    "family": "Cormorant",
+    "file": "fonts/Cormorant-Light.woff2",
+    "weight": "300",
+    "style": "normal"
+   },
+   {
+    "family": "Cormorant",
+    "file": "fonts/Cormorant-LightItalic.woff2",
+    "weight": "300",
+    "style": "italic"
+   },
+   {
+    "family": "Cormorant",
+    "file": "fonts/Cormorant-Medium.woff2",
+    "weight": "500",
+    "style": "normal"
+   },
+   {
+    "family": "Cormorant",
+    "file": "fonts/Cormorant-MediumItalic.woff2",
+    "weight": "500",
+    "style": "italic"
+   },
+   {
+    "family": "Cormorant",
+    "file": "fonts/Cormorant-SemiBold.woff2",
+    "weight": "600",
+    "style": "normal"
+   },
+   {
+    "family": "Cormorant",
+    "file": "fonts/Cormorant-SemiBoldItalic.woff2",
+    "weight": "600",
+    "style": "italic"
+   },
+   {
+    "family": "Source Code Pro",
+    "file": "fonts/SourceCodePro-VF.woff2",
+    "weight": "200 900",
+    "style": "normal"
+   }
+  ],
+  "families": {
+   "sans": "\"Cormorant\", Garamond, \"Iowan Old Style\", Georgia, serif",
+   "mono": "\"Source Code Pro\", ui-monospace, \"SF Mono\", SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace"
+  },
+  "tokens": [
+   {
+    "name": "size-100",
+    "value": "1.125rem",
+    "usage": "The floor is 18px: labels, meta, captions."
+   },
+   {
+    "name": "size-200",
+    "value": "1.25rem",
+    "usage": "Chrome: top bar, panel, drawer, toast."
+   },
+   {
+    "name": "size-300",
+    "value": "1.375rem",
+    "usage": "Body on phones."
+   },
+   {
+    "name": "size-400",
+    "value": "1.625rem",
+    "usage": "Body from 768px; list titles."
+   },
+   {
+    "name": "size-500",
+    "value": "1.75rem",
+    "usage": "Lead on phones; pull quotes."
+   },
+   {
+    "name": "size-600",
+    "value": "1.875rem",
+    "usage": "Lead from 768px; list titles from 768px."
+   },
+   {
+    "name": "size-700",
+    "value": "2.125rem",
+    "usage": "Small headings."
+   },
+   {
+    "name": "size-800",
+    "value": "2.5rem",
+    "usage": "Large list and card titles from 768px."
+   },
+   {
+    "name": "size-900",
+    "value": "2.75rem",
+    "usage": "H2 on phones; menu items."
+   },
+   {
+    "name": "size-1000",
+    "value": "3.75rem",
+    "usage": "H2 from 768px."
+   },
+   {
+    "name": "size-display",
+    "value": "clamp(4.75rem, 12.4vw, 11rem)",
+    "usage": "Hero title."
+   },
+   {
+    "name": "size-display-split",
+    "value": "clamp(4rem, 9.5vw, 9.5rem)",
+    "usage": "Hero title beside an image."
+   },
+   {
+    "name": "size-page-title",
+    "value": "clamp(3.5rem, 9vw, 8rem)",
+    "usage": "Page title, fluid."
+   },
+   {
+    "name": "size-post-feature",
+    "value": "clamp(2.75rem, 5.5vw, 5.25rem)",
+    "usage": "Post feature title, fluid."
+   },
+   {
+    "name": "size-post-title",
+    "value": "clamp(3.5rem, 7.4vw, 5.75rem)",
+    "usage": "Post header title, fluid."
+   },
+   {
+    "name": "weight-body",
+    "value": 500,
+    "usage": "Body copy."
+   },
+   {
+    "name": "weight-medium",
+    "value": 600,
+    "usage": "Small labels, chrome."
+   },
+   {
+    "name": "weight-strong",
+    "value": 600,
+    "usage": "Names and small bold text."
+   },
+   {
+    "name": "weight-display",
+    "value": 300,
+    "usage": "Big headings."
+   },
+   {
+    "name": "leading-body",
+    "value": 1.55,
+    "usage": "Body line height."
+   },
+   {
+    "name": "label-case",
+    "value": "none",
+    "usage": "Always none: Verdigris has no capitals."
+   },
+   {
+    "name": "label-tracking",
+    "value": 0,
+    "usage": "Labels."
+   },
+   {
+    "name": "label-tracking-wide",
+    "value": 0,
+    "usage": "Field labels, top-bar buttons."
+   },
+   {
+    "name": "badge-tracking",
+    "value": 0,
+    "usage": "The ellipse badge."
+   }
+  ],
+  "groups": [
+   {
+    "name": "Headings",
+    "family": "sans",
+    "styles": [
+     {
+      "name": "display",
+      "fontSize": "11rem",
+      "lineHeight": 0.88,
+      "fontWeight": 300,
+      "letterSpacing": "-0.02em",
+      "sample": "Verdigris",
+      "usage": "Hero title, one per page. Fluid: clamp(4.75rem, 12.4vw, 11rem)."
+     },
+     {
+      "name": "h2",
+      "fontSize": "3.75rem",
+      "lineHeight": 1,
+      "fontWeight": 300,
+      "letterSpacing": "-0.025em",
+      "sample": "Selected work",
+      "usage": "Section title under a scotch rule. 2.75rem below 768px, 3rem from 768px."
+     },
+     {
+      "name": "title",
+      "fontSize": "1.875rem",
+      "lineHeight": 1.25,
+      "fontWeight": 600,
+      "letterSpacing": "0.01em",
+      "sample": "Field notes",
+      "usage": "A list item's name. Slightly open tracking. 1.625rem below 768px."
+     }
+    ]
+   },
+   {
+    "name": "Text",
+    "family": "sans",
+    "styles": [
+     {
+      "name": "lead",
+      "fontSize": "1.875rem",
+      "lineHeight": 1.22,
+      "fontWeight": 300,
+      "sample": "Flat color, thick rules, one typeface.",
+      "usage": "Intro paragraph under the hero, a step above body. 1.375rem below 768px.",
+      "fontStyle": "italic"
+     },
+     {
+      "name": "body",
+      "fontSize": "1.625rem",
+      "lineHeight": 1.55,
+      "fontWeight": 500,
+      "sample": "Type does the work. Nothing is decorative.",
+      "usage": "Body copy (Tailwind text-xl, with leading-9 for 1.8). 1.125rem (text-lg) below 768px. Never tracked. The top bar, panel, drawer and toast keep 1rem / 1.5: they are chrome, not reading text."
+     },
+     {
+      "name": "small",
+      "fontSize": "1.125rem",
+      "lineHeight": 1.375,
+      "fontWeight": 500,
+      "sample": "Essay, 2026",
+      "usage": "Meta, sublines, counts. The floor: 18px."
+     }
+    ]
+   },
+   {
+    "name": "Labels",
+    "family": "sans",
+    "styles": [
+     {
+      "name": "label",
+      "fontSize": "1.125rem",
+      "lineHeight": 1.375,
+      "fontWeight": 600,
+      "sample": "ARCHIVE",
+      "usage": "One or two words, sentence case, semibold. Never capitals or small caps."
+     },
+     {
+      "name": "btn-label",
+      "fontSize": "1.375rem",
+      "lineHeight": 1.2,
+      "fontWeight": 600,
+      "sample": "Send",
+      "usage": "Primary and secondary button text, sentence case."
+     },
+     {
+      "name": "btn-tertiary-label",
+      "fontSize": "1.25rem",
+      "lineHeight": 1.2,
+      "fontWeight": 600,
+      "sample": "View details",
+      "usage": "Tertiary button text, sentence case."
+     },
+     {
+      "name": "chip-label",
+      "fontSize": "1.25rem",
+      "lineHeight": 1.2,
+      "fontWeight": 600,
+      "sample": "Design & code",
+      "usage": "Filter button text, sentence case."
+     }
+    ]
+   },
+   {
+    "name": "Navigation and fields",
+    "family": "sans",
+    "styles": [
+     {
+      "name": "menu-item",
+      "fontSize": "2.75rem",
+      "lineHeight": 1.15,
+      "fontWeight": 300,
+      "letterSpacing": "-0.01em",
+      "sample": "About",
+      "usage": "Top-level item in the slide-down panel. 1.75rem below 768px."
+     },
+     {
+      "name": "submenu-item",
+      "fontSize": "1.625rem",
+      "lineHeight": 1.3,
+      "fontWeight": 600,
+      "sample": "The story",
+      "usage": "Sub-items and nested accordion headings in the panel."
+     },
+     {
+      "name": "field-input",
+      "fontSize": "1.625rem",
+      "lineHeight": 1.3,
+      "fontWeight": 500,
+      "sample": "Jane",
+      "usage": "Text typed into an underline-only field."
+     }
+    ]
+   }
+  ]
+ },
+ "spacing": {
+  "tokens": [
+   {
+    "name": "space-1",
+    "value": "0.25rem",
+    "usage": "Gap between a field label and its field."
+   },
+   {
+    "name": "space-2",
+    "value": "0.5rem",
+    "usage": "Gap between filter buttons and between grid columns."
+   },
+   {
+    "name": "space-3",
+    "value": "0.75rem",
+    "usage": "Top bar vertical padding; padding under a section's thick rule; gap between buttons in a group."
+   },
+   {
+    "name": "space-4",
+    "value": "1rem",
+    "usage": "List row vertical padding; row number inset from the left edge; mobile side gutter."
+   },
+   {
+    "name": "space-6",
+    "value": "1.5rem",
+    "usage": "Gap between a section header and its rows; form padding."
+   },
+   {
+    "name": "space-8",
+    "value": "2rem",
+    "usage": "Side gutter from 640px."
+   },
+   {
+    "name": "space-12",
+    "value": "3rem",
+    "usage": "Hero top padding on phones."
+   },
+   {
+    "name": "space-16",
+    "value": "4rem",
+    "usage": "Space between page sections."
+   },
+   {
+    "name": "space-20",
+    "value": "5rem",
+    "usage": "Hero padding from 768px."
+   },
+   {
+    "name": "page-max",
+    "value": "88rem",
+    "usage": "Content width, centered (`.page`, `.panel-inner`)."
+   },
+   {
+    "name": "gutter",
+    "value": "1rem",
+    "usage": "Page side padding. Becomes 2rem from 640px (set in bundle.css)."
+   },
+   {
+    "name": "bar-h",
+    "value": "5rem",
+    "usage": "Height of a fixed bottom bar. The panel and toast stop above it. Set to 0rem when the site has no bottom bar."
+   }
+  ]
+ },
+ "radius": {
+  "tokens": [
+   {
+    "name": "radius-none",
+    "value": "0",
+    "usage": "Everything: buttons, fields, rows, panels, cards. The system is square."
+   },
+   {
+    "name": "radius-round",
+    "value": "9999px",
+    "usage": "Six small marks only: the loading spinner, the \"new\" dot, the drawer's \"more below\" arrow, the radio button, and at 50% the oval badge and the number circle."
+   }
+  ]
+ },
+ "ornament": {
+  "tokens": [
+   {
+    "name": "rosette-line",
+    "value": {
+     "light": "0.9",
+     "dark": "0.6"
+    },
+    "usage": "Stroke width of the rosette, in its 600-unit drawing. Dark lines on paper read thinner than light lines on a dark ground."
+   }
+  ]
+ },
+ "meta": {
+  "source": "files: DESIGN.md, theme.css, fonts.css, verdigris.css, panel.js, new-dot.js, drawer.js, jump.js, favorites.js, icon-controls.js, example.html, astro/"
+ }
+}