{"id":"50833119-cb36-4b75-b0cc-be48afea050a","name":"Krea","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","colors":[{"name":"Void Black","hex":"#000000","role":"Primary background, text (on light buttons), icons, borders.","group":"neutral","cssVariable":"--color-void-black"},{"name":"Canvas White","hex":"#ffffff","role":"Primary text, button backgrounds, interactive elements, icons.","group":"neutral","cssVariable":"--color-canvas-white"},{"name":"Ash Gray","hex":"#a3a3a3","role":"Secondary text, disabled states, subtle borders.","group":"neutral","cssVariable":"--color-ash-gray"},{"name":"Coal","hex":"#171717","role":"Darker interactive elements, subtle surface variations.","group":"neutral","cssVariable":"--color-coal"},{"name":"Iron","hex":"#262626","role":"Button backgrounds for secondary actions.","group":"neutral","cssVariable":"--color-iron"},{"name":"Frost","hex":"#f5f5f5","role":"Light button backgrounds, subtle accents in light mode elements.","group":"neutral","cssVariable":"--color-frost"},{"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%)","cssVariable":"--color-deep-space-gradient"},{"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%)","cssVariable":"--color-cosmic-drift-gradient"},{"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%)","cssVariable":"--color-haze-gradient"}],"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"}],"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."]}}