{"id":"34baa524-5d5b-4165-bbab-d01f05e6d6b9","name":"General Intelligence Company","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/34baa524-5d5b-4165-bbab-d01f05e6d6b9","originalSiteUrl":"https://www.generalintelligencecompany.com","capturedAt":"2026-04-30T00:31:29.746Z","colors":[{"name":"Night Sky","hex":"#1f1f29","role":"Dark base for hero sections and occasional accent backgrounds; creates a deep, contemplative atmosphere","group":"brand","cssVariable":"--color-night-sky"},{"name":"Cofounder Blue","hex":"#0081c0","role":"Highlight elements, card backgrounds for featured content, and active interface states. Its vivid hue draws attention while maintaining a high-tech feel","group":"accent","cssVariable":"--color-cofounder-blue"},{"name":"Action Azure","hex":"#41a1cf","role":"Border color for ghost buttons and interactive elements, providing a clear but understated active state","group":"accent","cssVariable":"--color-action-azure"},{"name":"Pitch Black","hex":"#000000","role":"Primary text for headings and bold statements against light backgrounds, emphasizing core information","group":"neutral","cssVariable":"--color-pitch-black"},{"name":"Canvas White","hex":"#ffffff","role":"Main page background, component backgrounds, and primary text on dark elements, maintaining brightness and spaciousness","group":"neutral","cssVariable":"--color-canvas-white"},{"name":"Off White","hex":"#fefffc","role":"Subtle alternative background for secondary sections and cards, creating a slight visual separation from the main canvas","group":"neutral","cssVariable":"--color-off-white"},{"name":"Ash Gray","hex":"#f9faf7","role":"Background for input fields and navigation elements, providing a soft contrast","group":"neutral","cssVariable":"--color-ash-gray"},{"name":"Cool Gray","hex":"#eef1ed","role":"Subtle border for UI elements and dividers, offering minimal distinction","group":"neutral","cssVariable":"--color-cool-gray"},{"name":"Steel Gray","hex":"#dee2de","role":"Hairline borders and soft shadows, contributing to a refined, nearly unnoticeable separation of elements","group":"neutral","cssVariable":"--color-steel-gray"},{"name":"Dark Charcoal","hex":"#171717","role":"Primary body text and deep contrast accents. Used where legibility against light backgrounds is paramount","group":"neutral","cssVariable":"--color-dark-charcoal"},{"name":"Charcoal","hex":"#2c2c2c","role":"Secondary text and less prominent headings, providing contrast below the primary text level","group":"neutral","cssVariable":"--color-charcoal"},{"name":"Rich Black","hex":"#282834","role":"Darker accent for navigation hover states and subtly outlined actions, providing depth on dark surfaces","group":"neutral","cssVariable":"--color-rich-black"},{"name":"Slate Gray","hex":"#444141","role":"Placeholder text and subtle icon fills, indicating less active states or auxiliary information","group":"neutral","cssVariable":"--color-slate-gray"},{"name":"Medium Gray","hex":"#646464","role":"Muted text for helper descriptions and secondary information, reducing visual noise","group":"neutral","cssVariable":"--color-medium-gray"},{"name":"Light Gray","hex":"#b4b8b4","role":"Lightest neutral used for subtle background variations or very soft dividers","group":"neutral","cssVariable":"--color-light-gray"}],"typography":[{"role":"Headlines and prominent display text. Its distinct serif creates a sense of gravitas and intellectual authority, often appearing in sizes like 40px and 54px.","sizes":"40px, 48px, 54px","family":"PPMondwest","weight":"400, 500","lineHeight":"1.10","letterSpacing":"-0.0200em","fontFeatureSettings":"\"liga\" 0"},{"role":"Body text, navigation, buttons, and all functional UI labels. This sans-serif provides clarity and modernity, varying in weight from 400 for standard body copy to 700 for more prominent labels, with a subtle negative letter spacing for a compact feel across sizes 13px to 18px.","sizes":"13px, 15px, 16px, 18px","family":"af","weight":"400, 500, 600, 700","lineHeight":"1.00, 1.20, 1.30, 1.40, 1.50","letterSpacing":"-0.0120em, -0.0100em"}],"spacing":{"radius":{"nav":"50.496px","none":"0px","buttons":"4px","cardsLarge":"24px","cardsSmall":"12px","cardsMedium":"16px","navItemsSmall":"8px"},"elementGap":"8px","sectionGap":"32px","cardPadding":"16px"},"radius":{"nav":"50.496px","none":"0px","buttons":"4px","cardsLarge":"24px","cardsSmall":"12px","cardsMedium":"16px","navItemsSmall":"8px"},"guidelines":{"do":["Prioritize PPMondwest for all display and large headings (40px, 48px, 54px) using weight 400 or 500, with letter-spacing -0.0200em for a refined, compact look.","Use 'Night Sky' (#1f1f29) as a deep, rich background for hero sections or brand-defining modules, contrasting with light body text and elements.","Layer surfaces with 'Off White' (#fefffc) and 'Canvas White' (#ffffff) to provide subtle depth and structure on light-themed pages, emphasizing 'Canvas White' for main backgrounds and 'Off White' for slightly recessed elements.","Apply 'Cofounder Blue' (#0081c0) sparingly as a functional accent color for key cards or active states, reserving its prominence for maximum impact.","Implement soft, layered shadows for card components (e.g., rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 4px 5px 0px) to give elements a subtle lift without feeling heavy.","Maintain a comfortable density with an element gap of 8px and card padding of 16px, ensuring sufficient breathing room between UI elements.","Round corners with care: use 4px for small buttons, 8px for main interactive elements, 12px for cards, and 24px for larger, more prominent cards like the 'Hero Overlay Card', with 50.496px for highly rounded nav items."],"dont":["Avoid excessive use of 'Cofounder Blue' (#0081c0) outside of clear accent roles; it should highlight, not dominate, the UI.","Do not introduce strong, bold colors or gradients other than the defined brand accents; the system relies on a sophisticated achromatic foundation.","Resist using heavy, opaque backgrounds for layered elements on light pages; instead, favor sublte translucency (rgba(222, 226, 222, 0.16)) for a delicate, modern effect.","Do not use letter-spacing values tighter than -0.0200em for headings or wider than -0.0100em for body text. Maintain the precise, compact typographic rhythm.","Refrain from sharp, angular corners for cards and buttons; apply the specified radii (4px, 8px, 12px, 16px, 24px, 50.496px) consistently for a softer, approachable feel.","Do not deviate from the specified shadow values; the subtle, multi-layered shadows are key to the brand's sophisticated depth without visual clutter.","Avoid cluttering the layout; aim for comfortable spacing both vertically (32px section gap) and horizontally, letting content breathe rather than stacking elements too closely."]}}