{"id":"90ce5883-bb24-4466-93f7-801cd617b0d1","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/90ce5883-bb24-4466-93f7-801cd617b0d1","originalSiteUrl":"https://linear.app","capturedAt":"2026-04-29T00:05:59.975Z","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":"Linear","summary":"Midnight Command Center: A dark, layered interface lit by precise accents, like a high-tech control panel.","description":"Linear presents a sophisticated and focused dark-mode experience, reminiscent of a command center dashboard. A deep charcoal base creates a serious, immersive canvas, while subtle gradients and layered surfaces build depth without harsh contrasts. Distinctive muted text colors (#8a8f98 for secondary, #62666d for tertiary) maintain readability against the dark backdrop. Critically, interaction is marked by a single vivid lime green (#e4f222), applied selectively to primary calls to action, preventing visual clutter and guiding the user's eye with precision.","industry":"ai","colorScheme":"dark","colors":[{"name":"Pitch Black","hex":"#08090a","role":"Page background, primary surface for base elements, subtly integrated into shadows for depth.","group":"neutral"},{"name":"Graphite","hex":"#0f1011","role":"Elevated card backgrounds, slightly lighter than the canvas to denote layering.","group":"neutral"},{"name":"Deep Slate","hex":"#161718","role":"Secondary elevated card backgrounds, providing another layer of visual hierarchy.","group":"neutral"},{"name":"Charcoal Grey","hex":"#23252a","role":"Borders and some shadowed card surfaces, framing elements with a subtle distinction.","group":"neutral"},{"name":"Muted Ash","hex":"#323334","role":"Subtle borders and dividers, indicating soft separations within the dark theme.","group":"neutral"},{"name":"Gunmetal","hex":"#383b3f","role":"Tertiary background elements and input borders, a darker neutral for functional elements.","group":"neutral"},{"name":"Porcelain","hex":"#f7f8f8","role":"Primary text and icons, providing strong contrast for readability against dark backgrounds.","group":"neutral"},{"name":"Light Steel","hex":"#d0d6e0","role":"Secondary text and borders, for less prominent information or structural lines.","group":"neutral"},{"name":"Storm Cloud","hex":"#8a8f98","role":"Tertiary text, descriptive labels, and inactive states, recedes into the background for low-priority details.","group":"neutral"},{"name":"Fog Grey","hex":"#62666d","role":"Muted text for metadata, timestamps, and further de-emphasized content.","group":"neutral"},{"name":"Alabaster","hex":"#e5e5e6","role":"Informational borders and subtle fills, often seen in code blocks or explanatory components.","group":"neutral"},{"name":"Neon Lime","hex":"#e4f222","role":"Primary action indicators, active states, and focus elements — a high-energy focal point.","group":"brand"},{"name":"Aether Blue","hex":"#5e6ad2","role":"Decorative highlights and occasional background elements, suggesting a technological or informational context.","group":"accent"},{"name":"Forest Green","hex":"#008d2c","role":"Positive status indicators, success messages, and related iconography.","group":"semantic"},{"name":"Cyan Spark","hex":"#02b8cc","role":"Informational highlights and unique icon fills, providing a cool accent.","group":"accent"},{"name":"Emerald","hex":"#27a644","role":"Success and completion states, often paired with green text.","group":"semantic"},{"name":"Warning Red","hex":"#eb5757","role":"Observed in icon fill, body borderColor, other fill. Extracted usage does not support a distinct primary control color.","group":"semantic"},{"name":"Deep Violet","hex":"#6366f1","role":"Background accents in specific content blocks, indicating a distinct informational category.","group":"accent"},{"name":"Amethyst","hex":"#8b5cf6","role":"Another variant of violet for backgrounds, used interchangeably with Deep Violet for visual diversity.","group":"accent"}],"typography":[{"role":"Primary UI typeface for all content including headings, body text, and interactive elements. Its variable weights provide a clean, modern aesthetic with strong technical readability.","sizes":"10px, 11px, 12px, 13px, 14px, 15px, 16px, 17px, 20px, 24px, 32px, 48px, 64px, 72px","family":"Inter Variable","weight":"300, 400, 510, 590","weights":[300,400,510,590],"lineHeight":"1.00, 1.13, 1.20, 1.33, 1.40, 1.47, 1.50, 1.60, 2.00, 2.46, 2.75","substitute":"Inter","letterSpacing":"-0.22, -0.15, -0.13, -0.12, -0.11, -0.1","fontFeatureSettings":"\"cv01\", \"ss03\""},{"role":"Monospaced font for code snippets, technical details, and certain data displays, ensuring consistent character alignment and technical clarity.","sizes":"12px, 13px, 14px","family":"Berkeley Mono","weight":"400","weights":[400],"lineHeight":"1.30, 1.40, 1.50, 1.71","substitute":"IBM Plex Mono","letterSpacing":"-0.15"}],"typeScale":[{"role":"caption","size":10,"lineHeight":1.4,"letterSpacing":-0.1},{"role":"body","size":14,"lineHeight":1.4,"letterSpacing":-0.13},{"role":"heading","size":24,"lineHeight":1.33,"letterSpacing":-0.22},{"role":"heading-lg","size":48,"lineHeight":1.2,"letterSpacing":-0.22},{"role":"display","size":72,"lineHeight":1,"letterSpacing":-0.22}],"spacing":{"radius":{"pill":"9999px","tags":"2px","cards":"6px","badges":"4px","inputs":"6px","buttons":"6px","default":"6px"},"elementGap":"8px","sectionGap":"24px","cardPadding":"12px"},"radius":{"pill":"9999px","tags":"2px","cards":"6px","badges":"4px","inputs":"6px","buttons":"6px","default":"6px"},"shadows":{"surfaces":[{"hex":"#08090a","name":"Pitch Black Canvas","level":0,"purpose":"Base page background and deepest surface level."},{"hex":"#0f1011","name":"Graphite Card","level":1,"purpose":"Primary card surface for general content, slightly elevated from the canvas."},{"hex":"#161718","name":"Deep Slate Elevated Card","level":2,"purpose":"More prominent card surface, used for focused content sections or lists."},{"hex":"#23252a","name":"Charcoal Grey Overlay","level":3,"purpose":"Accent surface for borders, shadows, and subtle overlays, providing clear separation."}]},"guidelines":{"do":["Use 'Pitch Black' (#08090a) for the primary page background to establish the dark theme.","Apply 'Porcelain' (#f7f8f8) for all primary text and important icons to ensure readability.","Highlight primary interactive elements exclusively with 'Neon Lime' (#e4f222) as a background, restricting its use to guide user attention.","Create depth and hierarchy by layering surfaces using 'Pitch Black' (#08090a), 'Graphite' (#0f1011), and 'Deep Slate' (#161718) backgrounds.","Employ the Inter Variable font family with specific letter-spacing adjustments for all UI text, such as -0.22px for display sizes and -0.11px for body text, to maintain a tight, precise feel.","Utilize 6px border-radius for all primary buttons, cards, and input fields to maintain a consistent, subtly rounded aesthetic.","Use 'Storm Cloud' (#8a8f98) for secondary text and descriptive labels to recede into the background."],"dont":["Do not introduce additional bright or saturated colors beyond 'Neon Lime' (#e4f222) for interactive elements; maintain its singular role.","Avoid using harsh white backgrounds or light-themed patterns, as the system is anchored in a dark mode aesthetic.","Do not deviate from the specified typeface choices; 'Inter Variable' and 'Berkeley Mono' are fundamental to the visual identity.","Refrain from using strong, diffuse shadows; elevation is achieved through subtle layering and sharp, contained shadows like rgba(0, 0, 0, 0.4) 0px 2px 4px 0px.","Do not apply broad, decorative background gradients across large sections of the UI; gradients are subtle and contained to specific functional areas.","Do not use generic border-radii; adhere to 6px for key components like cards and buttons, and 2px for smaller tags, to preserve the signature balance of softness and precision.","Avoid large amounts of white space; the design is compact, leveraging an 8px element gap as a standard measurement."]},"components":[{"name":"Issue Card","role":""},{"name":"CTA Button Group","role":""},{"name":"Issue List Board","role":""},{"name":"Primary Action Button","role":"Call to action button"},{"name":"Ghost Navigation Button","role":"Navigation and secondary actions"},{"name":"Subtle Link Button","role":"Tertiary actions and links"},{"name":"Navigation Item Button","role":"Sidebar navigation items"},{"name":"Default Card","role":"Content container"},{"name":"Elevated Card","role":"Prominent content container"},{"name":"Nested Card","role":"Internal content grouping"},{"name":"Input Field","role":"User input fields"},{"name":"Subtle Input Field","role":"Search or secondary input fields"},{"name":"Badge","role":"Label or tag"}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\n- text: #f7f8f8 (Porcelain)\n- background: #08090a (Pitch Black)\n- border: #23252a (Charcoal Grey)\n- accent: #5e6ad2 (Aether Blue)\n- primary action: #e4f222 (filled action)\n\n3-5 Example Component Prompts:\n- Create a call-to-action button: 'Neon Lime' background (#e4f222), 'Pitch Black' text (#08090a), Inter Variable font weight 590 at 15px, 6px border-radius, 12px vertical and 24px horizontal padding.\n- Create a default card with content: 'Graphite' background (#0f1011), 6px border-radius, rgba(0, 0, 0, 0.4) 0px 2px 4px 0px shadow. Inside, use Inter Variable font weight 400 at 14px with 'Porcelain' text (#f7f8f8), and a subsection headline at 17px weight 510 with 'Porcelain' text (#f7f8f8). Apply 8px padding internally.\n- Create a sidebar navigation item: Ghost button with transparent background, 'Storm Cloud' text (#8a8f98), Inter Variable font weight 400 at 14px, 2px border-radius, no padding.\n- Create an input field: transparent background with a 'Gunmetal' fill (#383b3f), 'Light Steel' text (#d0d6e0) using Inter Variable font weight 400 at 14px, 6px border-radius. Inset with a 1px 'Charcoal Grey' border (#23252a). Padding 12px vertical and 14px horizontal."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777421130497-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777421130497-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/90ce5883-bb24-4466-93f7-801cd617b0d1-1777555512457-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/90ce5883-bb24-4466-93f7-801cd617b0d1-1777555512457-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/90ce5883-bb24-4466-93f7-801cd617b0d1-1777555512457-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/90ce5883-bb24-4466-93f7-801cd617b0d1-1777555512457-preview-detail-poster.jpg"},"similarStyleIds":["3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8","0d914ef0-fa84-4c60-a9aa-cef0b5eb6e5d","e869e214-f672-4ac3-bfc2-bd25de7b003b","720c9806-2d70-4dd1-9a19-12efd71fc742","a5cc9b0f-d274-458a-b990-d18482b70838","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","9f9a4a4f-1a27-47ca-a65b-68b9850a84e4","408a149c-702f-4442-99df-bea49d9c0d9b","bc4fb98b-37ec-480a-b7a9-acd197cbebb9","225059ac-0450-49d3-b2b7-d0e98b7ae938","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","8b5cfe6d-a2bd-4edb-854e-9185cec46c09","9b9b0ca1-5067-4115-b62f-ee0e43d1f37f","2b6642d9-fa66-4c06-9804-30f56e544a6d","18a75348-513a-49d8-94f5-e2df8c118b6b","8401cb26-91a3-4b46-941e-1c75790821eb","63bd1ed9-b161-45fd-8734-85282bd945ec","8601c8ef-e1ea-4186-adb2-6f9a74caf436","c60a19c1-259a-4001-95d9-6a3826f5c06e","742b500d-3e10-4daa-bb89-d0d26272e5f6"],"exports":{"designMdUrl":"/references/refero/90ce5883-bb24-4466-93f7-801cd617b0d1/design.md","tokensJsonUrl":"/references/refero/90ce5883-bb24-4466-93f7-801cd617b0d1/tokens.json","tailwindV4Url":"/references/refero/90ce5883-bb24-4466-93f7-801cd617b0d1/tailwind-v4.css","cssVariablesUrl":"/references/refero/90ce5883-bb24-4466-93f7-801cd617b0d1/tailwind-v4.css"}}