{"id":"e80231a2-e4d6-406a-a2c9-2e6109679690","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","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":"Authkit","summary":"Midnight Command Center. Imagine a high-tech dashboard glowing softly in a dark room, with frosted glass elements reflecting subtle light.","description":"AuthKit's design evokes an 'internal dashboard' feel — polished and functional without being sterile. Dark, translucent surfaces glow with subtle inner shadows and a restrained use of soft, muted blues. The sharp contrast between the deep `Midnight Abyss` background and crisp white text, paired with a limited palette of nearly achromatic blues, creates a sense of digital precision. The deliberate mix of round (`Pill`) and subtly rounded (`Subtle`) corners on different elements adds a tactile quality to the otherwise sleek, high-tech aesthetic, hinting at user-friendliness within a complex system.","tags":["dark mode","futuristic","translucent","geometric","minimal tech","frosted glass","subtle glow","developer tool","high contrast","blue-tinged"],"industry":"devtools","colorScheme":"dark","colors":[{"name":"Midnight Abyss","hex":"#05060f","role":"Page backgrounds, elevated card backgrounds, deep shadows.","group":"neutral"},{"name":"Ghost White","hex":"#ffffff","role":"Primary text for headings and high-contrast elements, icon fills.","group":"neutral"},{"name":"Storm Gray","hex":"#2f343","role":"Subtle shadows, secondary background for interactive states.","group":"neutral"},{"name":"Comet","hex":"#d8ecf8","role":"Primary body text, prominent links, and headings; provides high readability against dark backgrounds.","group":"brand"},{"name":"Arctic Mist","hex":"#d1e4fa","role":"Secondary body text, icon outlines, button text; a cool, muted off-white for softer emphasis.","group":"brand"},{"name":"Celestial Light","hex":"#b6d9fc","role":"Focus states for interactive elements, subtle highlights.","group":"brand"},{"name":"Azure Glow","hex":"#c7d3ea","role":"Less prominent body text, disabled states, and subtle borders; a desaturated blue-gray that recedes gracefully.","group":"neutral"},{"name":"Slate Dew","hex":"#3f4959","role":"Outline for informational badges and subtle accents.","group":"neutral"},{"name":"Whisper Blue","hex":"#9da7ba","role":"Placeholder text in inputs, less important body text.","group":"neutral"},{"name":"Neon Violet","hex":"#663af3","role":"Action buttons and primary interactive elements; a vibrant, focused color against the dark backdrop.","group":"accent"},{"name":"Interstellar Gray","hex":"#81899b","role":"Faint text color for small captions or secondary labels.","group":"neutral"},{"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%)"},{"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))"}],"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\""}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.5,"letterSpacing":-0.01},{"role":"body","size":14,"lineHeight":1.5,"letterSpacing":-0.01},{"role":"body-lg","size":16,"lineHeight":1.5,"letterSpacing":-0.01},{"role":"subheading","size":18,"lineHeight":1.43,"letterSpacing":-0.01},{"role":"heading","size":24,"lineHeight":1.33,"letterSpacing":-0.01},{"role":"heading-lg","size":28,"lineHeight":1.2,"letterSpacing":0},{"role":"display","size":44,"lineHeight":1.16,"letterSpacing":0},{"role":"display-xl","size":48,"lineHeight":1.14,"letterSpacing":0}],"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."]},"components":[{"name":"Login Form Card","role":""},{"name":"Dark/Light Mode Toggle + Feature Badges","role":""},{"name":"Section Heading + Glassy Feature Cards","role":""},{"name":"Primary Pill Button","role":"Action"},{"name":"Secondary Outline Button","role":"Secondary action"},{"name":"Solid Primary Button","role":"Call to Action"},{"name":"Glassy Feature Card","role":"Information Display"},{"name":"Login Form Card","role":"Data Input Container"},{"name":"Minimal Input Field","role":"Text Input"},{"name":"Status Badge","role":"Metatag / Categorization"},{"name":"Icon Button","role":"Small interactive element"}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- **Text (Primary):** #d8ecf8\n- **Background (Primary):** #05060f\n- **CTA (Primary):** #663af3\n- **Border (Subtle):** rgba(186, 215, 247, 0.12)\n- **Accent (Highlight):** #b6d9fc\n\n### 3-5 Example Component Prompts\n1. **Create a Hero Section:** Set background to `Midnight Abyss` (#05060f). Center a headline: 'AuthKit' using `aeonikPro` 48px, `Ghost White` (#ffffff), no letter spacing. Below it, a subheadline: 'The world’s best login box, powered by WorkOS + Radix.' using `Comet` (#d8ecf8) 24px `Untitled Sans`. Add a 'Get started' button: `Primary Pill Button` style.\n2. **Generate a Login Form Card:** Use `Login Form Card` component style with `Midnight Abyss` background and 16px radius, including its specific inner shadow `rgba(216, 236, 248, 0.2) 0px 1px 1px 0px inset, rgba(168, 216, 245, 0.06) 0px 24px 48px 0px inset, rgba(0, 0, 0, 0.3) 0px 16px 32px 0px`. Inside, include an 'Email' input: `Minimal Input Field` style. Follow with a 'Continue' button: `Solid Primary Button` style. Stack elements vertically with an `elementGap` of 16px.\n3. **Design a Feature Grid Section:** Use a transparent background (rgba(186, 214, 247, 0.01)) within a main section (section gap: 48px from top/bottom). Create a 3-column grid of `Glassy Feature Card` components. Each card should contain a headline using `Untitled Sans` 18px 600, Arctic Mist text, and a `Ghost White` icon. Place a `Status Badge` (e.g., 'Single Sign-On') below the headline inside each card. `elementGap` between title, text, and badge should be 8px."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775923220797-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775923220797-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/e80231a2-e4d6-406a-a2c9-2e6109679690-1777560541994-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/e80231a2-e4d6-406a-a2c9-2e6109679690-1777560541994-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/e80231a2-e4d6-406a-a2c9-2e6109679690-1777560541994-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/e80231a2-e4d6-406a-a2c9-2e6109679690-1777560541994-preview-detail-poster.jpg"},"similarStyleIds":["c3ceca5c-d329-4559-b947-016172941ba2","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","408a149c-702f-4442-99df-bea49d9c0d9b","18a75348-513a-49d8-94f5-e2df8c118b6b","108e2695-6970-47d5-b5b0-eea8fc34e048","50833119-cb36-4b75-b0cc-be48afea050a","cb6e4ab0-b8fe-45b0-bd22-6339b073e26d","4d4772a3-e1da-415f-a6d7-658dcefdcecd","e81d4724-9615-4159-8678-cef35f986cab","86541d12-7870-4d51-8c47-0880fdb1ea01","733e6475-892a-4138-8835-bf40344df317","7421c174-a1b1-4695-a9e7-a82dc6f5ea3b","91b110da-902b-4d09-8bf0-26bd1f25f8b2","8401cb26-91a3-4b46-941e-1c75790821eb","10654184-eb92-4b75-a7af-bd92bc6cdc5c","30c3aa18-4323-4448-8ddd-3ca933fe5780","0acef011-07da-4416-b874-ccdd675140f6","2ab1abbc-b9f5-418f-a36a-94a4eca74ba9","4ce66adb-ed8b-4e71-8066-15d92c4d2be0","632249f1-fd78-4c77-9b34-7bae37ff3e9b"],"exports":{"designMdUrl":"/references/refero/e80231a2-e4d6-406a-a2c9-2e6109679690/design.md","tokensJsonUrl":"/references/refero/e80231a2-e4d6-406a-a2c9-2e6109679690/tokens.json","tailwindV4Url":"/references/refero/e80231a2-e4d6-406a-a2c9-2e6109679690/tailwind-v4.css","cssVariablesUrl":"/references/refero/e80231a2-e4d6-406a-a2c9-2e6109679690/tailwind-v4.css"}}