{
  "name": "Noir",
  "version": 1,
  "meta": {
    "source": "wallflower-ui",
    "preset": "noir",
    "fonts": {
      "sans": "Hanken Grotesk",
      "display": "Cormorant Garamond",
      "serif": "Playfair Display",
      "mono": "IBM Plex Mono"
    }
  },
  "color": {
    "themes": [
      {
        "id": "light",
        "name": "Light"
      },
      {
        "id": "dark",
        "name": "Dark"
      }
    ],
    "tokens": [
      {
        "name": "background",
        "value": {
          "light": "#f7f3ea",
          "dark": "#0b0a08"
        },
        "usage": "Page background."
      },
      {
        "name": "foreground",
        "value": {
          "light": "#16130e",
          "dark": "#f1ead9"
        },
        "usage": "Body text on background."
      },
      {
        "name": "card",
        "value": {
          "light": "#fbf8f1",
          "dark": "#13110d"
        },
        "usage": "Card and panel surface."
      },
      {
        "name": "card-foreground",
        "value": {
          "light": "#16130e",
          "dark": "#f1ead9"
        },
        "usage": "Text on card."
      },
      {
        "name": "popover",
        "value": {
          "light": "#fbf8f1",
          "dark": "#13110d"
        },
        "usage": "Menus, popovers, tooltips."
      },
      {
        "name": "popover-foreground",
        "value": {
          "light": "#16130e",
          "dark": "#f1ead9"
        },
        "usage": "Text on popover."
      },
      {
        "name": "primary",
        "value": {
          "light": "#16130e",
          "dark": "#d4af37"
        },
        "usage": "Primary buttons and key actions."
      },
      {
        "name": "primary-foreground",
        "value": {
          "light": "#f7f3ea",
          "dark": "#1a1404"
        },
        "usage": "Text and icons on primary."
      },
      {
        "name": "secondary",
        "value": {
          "light": "#ece5d6",
          "dark": "#1f1b14"
        },
        "usage": "Secondary buttons, subtle fills."
      },
      {
        "name": "secondary-foreground",
        "value": {
          "light": "#16130e",
          "dark": "#f1ead9"
        },
        "usage": "Text on secondary."
      },
      {
        "name": "muted",
        "value": {
          "light": "#ece5d6",
          "dark": "#1a1712"
        },
        "usage": "Muted fills: skeletons, code, table stripes."
      },
      {
        "name": "muted-foreground",
        "value": {
          "light": "#5f5646",
          "dark": "#a99f89"
        },
        "usage": "Secondary text on background or muted."
      },
      {
        "name": "accent",
        "value": {
          "light": "#efe3c2",
          "dark": "#2a2214"
        },
        "usage": "Hover and selected fills for menu items."
      },
      {
        "name": "accent-foreground",
        "value": {
          "light": "#3a2e10",
          "dark": "#f1ead9"
        },
        "usage": "Text on accent."
      },
      {
        "name": "destructive",
        "value": {
          "light": "#9e1c1c",
          "dark": "#e0605a"
        },
        "usage": "Destructive actions and errors."
      },
      {
        "name": "destructive-foreground",
        "value": {
          "light": "#ffffff",
          "dark": "#1a0403"
        },
        "usage": "Text on destructive."
      },
      {
        "name": "border",
        "value": {
          "light": "#d9cfbb",
          "dark": "#2b261d"
        },
        "usage": "Dividers and card borders."
      },
      {
        "name": "input",
        "value": {
          "light": "#8c8070",
          "dark": "#6b604c"
        },
        "usage": "Form control borders (3:1 on background)."
      },
      {
        "name": "ring",
        "value": {
          "light": "#a8841c",
          "dark": "#d4af37"
        },
        "usage": "Focus rings."
      },
      {
        "name": "chart-1",
        "value": {
          "light": "#a8841c",
          "dark": "#d4af37"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "chart-2",
        "value": {
          "light": "#16130e",
          "dark": "#f1ead9"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "chart-3",
        "value": {
          "light": "#6b5d45",
          "dark": "#a99f89"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "chart-4",
        "value": {
          "light": "#8a6d3b",
          "dark": "#c08b4a"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "chart-5",
        "value": {
          "light": "#9e1c1c",
          "dark": "#e0605a"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar",
        "value": {
          "light": "#f1ebdf",
          "dark": "#0f0d0a"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-foreground",
        "value": {
          "light": "#16130e",
          "dark": "#f1ead9"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-primary",
        "value": {
          "light": "#16130e",
          "dark": "#d4af37"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-primary-foreground",
        "value": {
          "light": "#f7f3ea",
          "dark": "#1a1404"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-accent",
        "value": {
          "light": "#ece5d6",
          "dark": "#1a1712"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-accent-foreground",
        "value": {
          "light": "#16130e",
          "dark": "#f1ead9"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-border",
        "value": {
          "light": "#d9cfbb",
          "dark": "#2b261d"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "sidebar-ring",
        "value": {
          "light": "#a8841c",
          "dark": "#d4af37"
        },
        "usage": "Chart and sidebar colors (shadcn/ui)."
      },
      {
        "name": "surface",
        "value": {
          "light": "#f1ebdf",
          "dark": "#0f0d0a"
        },
        "usage": "Raised or sunken sections of a page."
      },
      {
        "name": "success",
        "value": {
          "light": "#2f6b3a",
          "dark": "#7fbf7f"
        },
        "usage": "Success states."
      },
      {
        "name": "success-foreground",
        "value": {
          "light": "#ffffff",
          "dark": "#0b1a0b"
        },
        "usage": "Text on success."
      },
      {
        "name": "warning",
        "value": {
          "light": "#d9a521",
          "dark": "#e8c15a"
        },
        "usage": "Warning states."
      },
      {
        "name": "warning-foreground",
        "value": {
          "light": "#231a02",
          "dark": "#1f1702"
        },
        "usage": "Text on warning."
      },
      {
        "name": "info",
        "value": {
          "light": "#2c4f7c",
          "dark": "#8fb3e0"
        },
        "usage": "Informational states."
      },
      {
        "name": "info-foreground",
        "value": {
          "light": "#ffffff",
          "dark": "#0b1626"
        },
        "usage": "Text on info."
      },
      {
        "name": "brand",
        "value": {
          "light": "#b8902a",
          "dark": "#d4af37"
        },
        "usage": "Brand color: gradients, highlights, illustrations."
      },
      {
        "name": "brand-2",
        "value": {
          "light": "#8a6d3b",
          "dark": "#c08b4a"
        },
        "usage": "Second brand color, paired with brand in gradients."
      }
    ]
  },
  "type": {
    "families": {
      "sans": "\"Hanken Grotesk\", ui-sans-serif, system-ui, sans-serif",
      "display": "\"Cormorant Garamond\", ui-serif, Georgia, serif",
      "serif": "\"Playfair Display\", ui-serif, Georgia, serif",
      "mono": "\"IBM Plex Mono\", ui-monospace, SFMono-Regular, Menlo, monospace"
    },
    "groups": [
      {
        "name": "Display",
        "family": "display",
        "styles": [
          {
            "name": "display",
            "fontSize": "5rem",
            "lineHeight": "1.02",
            "fontWeight": 700,
            "letterSpacing": "-0.035em"
          },
          {
            "name": "h1",
            "fontSize": "3.5rem",
            "lineHeight": "1.08",
            "fontWeight": 700,
            "letterSpacing": "-0.03em"
          },
          {
            "name": "h2",
            "fontSize": "2.5rem",
            "lineHeight": "1.15",
            "fontWeight": 650,
            "letterSpacing": "-0.02em"
          }
        ]
      },
      {
        "name": "Text",
        "family": "sans",
        "styles": [
          {
            "name": "h3",
            "fontSize": "1.75rem",
            "lineHeight": "1.25",
            "fontWeight": 600,
            "letterSpacing": "-0.015em"
          },
          {
            "name": "h4",
            "fontSize": "1.125rem",
            "lineHeight": "1.4",
            "fontWeight": 600,
            "letterSpacing": "-0.01em"
          },
          {
            "name": "lead",
            "fontSize": "1.25rem",
            "lineHeight": "1.6",
            "fontWeight": 400,
            "letterSpacing": "0em"
          },
          {
            "name": "body",
            "fontSize": "1rem",
            "lineHeight": "1.6",
            "fontWeight": 400,
            "letterSpacing": "0em"
          },
          {
            "name": "small",
            "fontSize": "0.875rem",
            "lineHeight": "1.5",
            "fontWeight": 400,
            "letterSpacing": "0em"
          },
          {
            "name": "caption",
            "fontSize": "0.75rem",
            "lineHeight": "1.4",
            "fontWeight": 500,
            "letterSpacing": "0.01em"
          }
        ]
      },
      {
        "name": "Code",
        "family": "mono",
        "styles": [
          {
            "name": "overline",
            "fontSize": "0.75rem",
            "lineHeight": "1.3",
            "fontWeight": 500,
            "letterSpacing": "0.12em"
          },
          {
            "name": "code",
            "fontSize": "0.875rem",
            "lineHeight": "1.5",
            "fontWeight": 400,
            "letterSpacing": "0em"
          }
        ]
      }
    ]
  },
  "spacing": {
    "tokens": [
      {
        "name": "space-0",
        "value": "0px",
        "usage": "Reset."
      },
      {
        "name": "space-0-5",
        "value": "0.125rem",
        "usage": "Icon nudges."
      },
      {
        "name": "space-1",
        "value": "0.25rem",
        "usage": "Tight gaps inside badges."
      },
      {
        "name": "space-1-5",
        "value": "0.375rem",
        "usage": "Icon-to-label gap."
      },
      {
        "name": "space-2",
        "value": "0.5rem",
        "usage": "Gap between inline controls."
      },
      {
        "name": "space-3",
        "value": "0.75rem",
        "usage": "Input padding, small stacks."
      },
      {
        "name": "space-4",
        "value": "1rem",
        "usage": "Default gap and mobile gutter."
      },
      {
        "name": "space-5",
        "value": "1.25rem",
        "usage": "Compact card padding."
      },
      {
        "name": "space-6",
        "value": "1.5rem",
        "usage": "Card padding."
      },
      {
        "name": "space-8",
        "value": "2rem",
        "usage": "Gap between related sections."
      },
      {
        "name": "space-10",
        "value": "2.5rem",
        "usage": "Desktop gutter."
      },
      {
        "name": "space-12",
        "value": "3rem",
        "usage": "Section padding (mobile)."
      },
      {
        "name": "space-16",
        "value": "4rem",
        "usage": "Section padding."
      },
      {
        "name": "space-20",
        "value": "5rem",
        "usage": "Large section padding."
      },
      {
        "name": "space-24",
        "value": "6rem",
        "usage": "Hero padding."
      },
      {
        "name": "space-32",
        "value": "8rem",
        "usage": "Landing page rhythm."
      }
    ]
  },
  "radius": {
    "tokens": [
      {
        "name": "radius-sm",
        "value": "1.2px",
        "usage": "Badges, small buttons."
      },
      {
        "name": "radius-md",
        "value": "1.6px",
        "usage": "Buttons, inputs."
      },
      {
        "name": "radius-lg",
        "value": "2px",
        "usage": "Cards, popovers."
      },
      {
        "name": "radius-xl",
        "value": "2.8px",
        "usage": "Large cards, dialogs."
      }
    ]
  },
  "shadow": {
    "tokens": [
      {
        "name": "shadow-xs",
        "value": "0 0 0 1px rgb(0 0 0 / 0.05)",
        "usage": "Inputs, subtle lift."
      },
      {
        "name": "shadow-sm",
        "value": "0 0 0 1px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.08)",
        "usage": "Buttons, cards at rest."
      },
      {
        "name": "shadow-md",
        "value": "0 0 0 1px rgb(0 0 0 / 0.06), 0 4px 8px -2px rgb(0 0 0 / 0.12)",
        "usage": "Hovered cards, dropdowns."
      },
      {
        "name": "shadow-lg",
        "value": "0 0 0 1px rgb(0 0 0 / 0.06), 0 12px 24px -6px rgb(0 0 0 / 0.16)",
        "usage": "Popovers, sticky headers."
      },
      {
        "name": "shadow-xl",
        "value": "0 0 0 1px rgb(0 0 0 / 0.06), 0 24px 48px -12px rgb(0 0 0 / 0.24)",
        "usage": "Dialogs, drawers."
      }
    ]
  },
  "breakpoint": {
    "tokens": [
      {
        "name": "bp-xs",
        "value": "30rem",
        "usage": "480px — large phones."
      },
      {
        "name": "bp-sm",
        "value": "40rem",
        "usage": "640px — phablets, small tablets."
      },
      {
        "name": "bp-md",
        "value": "48rem",
        "usage": "768px — tablets portrait."
      },
      {
        "name": "bp-lg",
        "value": "64rem",
        "usage": "1024px — tablets landscape, laptops."
      },
      {
        "name": "bp-xl",
        "value": "80rem",
        "usage": "1280px — desktops."
      },
      {
        "name": "bp-2xl",
        "value": "96rem",
        "usage": "1536px — wide desktops."
      }
    ]
  }
}