{"id":"34baa524-5d5b-4165-bbab-d01f05e6d6b9","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","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":"General Intelligence Company","summary":"Architectural Night Sky","description":"General Intelligence Company employs a sophisticated aesthetic, blending an evocative, illustrative dark hero with a predominantly minimalist, architectural light UI. Typography is restrained and elegant, utilizing a serif for headlines that conveys gravitas and a clean sans-serif for body text. Surfaces are layered with subtle translucency and soft, multi-layered shadows, creating depth without heaviness. The overall impression is one of calm authority and advanced technology, articulated through precise achromatic forms punctuated by a singular, cool blue accent for interactive elements.","industry":"ai","colorScheme":"light","colors":[{"name":"Night Sky","hex":"#1f1f29","role":"Dark base for hero sections and occasional accent backgrounds; creates a deep, contemplative atmosphere","group":"brand"},{"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"},{"name":"Action Azure","hex":"#41a1cf","role":"Border color for ghost buttons and interactive elements, providing a clear but understated active state","group":"accent"},{"name":"Pitch Black","hex":"#000000","role":"Primary text for headings and bold statements against light backgrounds, emphasizing core information","group":"neutral"},{"name":"Canvas White","hex":"#ffffff","role":"Main page background, component backgrounds, and primary text on dark elements, maintaining brightness and spaciousness","group":"neutral"},{"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"},{"name":"Ash Gray","hex":"#f9faf7","role":"Background for input fields and navigation elements, providing a soft contrast","group":"neutral"},{"name":"Cool Gray","hex":"#eef1ed","role":"Subtle border for UI elements and dividers, offering minimal distinction","group":"neutral"},{"name":"Steel Gray","hex":"#dee2de","role":"Hairline borders and soft shadows, contributing to a refined, nearly unnoticeable separation of elements","group":"neutral"},{"name":"Dark Charcoal","hex":"#171717","role":"Primary body text and deep contrast accents. Used where legibility against light backgrounds is paramount","group":"neutral"},{"name":"Charcoal","hex":"#2c2c2c","role":"Secondary text and less prominent headings, providing contrast below the primary text level","group":"neutral"},{"name":"Rich Black","hex":"#282834","role":"Darker accent for navigation hover states and subtly outlined actions, providing depth on dark surfaces","group":"neutral"},{"name":"Slate Gray","hex":"#444141","role":"Placeholder text and subtle icon fills, indicating less active states or auxiliary information","group":"neutral"},{"name":"Medium Gray","hex":"#646464","role":"Muted text for helper descriptions and secondary information, reducing visual noise","group":"neutral"},{"name":"Light Gray","hex":"#b4b8b4","role":"Lightest neutral used for subtle background variations or very soft dividers","group":"neutral"}],"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"}],"typeScale":[{"role":"caption","size":13,"lineHeight":1.5,"letterSpacing":-0.13},{"role":"button-label","size":16,"lineHeight":1,"letterSpacing":-0.19},{"role":"subheading","size":18,"lineHeight":1.2,"letterSpacing":-0.18},{"role":"heading","size":40,"lineHeight":1.1,"letterSpacing":-0.8},{"role":"heading-lg","size":48,"lineHeight":1.1,"letterSpacing":-0.96},{"role":"display","size":54,"lineHeight":1.1,"letterSpacing":-1.08}],"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."]},"components":[{"name":"Ghost Button","role":"Subtle interactive element"},{"name":"Subtle Nav Button","role":"Navigation item or secondary ghost action"},{"name":"Solid Dark Button","role":"Primary action within darker contexts"},{"name":"Outlined Action Button","role":"Interactive button with a defined border"},{"name":"Blurred Nav Item","role":"Navigation element with translucent background"},{"name":"Elevated Content Card","role":"Content container with subtle elevation"},{"name":"Hero Overlay Card","role":"Translucent content block over imagery"},{"name":"Cofounder Featured Card","role":"Prominent, brand-colored feature display"},{"name":"Ghost Input Field","role":"Standard user input field"}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference: \ntext: #171717\nbackground: #ffffff\nborder: #dee2de\naccent: #0081c0\nprimary action: #41a1cf (outlined action border)\n\nExample Component Prompts:\n1. Create a hero section with a 'Night Sky' background (#1f1f29). Headline (PPMondwest, 54px, weight 400, #ffffff, letter-spacing -1.08px). Subtext (af, 18px, weight 400, #ffffff, line-height 1.2).\n2. Create an 'Elevated Content Card': background 'Off White' (#fefffc), 12px border-radius, box-shadow rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.08) 0px 4px 5px 0px, 16px padding. Title (af, 18px, weight 600, #2c2c2c), body text (af, 16px, weight 400, #171717).\n3. Create an 'Outlined Action Button': background transparent, border 1px solid 'Action Azure' (#41a1cf), text 'Dark Charcoal' (#171717), 4px border-radius. Text (af, 16px, weight 500, letter-spacing -0.19px), 5px vertical / 12px horizontal padding.\n4. Create a 'Blurred Nav Item': background rgba(255, 255, 255, 0.06), 50.496px border-radius, box-shadow rgba(0, 0, 0, 0.15) 0px 2px 6px 0px. Text (af, 15px, weight 400, #171717), 8px padding. Implement a backdrop-filter: blur(9px)."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777509060357-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777509060357-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/34baa524-5d5b-4165-bbab-d01f05e6d6b9-1777583046194-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/34baa524-5d5b-4165-bbab-d01f05e6d6b9-1777583046194-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/34baa524-5d5b-4165-bbab-d01f05e6d6b9-1777583046194-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/34baa524-5d5b-4165-bbab-d01f05e6d6b9-1777583046194-preview-detail-poster.jpg"},"similarStyleIds":["461da0f0-fde6-46bc-8137-7eca006260a8","7b083729-e694-4b66-82a3-befb08451722","e81d4724-9615-4159-8678-cef35f986cab","4d4772a3-e1da-415f-a6d7-658dcefdcecd","607e0dbf-e2fc-45c9-b939-946b8981c156","a6950b49-8ce4-4330-9499-26ca08061599","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","db451eca-8de6-43a9-a5d5-35271befdffd","64aadcc7-f884-41ea-9b0b-a90dfc10c9ec","ba07accb-b2cc-4ad9-a25f-c50b0f90f34e","a1b78a21-a304-482b-8ce5-f612d95d44fe","d3289fe7-a85e-42d8-96b7-eb7faa62a104","7f6799d9-0733-4523-9a94-036b9ad3bf28","63bd1ed9-b161-45fd-8734-85282bd945ec","9fecf7d6-b717-49ca-8edc-b10d6110b21c","80099f79-72b7-4367-b2e9-6a3d4a3e9e6a","c3ceca5c-d329-4559-b947-016172941ba2","32845f27-6b24-48be-af25-8e664f826b30","186775da-7568-49e5-8110-4fd0bbc7bbe3"],"exports":{"designMdUrl":"/references/refero/34baa524-5d5b-4165-bbab-d01f05e6d6b9/design.md","tokensJsonUrl":"/references/refero/34baa524-5d5b-4165-bbab-d01f05e6d6b9/tokens.json","tailwindV4Url":"/references/refero/34baa524-5d5b-4165-bbab-d01f05e6d6b9/tailwind-v4.css","cssVariablesUrl":"/references/refero/34baa524-5d5b-4165-bbab-d01f05e6d6b9/tailwind-v4.css"}}