{"id":"a76ec6ba-20b3-495c-9d89-1e58281e79e7","name":"Column","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/a76ec6ba-20b3-495c-9d89-1e58281e79e7","originalSiteUrl":"https://column.com","capturedAt":"2026-04-11T18:51:18.967Z","colors":[{"name":"Ink Blue","hex":"#011821","role":"Primary text color for headings and body copy, grounding the design.","group":"neutral","cssVariable":"--color-ink-blue"},{"name":"Code Black","hex":"#000000","role":"Used for critical text elements and strong outlines, providing maximum contrast and emphasis.","group":"neutral","cssVariable":"--color-code-black"},{"name":"Ghost White","hex":"#ffffff","role":"Primary background for pages and cards, fostering a sense of openness and purity.","group":"neutral","cssVariable":"--color-ghost-white"},{"name":"Fog Gray","hex":"#f6f6f8","role":"Secondary background for sections and subtle content groupings, almost imperceptibly off-white to provide visual separation.","group":"neutral","cssVariable":"--color-fog-gray"},{"name":"Steel Gray","hex":"#e3e4e8","role":"Subtle borders and separators, defining boundaries without starkness.","group":"neutral","cssVariable":"--color-steel-gray"},{"name":"Charcoal Text","hex":"#232730","role":"Text on lighter backgrounds for softer contrast than pure black, often used in navigation and body text.","group":"neutral","cssVariable":"--color-charcoal-text"},{"name":"Slate Text","hex":"#7c7f88","role":"Contextual body text and secondary labels, offering readability without competing with primary elements.","group":"neutral","cssVariable":"--color-slate-text"},{"name":"Graphite","hex":"#12161","role":"Darker shades for text and icons, particularly on hero sections, for depth.","group":"neutral","cssVariable":"--color-graphite"},{"name":"Deep Plum","hex":"#111a4a","role":"Brand accent for interactive elements, icons, and significant textual highlights, establishing Column's brand identity.","group":"brand","cssVariable":"--color-deep-plum"},{"name":"Action Orange","hex":"#ec652b","role":"Primary call-to-action buttons and key interactive states, drawing immediate attention.","group":"accent","cssVariable":"--color-action-orange"},{"name":"Soft Horizon Gradient","hex":"#d65620","role":"Decorative background for banners, imbuing sections with a sense of expansive, technological potential.","group":"brand","gradient":"linear-gradient(125deg, rgb(214, 86, 32) -3.16%, rgb(159, 122, 238) 14.55%, rgb(69, 117, 205) 32.26%, rgb(113, 210, 240) 49.97%, rgb(68, 180, 139) 67.68%, rgb(244, 223, 105) 85.39%)","cssVariable":"--color-soft-horizon-gradient"},{"name":"Faded Grid Blue","hex":"#023247","role":"Illustrative elements and background patterns, adding a subtle technical depth.","group":"brand","cssVariable":"--color-faded-grid-blue"},{"name":"Success Moss","hex":"#44b48b","role":"Status indicators and affirmation icons, providing a clear visual cue for positive outcomes.","group":"semantic","cssVariable":"--color-success-moss"},{"name":"Radial Twilight Gradient","hex":"#771c86","role":"Subtle, localized background gradient to highlight specific sections with a deep, cosmic feel.","group":"brand","gradient":"radial-gradient(29.88% 184.91% at 6.55% -48.11%, rgb(119, 28, 134) 0%, rgb(17, 26, 74) 100%)","cssVariable":"--color-radial-twilight-gradient"},{"name":"Info Blue","hex":"#7ea7e9","role":"Informational graphics and secondary accents, providing a cooler tonal balance.","group":"semantic","cssVariable":"--color-info-blue"},{"name":"Callout Cyan","hex":"#167e6c","role":"Highlight elements and secondary interactive states, offering a complementary accent to the orange.","group":"accent","cssVariable":"--color-callout-cyan"},{"name":"Notification Teal","hex":"#88deeb","role":"Subtle highlights and supporting iconography, a brighter counterpart to Callout Cyan.","group":"accent","cssVariable":"--color-notification-teal"}],"typography":[{"role":"Primary typeface for all main content, headings, and UI elements. Its clean, slightly compressed letterforms convey efficiency and sophistication. Weight 600 at 48px headlines commands attention with quiet confidence; weight 300 for subheadings at 28px adds a subtle, approachable gravity. The variable letter-spacing (up to -0.03em at larger sizes) tightens display text for visual impact.","sizes":"11px, 12px, 14px, 16px, 18px, 20px, 24px, 28px, 40px, 48px, 52px, 60px","family":"SuisseIntl","weight":"300, 400, 500, 600","weights":[300,400,500,600],"lineHeight":"1.00, 1.10, 1.30, 1.33, 1.38, 1.40, 1.43, 1.50","substitute":"Inter","letterSpacing":"-0.03em, -0.02em, -0.01em","fontFeatureSettings":"\"salt\" 2"},{"role":"Monospaced font for code snippets, financial figures, and technical labels, ensuring precise alignment and clarity for data-driven content. Its consistent width emphasizes the accuracy inherent in banking operations.","sizes":"10px, 12px","family":"SFMono","weight":"400","weights":[400],"lineHeight":"1.50","substitute":"IBM Plex Mono","letterSpacing":"normal","fontFeatureSettings":"\"cv11\"; \"salt\" 2"},{"role":"Secondary typeface, primarily for detailed body text and supporting UI elements. Provides similar legibility to SuisseIntl but with slightly more open letterforms at smaller sizes, aiding readability in high-information densities.","sizes":"10px, 12px, 14px, 16px, 20px, 24px","family":"Inter","weight":"400, 500, 600","weights":[400,500,600],"lineHeight":"1.00, 1.10, 1.14, 1.33, 1.50","letterSpacing":"-0.03em, -0.02em","fontFeatureSettings":"\"cv11\""},{"role":"Specialized monospaced font for technical outputs and code display within the UI, complementing SFMono for specific interactive code contexts. Its presence reinforces the developer-centric aspect of Column.","sizes":"10px, 12px, 14px","family":"SuisseIntlMono","weight":"400","weights":[400],"lineHeight":"1.50","substitute":"IBM Plex Mono","letterSpacing":"normal","fontFeatureSettings":"\"cv11\"; \"salt\" 2"}],"spacing":{"radius":{"cards":"8px","subtle":"2px","buttons":"8px","default":"8px"},"elementGap":"","sectionGap":"48px","cardPadding":""},"radius":{"cards":"8px","subtle":"2px","buttons":"8px","default":"8px"},"guidelines":{"do":["Use `Fog Gray` (#f6f6f8) for secondary section backgrounds to create subtle visual breaks, not just `Ghost White` (#ffffff).","Apply `SuisseIntl` with a negative letter-spacing (-0.02em to -0.03em) for all headlines 28px and larger, tightening the text for a refined, modern feel.","Borders on interactive elements should primarily use `Steel Gray` (#e3e4e8), providing definition without harshness.","All cards and buttons should consistently use an `8px` border-radius for a soft, approachable geometry, except when specific components dictate otherwise.","Emphasize critical actions with the `Action Orange` (#ec652b) background, reserving `Deep Plum` (#111a4a) primarily for non-primary interactive elements and brand accents.","Use `SFMono` or `SuisseIntlMono` at 10-12px for all numerical data and code snippets to ensure alignment and technical precision.","Enhance surface depth with the subtle card shadow: `rgba(17, 26, 74, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 1px 2px 0px, rgba(255, 255, 255, 0.5) 0px 0px 0px 1px inset`."],"dont":["Do not use generic blue for primary interactive elements; save `Info Blue` (#7ea7e9) for graphics and non-actionable information to prevent dilution of `Deep Plum` and `Action Orange`.","Avoid arbitrary uses of vivid colors; `Success Moss` (#44b48b) and `Notification Teal` (#88deeb) are reserved for semantic feedback, not decorative elements.","Do not deviate from the `8px` default border-radius for primary UI elements across buttons and cards; exceptions are only for badges or specific component variants.","Do not apply heavy, opaque box-shadows; the system relies on subtle, layered shadows to suggest depth and elevation.","Avoid using `Code Black` (#000000) for large blocks of text; opt for `Ink Blue` (#011821) or `Charcoal Text` (#232730) for better readability and a softer appearance.","Do not introduce new typefaces; `SuisseIntl` is for visual impact and headings, `Inter` for general readability, and monospaced fonts for technical context.","Do not break the established vertical rhythm of 48px `sectionGap` and `24px` `elementGap` in content arrangements; maintain spaciousness."]}}