{"id":"e80231a2-e4d6-406a-a2c9-2e6109679690","name":"Authkit","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/e80231a2-e4d6-406a-a2c9-2e6109679690","originalSiteUrl":"https://authkit.com","capturedAt":"2026-04-11T16:00:50.728Z","colors":[{"name":"Midnight Abyss","hex":"#05060f","role":"Page backgrounds, elevated card backgrounds, deep shadows.","group":"neutral","cssVariable":"--color-midnight-abyss"},{"name":"Ghost White","hex":"#ffffff","role":"Primary text for headings and high-contrast elements, icon fills.","group":"neutral","cssVariable":"--color-ghost-white"},{"name":"Storm Gray","hex":"#2f343","role":"Subtle shadows, secondary background for interactive states.","group":"neutral","cssVariable":"--color-storm-gray"},{"name":"Comet","hex":"#d8ecf8","role":"Primary body text, prominent links, and headings; provides high readability against dark backgrounds.","group":"brand","cssVariable":"--color-comet"},{"name":"Arctic Mist","hex":"#d1e4fa","role":"Secondary body text, icon outlines, button text; a cool, muted off-white for softer emphasis.","group":"brand","cssVariable":"--color-arctic-mist"},{"name":"Celestial Light","hex":"#b6d9fc","role":"Focus states for interactive elements, subtle highlights.","group":"brand","cssVariable":"--color-celestial-light"},{"name":"Azure Glow","hex":"#c7d3ea","role":"Less prominent body text, disabled states, and subtle borders; a desaturated blue-gray that recedes gracefully.","group":"neutral","cssVariable":"--color-azure-glow"},{"name":"Slate Dew","hex":"#3f4959","role":"Outline for informational badges and subtle accents.","group":"neutral","cssVariable":"--color-slate-dew"},{"name":"Whisper Blue","hex":"#9da7ba","role":"Placeholder text in inputs, less important body text.","group":"neutral","cssVariable":"--color-whisper-blue"},{"name":"Neon Violet","hex":"#663af3","role":"Action buttons and primary interactive elements; a vibrant, focused color against the dark backdrop.","group":"accent","cssVariable":"--color-neon-violet"},{"name":"Interstellar Gray","hex":"#81899b","role":"Faint text color for small captions or secondary labels.","group":"neutral","cssVariable":"--color-interstellar-gray"},{"name":"Twilight Gradient Overlay","hex":"#d8ecf8","role":"Subtle background element for atmospheric effect, indicating light source.","group":"brand","gradient":"linear-gradient(0deg, rgb(216, 236, 248) 0%, rgb(152, 192, 239) 100%)","cssVariable":"--color-twilight-gradient-overlay"},{"name":"System Highlight Border","hex":"#bacff7","role":"Interactive element borders and inner glows, creating a subtle sci-fi effect.","group":"brand","gradient":"linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(186, 215, 247, 0.12), rgba(0, 0, 0, 0))","cssVariable":"--color-system-highlight-border"}],"typography":[{"role":"Used for all general body text, form elements, button labels, and secondary information. The slight negative letter spacing creates a compact, refined feel.","sizes":"12px, 14px, 16px, 18px, 24px","family":"Untitled Sans","weight":"400, 500, 600, 700","weights":[400,500,600,700],"lineHeight":"1.17, 1.20, 1.33, 1.43, 1.50, 2.29, 2.57","substitute":"Inter","letterSpacing":"-0.01"},{"role":"Exclusively for prominent headings and display text. Its distinct, clean geometry defines the primary content hierarchy and brand voice, appearing slightly wider than Untitled Sans for visual contrast.","sizes":"28px, 44px, 48px","family":"aeonikPro","weight":"400, 500","weights":[400,500],"lineHeight":"1.14, 1.16, 1.17, 1.20","substitute":"Space Grotesk","letterSpacing":"0"},{"role":"Used for specific, small informational text. The `tnum` font feature setting ensures consistent monospaced numbers, ideal for technical details or data display.","sizes":"15px","family":"dotDigital","weight":"400","weights":[400],"lineHeight":"1.20","substitute":"IBM Plex Mono","letterSpacing":"0.1","fontFeatureSettings":"\"tnum\""}],"spacing":{"radius":{"pill":"999px","cards":"12-16px","badges":"6px","inputs":"2-4px","buttons":"999px"},"elementGap":"8px","sectionGap":"48px","cardPadding":"24px"},"radius":{"pill":"999px","cards":"12-16px","badges":"6px","inputs":"2-4px","buttons":"999px"},"guidelines":{"do":["Prioritize `Midnight Abyss` (#05060f) as the primary background color for all main page sections and large surface areas.","Use `aeonikPro` (sub. Space Grotesk) for all marketing headlines (28-48px) and `Untitled Sans` (sub. Inter) for all body copy and UI elements (12-24px).","Apply `Pill` (999px) radius to all primary and secondary action buttons, and `Subtle` (12-16px) radius to cards and containers.","Employ the complex inner shadow `rgba(199, 211, 234, 0.12) 0px 1px 1px 0px inset, rgba(199, 211, 234, 0.05) 0px 24px 48px 0px inset, rgba(6, 6, 14, 0.7) 0px 24px 32px 0px` on elevated cards to create visual depth.","Reserve `Neon Violet` (#663af3) exclusively for critical call-to-action buttons, maintaining its impact.","Use subtle linear gradients for decorative elements, such as `linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(186, 215, 247, 0.12), rgba(0, 0, 0, 0))` for dividers or highlights."],"dont":["Avoid using highly saturated, non-brand colors outside of the designated `Neon Violet` accent.","Do not use generic drop shadows; instead, utilize the specified `inset` shadows and soft outer glows to achieve depth.","Do not deviate from the specified font families; their visual distinction is core to the brand identity.","Do not apply standard rectangular shapes to buttons; all interactive buttons should use `Pill` (999px) radius.","Avoid using flat, opaque background colors for cards; instead, use translucent backgrounds with subtle inner shadows to maintain the 'frosted glass' effect.","Do not use letter-spacing on display headings; `aeonikPro` should maintain `normal` letter spacing at larger sizes, while `Untitled Sans` uses a subtle negative spacing."]}}