Column

/* Column public design reference tokens. */
/* Source: https://column.com */
@theme {
  --color-ink-blue: #011821;
  --color-ghost-white: #ffffff;
  --color-fog-gray: #f6f6f8;
  --color-steel-gray: #e3e4e8;
  --color-deep-plum: #111a4a;
  --color-action-orange: #ec652b;
  --color-callout-cyan: #167e6c;
  --font-suisse-style: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-system-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --radius-default: 8px;
  --radius-controls: 8px;
  --radius-panels: 8px;
  --shadow-subtle: rgba(17, 26, 74, 0.1) 0px 1px 3px, rgba(255,255,255,0.5) 0px 1px 0px inset;
}

/* Column public design reference tokens. */
/* Source: https://column.com */
:root {
  --color-ink-blue: #011821;
  --color-ghost-white: #ffffff;
  --color-fog-gray: #f6f6f8;
  --color-steel-gray: #e3e4e8;
  --color-deep-plum: #111a4a;
  --color-action-orange: #ec652b;
  --color-callout-cyan: #167e6c;
  --font-suisse-style: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-system-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --radius-default: 8px;
  --radius-controls: 8px;
  --radius-panels: 8px;
  --shadow-subtle: rgba(17, 26, 74, 0.1) 0px 1px 3px, rgba(255,255,255,0.5) 0px 1px 0px inset;
}

{
  "name": "Column",
  "id": "column",
  "sourceUrl": "https://column.com",
  "capturedAt": "2026-04-11T18:51:18.967Z",
  "color": {
    "colorInkBlue": {
      "$type": "color",
      "$value": "#011821",
      "$description": "Primary text and headings.",
      "group": "neutral"
    },
    "colorGhostWhite": {
      "$type": "color",
      "$value": "#ffffff",
      "$description": "Page and card surface.",
      "group": "surface"
    },
    "colorFogGray": {
      "$type": "color",
      "$value": "#f6f6f8",
      "$description": "Secondary section background.",
      "group": "surface"
    },
    "colorSteelGray": {
      "$type": "color",
      "$value": "#e3e4e8",
      "$description": "Borders and dividers.",
      "group": "neutral"
    },
    "colorDeepPlum": {
      "$type": "color",
      "$value": "#111a4a",
      "$description": "Brand accent and secondary action.",
      "group": "brand"
    },
    "colorActionOrange": {
      "$type": "color",
      "$value": "#ec652b",
      "$description": "Primary action and high-attention markers.",
      "group": "accent"
    },
    "colorCalloutCyan": {
      "$type": "color",
      "$value": "#167e6c",
      "$description": "Secondary confirmation and callout state.",
      "group": "semantic"
    }
  },
  "typography": {
    "fontSuisseStyle": {
      "$type": "fontFamily",
      "$value": "Inter, ui-sans-serif, system-ui, sans-serif",
      "$description": "Compressed-feeling UI and headline typography with controlled tracking."
    },
    "fontSystemMono": {
      "$type": "fontFamily",
      "$value": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
      "$description": "Numerical values, code, balances, and transaction-like labels."
    }
  },
  "spacing": {
    "spacing4": {
      "$type": "dimension",
      "$value": "4px"
    },
    "spacing8": {
      "$type": "dimension",
      "$value": "8px"
    },
    "spacing12": {
      "$type": "dimension",
      "$value": "12px"
    },
    "spacing16": {
      "$type": "dimension",
      "$value": "16px"
    },
    "spacing24": {
      "$type": "dimension",
      "$value": "24px"
    },
    "spacing32": {
      "$type": "dimension",
      "$value": "32px"
    },
    "spacing48": {
      "$type": "dimension",
      "$value": "48px"
    },
    "spacing64": {
      "$type": "dimension",
      "$value": "64px"
    }
  },
  "radius": {
    "default": {
      "$type": "dimension",
      "$value": "8px"
    },
    "controls": {
      "$type": "dimension",
      "$value": "8px"
    },
    "panels": {
      "$type": "dimension",
      "$value": "8px"
    }
  },
  "shadow": {
    "shadowSubtle": {
      "$type": "shadow",
      "$value": "rgba(17, 26, 74, 0.1) 0px 1px 3px, rgba(255,255,255,0.5) 0px 1px 0px inset"
    }
  }
}

