{"id":"fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","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/fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","originalSiteUrl":"https://movingparts.io","capturedAt":"2026-04-30T03:57:53.555Z","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":"Moving Parts","summary":"High-contrast geometric clarity","description":"Moving Parts employs a bold, high-contrast aesthetic characterized by large, confident typography and a vibrant blue accent on an otherwise monochrome canvas. Geometric shapes and a grid-like structure provide underlying order, while distinct large radii soften component edges. The design feels sharp and modern, with a strong focus on readability for headlines and crisp functional elements.","industry":"devtools","colorScheme":"light","colors":[{"name":"Midnight Ink","hex":"#000000","role":"Primary text, headers, icon strokes, borders, and some background fills on dark sections. High contrast establishes a strong visual hierarchy","group":"neutral"},{"name":"Canvas White","hex":"#ffffff","role":"Page backgrounds, card surfaces, secondary text on dark backgrounds, and icon fills. Provides a bright, expansive foundation","group":"neutral"},{"name":"Ghostly Gray","hex":"#121212","role":"Secondary text in dark sections, subtle borders, and some elevated dark surfaces. Supports the dark mode appearance with a slightly softer black","group":"neutral"},{"name":"Fog Grid","hex":"#bcc1c7","role":"Decorative background grids and subtle outlines. Creates texture without distracting from content","group":"neutral"},{"name":"Warm Mist","hex":"#efefef","role":"Subtle background panels and soft dividers. Adds a touch of warmth to the neutral palette","group":"neutral"},{"name":"Cloud Gray","hex":"#b3b3b3","role":"Less prominent text, borders, and subtle shadow effects. Indicates inactive states or secondary information","group":"neutral"},{"name":"Pale Ash","hex":"#999999","role":"Muted helper text and tertiary information. Recedes into the background for less critical content","group":"neutral"},{"name":"Deep Royal Blue","hex":"#0000ff","role":"Primary action buttons, interactive elements, highlights, and featured backgrounds. This vivid blue serves as the sole dominant brand accent","group":"brand"},{"name":"Emerald Green","hex":"#00d37c","role":"Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content","group":"accent"},{"name":"Conic Spectrum","hex":"#57C0F1","role":"Decorative gradients in abstract visuals or hero sections. Adds a burst of multi-chromatic energy","group":"accent","gradient":"conic-gradient(rgb(87, 192, 241) 0%, rgb(74, 166, 232) 13%, rgb(134, 57, 162) 26%, rgb(239, 137, 159) 42%, rgb(234, 57, 42) 55%, rgb(239, 115, 53) 62%, rgb(245, 192, 68) 73%, rgb(245, 255, 84) 84%, rgb(160, 218, 83) 95%, rgb(87, 192, 241) 100%)"}],"typography":[{"role":"Body text, smaller headings, and supplementary information. Its semi-monospaced nature adds a technical, precise feel.","sizes":"12px, 17px, 18px, 21px, 25px, 27px, 30px, 34px, 35px","family":"Whyte Semi-Mono","weight":"400, 500, 600","weights":[400,500,600],"lineHeight":"1.06, 1.15, 1.18, 1.20, 1.36, 1.89, 2.38","substitute":"Space Mono","letterSpacing":"-0.0060em at 35px, 0.0100em at 27px, 0.0400em at 12px"},{"role":"Primary headings, navigation, and prominent callouts. Features like 'ss01' for alternate glyphs give it specific brand character.","sizes":"18px, 21px, 22px, 23px, 26px, 27px, 28px, 30px, 31px, 32px, 35px, 38px, 40px, 47px, 51px, 53px, 58px, 62px, 67px, 70px, 100px, 110px","family":"Unica77","weight":"400, 500, 600, 700","weights":[400,500,600,700],"lineHeight":"0.92, 0.93, 0.94, 0.95, 0.96, 1.00, 1.05, 1.12, 1.19, 1.20, 1.21, 1.22, 1.27, 1.32, 1.37, 1.47, 1.61, 1.71, 1.81","substitute":"Roboto","letterSpacing":"-0.0400em at 110px, -0.0300em at 62px, -0.0050em at 32px, -0.0040em at 22px, 0.0100em at 21px, 0.0300em at 18px, 0.0400em at 18px","fontFeatureSettings":"\"salt\", \"ss01\", \"ss02\", \"ss03\", \"ss04\", \"ss05\", \"ss07\", \"ss08\", \"ss09\""},{"role":"Large, impactful display headlines where tight tracking enhances presence. Used for key section titles.","sizes":"27px, 32px, 60px, 81px, 98px","family":"PP Neue Montreal","weight":"400, 500","weights":[400,500],"lineHeight":"0.82, 0.84, 0.85, 0.87, 1.20, 1.21","substitute":"Inter","letterSpacing":"-0.0300em at 98px, -0.0100em at 60px, 0.0100em at 27px"},{"role":"Massive, compressed display typography for highly visual statements, often paired with graphical elements.","sizes":"195px, 248px","family":"Druk XXCondensed Super","weight":"400","weights":[400],"lineHeight":"1.20","substitute":"Oswald Condensed","letterSpacing":"normal"},{"role":"Inter — detected in extracted data but not described by AI","sizes":"25px, 27px, 28px, 35px, 37px, 42px, 52px","family":"Inter","weight":"400, 500, 600","lineHeight":"0.98, 1.2, 1.38, 1.48","letterSpacing":"-0.004, -0.003"},{"role":"ui-monospace — detected in extracted data but not described by AI","sizes":"26px","family":"ui-monospace","weight":"400","lineHeight":"1.2"},{"role":"Fraunces 72pt Soft — detected in extracted data but not described by AI","sizes":"27px, 36px, 60px","family":"Fraunces 72pt Soft","weight":"100, 200","lineHeight":"1.2, 1.29, 1.35","fontFeatureSettings":"\"ss01\""},{"role":"Arial — detected in extracted data but not described by AI","sizes":"13px","family":"Arial","weight":"400, 500, 600","lineHeight":"1.2"},{"role":"Fraunces 72pt SuperSoft — detected in extracted data but not described by AI","sizes":"45px","family":"Fraunces 72pt SuperSoft","weight":"200","lineHeight":"1.06","letterSpacing":"-0.01","fontFeatureSettings":"\"ss01\""},{"role":"TAN-BUSTER — detected in extracted data but not described by AI","sizes":"91px","family":"TAN-BUSTER","weight":"600","lineHeight":"1.18","fontFeatureSettings":"\"ss01\""}],"typeScale":[{"role":"body","size":17,"lineHeight":1.18,"letterSpacing":-0.1},{"role":"subheading","size":21,"lineHeight":1.2,"letterSpacing":0.21},{"role":"heading-sm","size":27,"lineHeight":1.2,"letterSpacing":0.27},{"role":"heading","size":60,"lineHeight":0.85,"letterSpacing":-0.6},{"role":"heading-lg","size":98,"lineHeight":0.82,"letterSpacing":-2.94},{"role":"display","size":248,"lineHeight":1.2,"letterSpacing":0}],"spacing":{"radius":{"cards":"90.3833px","icons":"18px","images":"14px","buttons":"0px","largeCards":"106.333px","smallElements":"2.5px"},"elementGap":"13px","sectionGap":"40px","cardPadding":"30px"},"radius":{"cards":"90.3833px","icons":"18px","images":"14px","buttons":"0px","largeCards":"106.333px","smallElements":"2.5px"},"shadows":{"surfaces":[{"hex":"#ffffff","name":"Canvas White","level":0,"purpose":"Base page background and default card surface."},{"hex":"#efefef","name":"Warm Mist","level":1,"purpose":"Soft background distinction for sections or subtle component elevation."},{"hex":"#121212","name":"Ghostly Gray","level":2,"purpose":"Accent background for dark sections or strong visual breaks."}]},"guidelines":{"do":["Use 'Midnight Ink' (#000000) for all primary text and headlines to maintain strong contrast.","Apply 'Deep Royal Blue' (#0000ff) exclusively for primary calls to action and critical interactive elements.","Utilize Unica77 for headlines and navigation, leveraging its font feature settings for characteristic glyphs and precise tracking.","Favor large, confident typography for headlines, with tighter letter-spacing on larger sizes and normal spacing on body text.","Maintain a clear visual hierarchy by limiting saturated colors to 'Deep Royal Blue' and 'Emerald Green' as deliberate accents.","Employ the specific large border radii of 90.3833px for content cards and 106.333px for prominent containers to define component shapes.","Ensure all interactive elements provide a comfortable 25px vertical and 30px horizontal padding, as seen on buttons and inputs."],"dont":["Do not introduce new saturated primary colors; adhere to 'Deep Royal Blue' as the sole dominant brand accent.","Avoid generic small border radii; use the distinct 0px for buttons or the large values (90.3833px, 106.333px) for cards and containers.","Do not use subtle gray backgrounds or text colors for primary content or calls to action; reserve them for secondary information or decorative grids.","Do not add additional box-shadows beyond the single defined `rgba(0, 0, 0, 0.3) 15px 20px 30px 0px` for cards, maintaining a predominantly flat aesthetic.","Do not break the rigid grid-like layout with free-form overlapping elements, maintaining structured geometric compositions.","Avoid thin, lightweight typefaces for headlines outside of specific decorative uses; default to heavier weights for impact.","Do not use 'Arial' or 'ui-monospace' for standard UI elements unless explicitly for code snippets, adhering to the brand's custom typefaces."]},"components":[{"name":"Primary Action Button","role":"Main call-to-action"},{"name":"Ghost Button (Primary)","role":"Secondary action or navigation"},{"name":"Pill Button (Neutral)","role":"Status tags or filters"},{"name":"Rounded Corner Card","role":"Content container"},{"name":"Large Rounded Card (Bottom-Flat)","role":"Hero or feature container"},{"name":"Text Input (Base)","role":"Single-line text entry"}],"customSections":[{"title":"Agent Prompt Guide","content":"primary action: #0000ff (filled action)\nCreate a Primary Action Button: #0000ff background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.\n\n\nCreate a Feature Card: 'Canvas White' (#ffffff) background, 90.3833px border-radius. Headline (Unica77, 32px, weight 700, 'Midnight Ink'). Body text (Whyte Semi-Mono, 17px, weight 400, 'Midnight Ink'). Internal padding of 30px.\n\nCreate a Navigation Item: 'Midnight Ink' (#000000) text (Unica77, 21px, weight 500, line-height 1.2) against a 'Canvas White' (#ffffff) background. Normal letter-spacing.\n\nCreate an Icon Button: 'Midnight Ink' (#000000) text (Whyte Semi-Mono, 12px, weight 400) or 'Deep Royal Blue' (#0000ff) icon stroke on a 'Canvas White' (#ffffff) background with 18px border radius for the interactive part. Element gap 13px."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777521447559-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777521447559-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7-1777582760806-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7-1777582760806-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7-1777582760806-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7-1777582760806-preview-detail-poster.jpg"},"similarStyleIds":["c14bfde7-6f08-4b54-bd9b-39989d10cfef","d417b42f-824d-45ba-a02e-cbef3b8ea0d8","9342e89b-c2fe-4acf-9993-53b44e0c13b5","62b22816-2d98-4e98-9c17-bf600ddb2fc8","a76ec6ba-20b3-495c-9d89-1e58281e79e7","12255b63-e506-4bc1-a4cd-d05487de32f3","7b083729-e694-4b66-82a3-befb08451722","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","66eb1c37-a8e5-4e6c-b17f-a75385b462e7","75fdb89f-ca64-41b3-af36-7a78bd09448e","ec0f5bca-8367-49e7-b8aa-73b3fa09a4a0","e549766e-b8b1-48a2-bd72-8cc04e9e4e9d","0fd67ec5-7e9c-4ca9-b368-5d9c7388477a","e0ad1a25-5609-45e6-a355-9bdeec86c5ae","41af8353-6a8f-416d-947b-57932f591497","0f7da1b2-9d06-4ef5-b5a8-ef7f92e57ab2","8f42603d-7ff9-446e-99a3-6bdd1f388ae5","9fecf7d6-b717-49ca-8edc-b10d6110b21c","47c9e353-bed3-4d6c-8316-63a2db5cc377","60b529c2-c0f7-49be-9a77-8d3762838f05"],"exports":{"designMdUrl":"/references/refero/fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7/design.md","tokensJsonUrl":"/references/refero/fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7/tokens.json","tailwindV4Url":"/references/refero/fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7/tailwind-v4.css","cssVariablesUrl":"/references/refero/fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7/tailwind-v4.css"}}