{"id":"50833119-cb36-4b75-b0cc-be48afea050a","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/50833119-cb36-4b75-b0cc-be48afea050a","originalSiteUrl":"https://krea.ai","capturedAt":"2026-04-11T18:36:49.487Z","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":"Krea","summary":"Midnight Terminal Interface. Imagine looking at code on a deep dark monitor, illuminated only by crisp white text and subtle UI elements.","description":"This system evokes a sleek, high-tech command center with deep, subdued tones and crisp, functional typography. The near-black background provides a stark contrast for the luminous white text, emphasizing content. Subtle gradients introduce depth without overwhelming the dark aesthetic, mimicking layered screens in a digital environment. The interplay of sharp 8px radii and some larger 14px and 32px radii, combined with a total absence of strong accent colors, creates a restrained and focused visual experience.","tags":["dark-mode","minimalist","monochromatic","high-contrast","precise","modern-tech","command-center","subtle-gradients","functional"],"industry":"ai","colorScheme":"dark","colors":[{"name":"Void Black","hex":"#000000","role":"Primary background, text (on light buttons), icons, borders.","group":"neutral"},{"name":"Canvas White","hex":"#ffffff","role":"Primary text, button backgrounds, interactive elements, icons.","group":"neutral"},{"name":"Ash Gray","hex":"#a3a3a3","role":"Secondary text, disabled states, subtle borders.","group":"neutral"},{"name":"Coal","hex":"#171717","role":"Darker interactive elements, subtle surface variations.","group":"neutral"},{"name":"Iron","hex":"#262626","role":"Button backgrounds for secondary actions.","group":"neutral"},{"name":"Frost","hex":"#f5f5f5","role":"Light button backgrounds, subtle accents in light mode elements.","group":"neutral"},{"name":"Deep Space Gradient","hex":"#474747","role":"Background feature sections, providing a sense of depth and atmospheric perspective.","group":"neutral","gradient":"linear-gradient(rgb(71, 71, 71) 0%, rgb(0, 0, 0) 100%)"},{"name":"Cosmic Drift Gradient","hex":"#646464","role":"Variant gradient for sections, implying subtle light sources or material depth.","group":"neutral","gradient":"linear-gradient(200deg, rgb(100, 100, 100) 0%, rgb(0, 0, 0) 100%)"},{"name":"Haze Gradient","hex":"#FFFFFF","role":"Rare usage, likely for product shots or specific content blocks, to hint at a layered interface element.","group":"neutral","gradient":"linear-gradient(120deg, rgb(255, 255, 255) 40%, rgb(190, 190, 190) 70%, rgb(100, 100, 100) 100%)"}],"typography":[{"role":"Dominant and sole typeface, maintaining a consistent, precise tone across all content from large display headings to small body text. The tight letter-spacing for larger sizes gives headlines a carved, intentional feel, while wider spacing for small text aids readability. Its custom nature highlights a brand commitment to distinct visual identity.","sizes":"12px, 13px, 14px, 15px, 16px, 18px, 20px, 24px, 30px, 36px, 48px, 60px, 72px, 96px","family":"Suisse Intl","weight":"400, 450, 500, 600, 700","lineHeight":"1.00, 1.05, 1.11, 1.20, 1.25, 1.33, 1.38, 1.40, 1.43, 1.50, 1.56","substitute":"Inter","letterSpacing":"-0.0250em, -0.0150em, 0.0100em, 0.0150em, 0.1000em"}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.5},{"role":"body-sm","size":14,"lineHeight":1.43,"letterSpacing":0.15},{"role":"body","size":16,"lineHeight":1.5},{"role":"subheading","size":24,"lineHeight":1.33,"letterSpacing":-0.48},{"role":"heading","size":36,"lineHeight":1.25,"letterSpacing":-0.54},{"role":"heading-lg","size":48,"lineHeight":1.2,"letterSpacing":-0.72},{"role":"display","size":72,"lineHeight":1.05,"letterSpacing":-1.08}],"spacing":{"radius":{"large":"14px","buttons":"8px","default":"8px","extraLarge":"32px"},"elementGap":"8px","sectionGap":"72px","cardPadding":"20px"},"radius":{"large":"14px","buttons":"8px","default":"8px","extraLarge":"32px"},"shadows":{"surfaces":[{"hex":"#000000","name":"Base Surface","level":0,"purpose":"Primary page background, deepest layer."},{"hex":"#061c37","name":"Component Surface","level":1,"purpose":"Subtle background for specific components or sections, seen in visual elements like the monitor screen background."},{"hex":"#171717","name":"Interactive Surface","level":2,"purpose":"Background for secondary buttons and subtly raised elements."}]},"guidelines":{"do":["Use Suisse Intl as the sole typeface, varying weight and size for hierarchy.","Prioritize Void Black (#000000) for backgrounds and Canvas White (#ffffff) for foreground text to maintain high contrast.","Apply 8px border radius consistently for most interactive elements like buttons and cards.","Employ the Deep Space Gradient (linear-gradient(rgb(71, 71, 71) 0%, rgb(0, 0, 0) 100%)) or Cosmic Drift Gradient (linear-gradient(200deg, rgb(100, 100, 100) 0%, rgb(0, 0, 0) 100%)) for feature section backgrounds to create subtle depth.","Use Ash Gray (#a3a3a3) for secondary text and disabled states to reduce visual hierarchy.","Maintain a default letter-spacing pattern, notably the tight -0.0150em for larger headings, to achieve a precise, chiseled look.","Utilize specific padding values (e.g., 12px vertical, 20px horizontal for primary buttons) to ensure consistent element sizing."],"dont":["Do not introduce additional saturated colors beyond the strict neutral palette.","Avoid overuse of shadows; reserve the rgba(0, 0, 0, 0.1) 0px 1px 6px 0px shadow for interactive elements only.","Do not deviate from Suisse Intl; no other font families should be used.","Do not use generic border radii; adhere to 8px, 14px, or 32px values.","Avoid bright or high-key imagery that would disrupt the dark, high-contrast aesthetic.","Do not use letter-spacing values outside the defined -0.0250em, -0.0150em, 0.0100em, 0.0150em, 0.1000em ranges.","Do not apply vibrant accent colors to active states; rely on subtle background changes or border shifts instead."]},"components":[{"name":"CTA Button Group","role":""},{"name":"Feature Stat / Metric Cards","role":""},{"name":"Pricing Plan Cards","role":""},{"name":"Primary Action Button","role":"Call to action."},{"name":"Secondary Action Button","role":"Alternative action."},{"name":"Ghost Navigation Button","role":"Navigation links in header, subtle secondary calls-to-action."},{"name":"Navigation Link Button","role":"Top navigation items."},{"name":"Image Action Button","role":"Action button within an image or content block."},{"name":"Header Navigation Link","role":"Primary navigation items in the header."}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text (primary): #ffffff\n- Background (primary): #000000\n- CTA Button Background: #ffffff\n- CTA Button Text: #000000\n- Secondary Button Background: #262626\n\n### 3-5 Example Component Prompts\n1. **Create a hero section:** full-width, using the 'Deep Space Gradient' (linear-gradient(rgb(71, 71, 71) 0%, rgb(0, 0, 0) 100%)) as background. Center a display heading in Canvas White (#ffffff), size 72px, Suisse Intl weight 700, letter-spacing -1.08px. Below it, add a body text (#ffffff) size 16px, Suisse Intl weight 400. Include two buttons centered below the text: a 'Primary Action Button' and a 'Secondary Action Button' with 20px horizontal gap between them.\n2. **Generate a 'Start for Free' Primary Action Button:** Background Canvas White (#ffffff), text Void Black (#000000). Padding 12px vertical, 20px horizontal. Border radius 8px. Apply shadow: rgba(0, 0, 0, 0.1) 0px 1px 6px 0px.\n3. **Design a 'Launch App' Secondary Action Button:** Background Iron (#262626), text Canvas White (#ffffff). Padding 12px vertical, 20px horizontal. Border radius 8px. Apply shadow: rgba(0, 0, 0, 0.1) 0px 1px 6px 0px.\n4. **Create a Header Navigation Link (e.g., 'Features'):** Text Canvas White (#ffffff), Suisse Intl weight 400, size 16px. Ensure consistent padding to maintain visual alignment with other navigation items."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775932585962-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775932585962-thumb.jpg"},"similarStyleIds":["62e8e59e-17a5-4eba-a6c6-1c7f67ded518","408a149c-702f-4442-99df-bea49d9c0d9b","cb6e4ab0-b8fe-45b0-bd22-6339b073e26d","c3ceca5c-d329-4559-b947-016172941ba2","8eb9c53e-d69c-497a-b640-610856cf3a60","733e6475-892a-4138-8835-bf40344df317","108e2695-6970-47d5-b5b0-eea8fc34e048","6323a42b-3b47-4774-92e4-15651a9ba2ac","e80231a2-e4d6-406a-a2c9-2e6109679690","30c3aa18-4323-4448-8ddd-3ca933fe5780","8401cb26-91a3-4b46-941e-1c75790821eb","572bc29f-8827-4f77-b248-08dddf1c2e26","86541d12-7870-4d51-8c47-0880fdb1ea01","0acef011-07da-4416-b874-ccdd675140f6","d417b42f-824d-45ba-a02e-cbef3b8ea0d8","d4c51049-58eb-404a-9fcb-f195928b1c99","9e5bd4b1-0ba8-4592-a5ec-a935bd4ea9c6","a1b78a21-a304-482b-8ce5-f612d95d44fe","c81d2be0-05b7-4755-8046-f2d19fbc448c","d74d84a6-e04a-4bda-b1e1-5ef1c49ce328"],"exports":{"designMdUrl":"/references/refero/50833119-cb36-4b75-b0cc-be48afea050a/design.md","tokensJsonUrl":"/references/refero/50833119-cb36-4b75-b0cc-be48afea050a/tokens.json","tailwindV4Url":"/references/refero/50833119-cb36-4b75-b0cc-be48afea050a/tailwind-v4.css","cssVariablesUrl":"/references/refero/50833119-cb36-4b75-b0cc-be48afea050a/tailwind-v4.css"}}