{
  "id": "column",
  "name": "Column",
  "theme": "light",
  "industry": "fintech",
  "summary": "Architectural blueprint on white marble with precise, high-contrast markers.",
  "technicalSummary": "A light operational system built from near-white surfaces, faint structural borders, tight sans typography, and orange/plum action hierarchy. Useful for finance, infrastructure, and data-heavy dashboards that need to feel precise without becoming visually dense.",
  "source": {
    "name": "Public source",
    "url": "https://column.com",
    "kind": "public-design-reference"
  },
  "sourceName": "Public source",
  "sourceUrl": "https://column.com",
  "originalSiteUrl": "https://column.com",
  "capturedAt": "2026-04-11T18:51:18.967Z",
  "licenseNote": "Publicly visible design reference metadata. Use as inspiration and token guidance, not as copied brand assets.",
  "tags": [
    "fintech",
    "light",
    "technical",
    "structured",
    "precise"
  ],
  "tokenCount": 21,
  "colors": [
    {
      "name": "Ink Blue",
      "value": "#011821",
      "token": "--color-ink-blue",
      "group": "neutral",
      "role": "Primary text and headings."
    },
    {
      "name": "Ghost White",
      "value": "#ffffff",
      "token": "--color-ghost-white",
      "group": "surface",
      "role": "Page and card surface."
    },
    {
      "name": "Fog Gray",
      "value": "#f6f6f8",
      "token": "--color-fog-gray",
      "group": "surface",
      "role": "Secondary section background."
    },
    {
      "name": "Steel Gray",
      "value": "#e3e4e8",
      "token": "--color-steel-gray",
      "group": "neutral",
      "role": "Borders and dividers."
    },
    {
      "name": "Deep Plum",
      "value": "#111a4a",
      "token": "--color-deep-plum",
      "group": "brand",
      "role": "Brand accent and secondary action."
    },
    {
      "name": "Action Orange",
      "value": "#ec652b",
      "token": "--color-action-orange",
      "group": "accent",
      "role": "Primary action and high-attention markers."
    },
    {
      "name": "Callout Cyan",
      "value": "#167e6c",
      "token": "--color-callout-cyan",
      "group": "semantic",
      "role": "Secondary confirmation and callout state."
    }
  ],
  "typography": [
    {
      "name": "Suisse-style Sans",
      "token": "--font-suisse-style",
      "family": "Inter, ui-sans-serif, system-ui, sans-serif",
      "role": "Compressed-feeling UI and headline typography with controlled tracking.",
      "weights": [
        "300",
        "400",
        "500",
        "600"
      ],
      "sizes": [
        "11px",
        "12px",
        "14px",
        "18px",
        "24px",
        "40px",
        "48px"
      ],
      "lineHeights": [
        "1",
        "1.1",
        "1.33",
        "1.5"
      ]
    },
    {
      "name": "System Mono",
      "token": "--font-system-mono",
      "family": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
      "role": "Numerical values, code, balances, and transaction-like labels.",
      "weights": [
        "400"
      ],
      "sizes": [
        "10px",
        "12px",
        "14px"
      ],
      "lineHeights": [
        "1.5"
      ]
    }
  ],
  "spacing": {
    "baseUnit": "4px",
    "density": "comfortable",
    "scale": [
      {
        "name": "4",
        "value": "4px",
        "token": "--spacing-4"
      },
      {
        "name": "8",
        "value": "8px",
        "token": "--spacing-8"
      },
      {
        "name": "12",
        "value": "12px",
        "token": "--spacing-12"
      },
      {
        "name": "16",
        "value": "16px",
        "token": "--spacing-16"
      },
      {
        "name": "24",
        "value": "24px",
        "token": "--spacing-24"
      },
      {
        "name": "32",
        "value": "32px",
        "token": "--spacing-32"
      },
      {
        "name": "48",
        "value": "48px",
        "token": "--spacing-48"
      },
      {
        "name": "64",
        "value": "64px",
        "token": "--spacing-64"
      }
    ]
  },
  "radius": {
    "default": "8px",
    "controls": "8px",
    "panels": "8px"
  },
  "shadows": [
    {
      "name": "subtle",
      "value": "rgba(17, 26, 74, 0.1) 0px 1px 3px, rgba(255,255,255,0.5) 0px 1px 0px inset",
      "token": "--shadow-subtle"
    }
  ],
  "components": [
    {
      "name": "Primary action",
      "role": "Action",
      "technicalNotes": [
        "Orange fill",
        "8px radius",
        "tight horizontal padding",
        "high contrast against white surfaces"
      ]
    },
    {
      "name": "Product card",
      "role": "Content",
      "technicalNotes": [
        "White surface",
        "subtle border",
        "low shadow",
        "mono labels for metrics"
      ]
    },
    {
      "name": "Technical hero",
      "role": "Layout",
      "technicalNotes": [
        "Contained 1200px width",
        "left-aligned text",
        "product screenshot or abstract diagram on the right"
      ]
    }
  ],
  "guidelines": {
    "do": [
      "Use off-white section breaks.",
      "Keep borders subtle and visible.",
      "Reserve orange for the primary action."
    ],
    "dont": [
      "Do not use saturated colors as decoration.",
      "Do not add heavy shadows.",
      "Do not use pure black for long body copy."
    ]
  },
  "exports": {
    "htmlUrl": "https://memoire.cv/references/column",
    "jsonUrl": "https://memoire.cv/references/column.json",
    "designMdUrl": "https://memoire.cv/references/column/design.md",
    "tokensJsonUrl": "https://memoire.cv/references/column/tokens.json",
    "tailwindV4Url": "https://memoire.cv/references/column/tailwind-v4.css"
  }
}