Designer who codes.
Developer who designs.

/* one family, optical sizing across weight × width × optical size */
@font-face {
  font-family: "Atlas";
  src: url("atlas.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-optical-sizing: auto;
}

// contours generated from NOAA bathymetry → topojson
export const buildContours = async (region: Region) => {
  const grid = await loadNOAA(region);
  return grid.toContours({ step: 0.5, smoothing: 1.2 });
};

// tokens drive every variant — Figma & code stay in sync
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ variant = "primary", size = "md", children, ...rest }, ref) => (
    <button
      ref={ref}
      data-variant={variant}
      data-size={size}
      className={`btn btn--${variant} btn--${size}`}
      {...rest}
    >
      {children}
    </button>
  )
);

// zero hardcoded values downstream
btn--primary { background: var(--accent-1); color: var(--fg-strong); }

// Loom brand tokens, exported from Figma via Tokens Studio
{
  "color.brand.indigo": "#1A1F2E",
  "color.brand.dust":  "#C9A38A",
  "color.brand.thread": "#8B7355",
  "type.display": "Fraunces",
  "type.body": "Inter"
}

// WCAG 2.2 contrast ratio for any pair, with AA/AAA reporting
export const contrast = (fg: Hex, bg: Hex) => {
  const l1 = relLum(fg), l2 = relLum(bg);
  const ratio = (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
  return { ratio, aa: ratio >= 4.5, aaa: ratio >= 7 };
};