{"id":"a76ec6ba-20b3-495c-9d89-1e58281e79e7","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","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Column","summary":"Architectural blueprint on white marble. Subtle background patterns convey structure beneath a pristine, luminous surface, punctuated by precise, high-contrast markers.","description":"Column's design is a blend of corporate authority and digital precision. It uses a very light, almost invisible dotted grid background to evoke a technical blueprint, while maintaining a clean, spacious feel. The deep-seated violet and stark orange accents provide clear interactive points set against a largely monochromatic text palette, suggesting seriousness and innovation. Strategic use of subtle box shadows and inner borders adds dimensionality without heavy handedness, like layers of frosted glass on a complex instrument.","tags":["clean","technical","corporate","minimal","structured","secure","precise","authoritative"],"industry":"fintech","colorScheme":"light","colors":[{"name":"Ink Blue","hex":"#011821","role":"Primary text color for headings and body copy, grounding the design.","group":"neutral"},{"name":"Code Black","hex":"#000000","role":"Used for critical text elements and strong outlines, providing maximum contrast and emphasis.","group":"neutral"},{"name":"Ghost White","hex":"#ffffff","role":"Primary background for pages and cards, fostering a sense of openness and purity.","group":"neutral"},{"name":"Fog Gray","hex":"#f6f6f8","role":"Secondary background for sections and subtle content groupings, almost imperceptibly off-white to provide visual separation.","group":"neutral"},{"name":"Steel Gray","hex":"#e3e4e8","role":"Subtle borders and separators, defining boundaries without starkness.","group":"neutral"},{"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"},{"name":"Slate Text","hex":"#7c7f88","role":"Contextual body text and secondary labels, offering readability without competing with primary elements.","group":"neutral"},{"name":"Graphite","hex":"#12161","role":"Darker shades for text and icons, particularly on hero sections, for depth.","group":"neutral"},{"name":"Deep Plum","hex":"#111a4a","role":"Brand accent for interactive elements, icons, and significant textual highlights, establishing Column's brand identity.","group":"brand"},{"name":"Action Orange","hex":"#ec652b","role":"Primary call-to-action buttons and key interactive states, drawing immediate attention.","group":"accent"},{"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%)"},{"name":"Faded Grid Blue","hex":"#023247","role":"Illustrative elements and background patterns, adding a subtle technical depth.","group":"brand"},{"name":"Success Moss","hex":"#44b48b","role":"Status indicators and affirmation icons, providing a clear visual cue for positive outcomes.","group":"semantic"},{"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%)"},{"name":"Info Blue","hex":"#7ea7e9","role":"Informational graphics and secondary accents, providing a cooler tonal balance.","group":"semantic"},{"name":"Callout Cyan","hex":"#167e6c","role":"Highlight elements and secondary interactive states, offering a complementary accent to the orange.","group":"accent"},{"name":"Notification Teal","hex":"#88deeb","role":"Subtle highlights and supporting iconography, a brighter counterpart to Callout Cyan.","group":"accent"}],"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"}],"typeScale":[{"role":"caption","size":10,"lineHeight":1.5,"letterSpacing":0},{"role":"body","size":14,"lineHeight":1.5,"letterSpacing":-0.28},{"role":"subheading","size":18,"lineHeight":1.4,"letterSpacing":-0.36},{"role":"heading-sm","size":24,"lineHeight":1.33,"letterSpacing":-0.48},{"role":"heading","size":40,"lineHeight":1.1,"letterSpacing":-0.8},{"role":"display","size":48,"lineHeight":1,"letterSpacing":-1.44}],"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."]},"components":[{"name":"CTA Button Group","role":""},{"name":"Account Balance Card","role":""},{"name":"Testimonial + Feature Badge Card","role":""},{"name":"Primary Navigation Link","role":"Navigation"},{"name":"Ghost Button - Inverted","role":"Secondary interaction in dark contexts"},{"name":"Ghost Button - Light","role":"Secondary interaction in light contexts"},{"name":"Nav Button - Light Text","role":"Interaction in transparent sections"},{"name":"Card - Callout Orange","role":"Prominent information highlight"},{"name":"Badge - Transparent","role":"Categorization or small label"},{"name":"Secondary Button - Outlined","role":"Alternative interaction"}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text (primary): `#011821` (Ink Blue)\n- Background (page): `#ffffff` (Ghost White)\n- Background (section): `#f6f6f8` (Fog Gray)\n- CTA Button: `#ec652b` (Action Orange)\n- Accent (brand): `#111a4a` (Deep Plum)\n- Border (neutral): `#e3e4e8` (Steel Gray)\n\n### 3-5 Example Component Prompts\n1. **Create a Hero Section:** Use `Ghost White` as background, overlay with a subtle `Faded Grid Blue` (`#023247`) map graphic. Headline: `SuisseIntl` 48px, weight 600, `Ink Blue` text, `lineHeight` 1.1, `letterSpacing` -1.44px. Subtext: `Inter` 18px, weight 400, `Slate Text` (`#7c7f88`). Include a `Call To Action Button - Filled` and a `Secondary Button - Outlined` below the text, aligned left with 24px horizontal spacing.\n2. **Generate a Product Feature Card:** Background `Ghost White`, `8px` border-radius, using `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` shadow. `24px` internal padding. Title: `SuisseIntl` 20px, weight 500, `Ink Blue`. Body text: `Inter` 14px, weight 400, `Slate Text`.\n3. **Design a Header with Navigation:** Transparent background. Logo on left. Navigation links (`Primary Navigation Link`) to the right using `SuisseIntl` 16px weight 400, `Ink Blue` text. On far right, include `Ghost Button - Light` for 'Sign in' and `Call To Action Button - Filled` for 'Get started', horizontally spaced by 16px.\n4. **Create a Testimonial Section:** Background `Fog Gray` (#f6f6f8). Quote text with `SuisseIntl` 28px, weight 300, `Ink Blue`, `lineHeight` 1.3, `letterSpacing` -0.56px. Attribution with `SuisseIntl` 14px, weight 500, `Deep Plum`, followed by `Slate Text` for title, both with `letterSpacing` -0.28px. Place an `Action Orange` `Card - Callout Orange` with a relevant metric adjacent to the text."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775933447592-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775933447592-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/a76ec6ba-20b3-495c-9d89-1e58281e79e7-1777560786888-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/a76ec6ba-20b3-495c-9d89-1e58281e79e7-1777560786888-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/a76ec6ba-20b3-495c-9d89-1e58281e79e7-1777560786888-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/a76ec6ba-20b3-495c-9d89-1e58281e79e7-1777560786888-preview-detail-poster.jpg"},"similarStyleIds":["48e5de76-05d5-4c4e-a269-c7c245b291ec","12255b63-e506-4bc1-a4cd-d05487de32f3","aeefc294-a8f7-443d-b76a-538dddc29afe","66eb1c37-a8e5-4e6c-b17f-a75385b462e7","e0ad1a25-5609-45e6-a355-9bdeec86c5ae","9342e89b-c2fe-4acf-9993-53b44e0c13b5","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","1ae4bcfe-c613-42fc-aab7-f9583381e7cc","9cc537fc-97d8-4632-8703-f9aa296c2206","62b22816-2d98-4e98-9c17-bf600ddb2fc8","7b083729-e694-4b66-82a3-befb08451722","6036b661-3886-4f76-a5e6-bb8960eb7db5","36752f78-1c43-471b-b125-e82152ad23dd","c14bfde7-6f08-4b54-bd9b-39989d10cfef","1c1d3939-8d82-4907-aa3c-c9b2fcfbab4f","0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","fece962d-a580-4365-8afd-c9905a2502b1","63bd1ed9-b161-45fd-8734-85282bd945ec","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","707a9081-3d1d-4a0b-b1aa-b58b3fab09af"],"exports":{"designMdUrl":"/references/refero/a76ec6ba-20b3-495c-9d89-1e58281e79e7/design.md","tokensJsonUrl":"/references/refero/a76ec6ba-20b3-495c-9d89-1e58281e79e7/tokens.json","tailwindV4Url":"/references/refero/a76ec6ba-20b3-495c-9d89-1e58281e79e7/tailwind-v4.css","cssVariablesUrl":"/references/refero/a76ec6ba-20b3-495c-9d89-1e58281e79e7/tailwind-v4.css"}}