Blog Figma

:root {
  --color-dominant: #f5a83d;
  --color-surface: #1a1104;
  --color-ink: #f7b569;
  --color-accent: #648474;
  --color-detail: #d3b5c1;
}

/* CSS variables exposed by source */
:root {
  --font-figma-sans: "figmaSans","figmaSans Fallback",SF Pro Display,system-ui,helvetica,sans-serif;
  --font-figma-mono: "figmaMono","figmaMono Fallback",SF Mono,menlo,monospace;
  --fig-typography-lh-tight: 1.1;
  --fig-theme-btn-primary-bg: #000000;
  --fig-typography-size-formLabel: 0.75rem;
  --fig-elevation-1-shadow: 0 0.25rem 2rem color-mix(in oklch, #000000, transparent 90%);
  --fig-typography-ls-slight: 0rem;
  --fig-theme-fg: #000000;
  --fig-typography-variation-wdth-condensed: 96;
  --fig-grid-max-content-width: 95rem;
  --f-lego-block-padding: 7.5rem;
  --fig-section-block-padding: 5rem;
  --fig-space-8: 0.5rem;
  --fig-theme-form-input-bg: color-mix(in oklch, #000000, transparent 92%);
  --global-font-mono: "figmaMono","figmaMono Fallback",SF Mono,menlo,monospace;
  --fig-typography-size-title1: 3.5rem;
  --fig-typography-size-button: 1rem;
  --fig-theme-form-placeholder: color-mix(in oklch, #000000, transparent 46%);
  --fig-theme-card-bg: color-mix(in oklch, #000000, transparent 96%);
  --fig-elevation-2: 0 1.5rem 4.375rem 0 color-mix(in oklch, #000000, transparent 90%);
  --blog-grid-columns: 24;
  --fig-space-12: 0.75rem;
  --blog-grid-gutters: 23;
  --fig-radius-full: 9999px;
  --fig-typography-size-caption: 0.875rem;
  --fig-elevation-2-shadow: 0 1.5rem 4.375rem color-mix(in oklch, #000000, transparent 90%);
  --fig-typography-lh-loose: 1.45;
  --fig-theme-border-hover: color-mix(in oklch, #000000, transparent 60%);
  --fig-theme-btn-transparent-bg-hover: color-mix(in oklch, #000000, transparent 92%);
  --fig-typography-size-display1: 5.5rem;
  --f-col-width: calc(min(100vw, 1440px) / 48);
  --fig-theme-border: color-mix(in oklch, #000000, transparent 84%);
  --blog-grid-container-width: 1632px;
  --fig-typography-ls-wide: 0.03125rem;
  --fig-radius-24: 1.5rem;
  --fig-typography-lh-none: 1;
  --fig-typography-ls-standard: -0.04125rem;
  --global-statsig-overlay: #131313;
  --fig-space-120: 7.5rem;
  --global-font-sans: "figmaSans","figmaSans Fallback",SF Pro Display,system-ui,helvetica,sans-serif;
  --fig-typography-weight: normal;
  --fig-typography-variation-wght-bolder: 700;
  --fig-radius-28: 1.75rem;
  --fig-grid-gutter: 1rem;
  --fig-typography-size-bodyXL: 1.5rem;
  --fig-grid-col-width: calc((min(100vw - (2.5rem * 2) - 0rem, 95rem) - (1rem * (12 - 1))) / 12);
  --fig-typography-lh-relaxed: 1.4;
  --fig-theme-btn-ghost-bg-hover: color-mix(in oklch, #000000, transparent 96%);
  --fig-typography-ls-tight: -0.078125rem;
  --blog-grid-gutter-width: 24px;
  --fig-radius-8: 0.5rem;
  --fig-theme-form-error-fg: #FFFFFF;
  --fig-radius-2: 0.125rem;
  --fig-theme-form-error-bg: #972121;
  --fig-elevation-1: 0 0.25rem 2rem 0 color-mix(in oklch, #000000, transparent 90%);
  --f-gutter: calc(calc(min(100vw, 1440px) / 48) * 2);
  --fig-typography-variation-wdth-normal: 100;
  --fig-space-16: 1rem;
  --global-scrollbar-width: 0rem;
  --fig-grid-columns: 12;
}