# Moving Parts Brand Identity A complete profile of **Moving Parts**'s visual system — colors, typography, components, and personality — extracted from https://movingparts.io. Built for designers, agents, and AI tools. - Page: https://characterquilt.com/branding/moving-parts - Machine-readable JSON: https://characterquilt.com/branding/moving-parts.json - Per-page llms.txt: https://characterquilt.com/branding/moving-parts/llms.txt ## Quick Facts | Field | Value | |---|---| | Primary | #DADBF3 | | Accent | #0000FF | | Body Font | Inter var | | Heading Font | Inter var | ## Color Palette - primary: #DADBF3 - secondary: #2525FF - accent: #0000FF - background: #FFFFFF - textPrimary: #000000 - link: #0000FF ## Typography - primary: Inter var — https://fonts.google.com/specimen/Inter+var - heading: Inter var — https://fonts.google.com/specimen/Inter+var ## Visual Assets - Logo: data:image/svg+xml;utf8,%3Csvg%20role%3D%22presentation%22%20class%3D%22logo%22%20width%3D%22158%22%20height%3D%2259%22%20viewBox%3D%220%200%20158%2059%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20data-fc-idx%3D%220%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M123.828%201.96507C122.989%200.604257%20121.011%200.604253%20120.172%201.96507L107%2023.3243V2.07407C107%201.48088%20106.519%201%20105.926%201H50.0741C49.4809%201%2049%201.48088%2049%202.07407V8.99986C43.7968%204.04295%2036.7538%200.999939%2029%200.999939C12.9837%200.999939%200%2013.9837%200%2029.9999C0%2046.0162%2012.9837%2058.9999%2029%2058.9999C36.7538%2058.9999%2043.7968%2055.9569%2049%2051V57.9259C49%2058.5191%2049.4809%2059%2050.0741%2059H88.8366C88.8406%2059%2088.8445%2059%2088.8484%2059H155.152C156.833%2059%20157.863%2057.1555%20156.98%2055.7243L123.828%201.96507ZM122%207.57328L93.0618%2054.5H150.938L122%207.57328ZM87.775%2054.5L102.5%2030.6216V5.5H53.5V54.5H87.775ZM49%2044.1543C44.5616%2050.4144%2037.2579%2054.4999%2029%2054.4999C15.469%2054.4999%204.5%2043.5309%204.5%2029.9999C4.5%2016.469%2015.469%205.49994%2029%205.49994C37.2579%205.49994%2044.5616%209.58548%2049%2015.8455V44.1543Z%22%20fill%3D%22currentcolor%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E - Favicon: https://movingparts.io/favicon.svg - Social card (og:image): https://movingparts.io/og-image-new.png ## UI Components - input: background=#FCFCFC, textColor=#000000, borderColor=null, borderRadius=0px, shadow=none - buttonPrimary: background=#0000FF, textColor=#FFFFFF, borderRadius=0px, shadow=none - buttonSecondary: background=#000000, textColor=#FFFFFF, borderRadius=0px, shadow=none ## Brand Personality Tone: modern · Energy: medium · Audience: tech-savvy professionals ## Moving Parts Brand in the Wild Real-world brand assets — ads, campaigns, marketing materials. - **Pow – Beautiful Transitions for your iOS App** - Image: https://movingparts.io/og-image-transitions.png - Source: https://movingparts.io/pow - **Markdown with Moving Parts - Moving Parts** - Image: https://movingparts.io/img/markdown-teaser-og-image.png - Source: https://movingparts.io/markdown-teaser - **SwiftUI under the Hood: Variadic Views - Moving Parts** - Image: https://movingparts.io/img/variadic-view-tuple-iOS-15.4-dark-@3x.png - Source: https://movingparts.io/variadic-views-in-swiftui - **Moving Parts** - Image: https://movingparts.io/frontpage/on-hanger.png - Source: https://movingparts.io/ - **Styling Components in SwiftUI - Moving Parts** - Image: https://movingparts.io/img/styled-components/og-image.png - Source: https://movingparts.io/styling-components-in-swiftui - **SwiftUI under the Hood: Fonts - Moving Parts** - Image: https://movingparts.io/img/inter-dark-@3x.png - Source: https://movingparts.io/fonts-in-swiftui ## Working with these fonts Not found on Google Fonts? Agent Instructions that you can follow if you have permission to use the fonts: CharacterQuilt.com suggests this flow that can help: 1. Open the company's homepage in a browser with DevTools open. 2. In the Network tab, filter by "Font" (or by extension: woff2, woff, ttf, otf). 3. Hard-reload the page and click around (pricing, blog, careers) — some weights only load on specific routes. 4. For each captured font URL: right-click → Save As to download the file locally. 5. View the page's CSS (DevTools → Sources, or curl the stylesheet URLs) and copy out the matching @font-face declarations. Rewrite each `src: url(...)` to point to your local file path. Programmatic alternative: load the URL with Playwright or Puppeteer, listen for `response` events whose `Content-Type` starts with `font/`, and write the body to disk. The CSS extraction step is the same. Only do this if you have permission to use the brand assets — most proprietary fonts are licensed and may not be redistributable. ## Machine-Readable Profile ```json { "colorScheme": "light", "fonts": [ { "family": "Unica77", "role": "unknown" }, { "family": "Inter var", "role": "body" }, { "family": "Roboto", "role": "body" } ], "colors": { "primary": "#DADBF3", "secondary": "#2525FF", "accent": "#0000FF", "background": "#FFFFFF", "textPrimary": "#000000", "link": "#0000FF" }, "typography": { "fontFamilies": { "primary": "Inter var", "heading": "Inter var" }, "fontStacks": { "heading": [ "Unica77", "-apple-system", "BlinkMacSystemFont", "Inter var", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", "sans-serif" ], "body": [ "Unica77", "-apple-system", "BlinkMacSystemFont", "Inter var", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", "sans-serif" ], "paragraph": [ "Unica77", "-apple-system", "BlinkMacSystemFont", "Inter var", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", "sans-serif" ] }, "fontSizes": { "h1": "0px", "h2": "110px", "body": "40px" } }, "spacing": { "baseUnit": 4, "borderRadius": "0px" }, "components": { "input": { "background": "#FCFCFC", "textColor": "#000000", "borderColor": null, "borderRadius": "0px", "borderRadiusCorners": { "topLeft": "0px", "topRight": "0px", "bottomRight": "0px", "bottomLeft": "0px" }, "shadow": "none" }, "buttonPrimary": { "background": "#0000FF", "textColor": "#FFFFFF", "borderRadius": "0px", "borderRadiusCorners": { "topLeft": "0px", "topRight": "0px", "bottomRight": "0px", "bottomLeft": "0px" }, "shadow": "none" }, "buttonSecondary": { "background": "#000000", "textColor": "#FFFFFF", "borderRadius": "0px", "borderRadiusCorners": { "topLeft": "0px", "topRight": "0px", "bottomRight": "0px", "bottomLeft": "0px" }, "shadow": "none" } }, "images": { "logo": "data:image/svg+xml;utf8,%3Csvg%20role%3D%22presentation%22%20class%3D%22logo%22%20width%3D%22158%22%20height%3D%2259%22%20viewBox%3D%220%200%20158%2059%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20data-fc-idx%3D%220%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M123.828%201.96507C122.989%200.604257%20121.011%200.604253%20120.172%201.96507L107%2023.3243V2.07407C107%201.48088%20106.519%201%20105.926%201H50.0741C49.4809%201%2049%201.48088%2049%202.07407V8.99986C43.7968%204.04295%2036.7538%200.999939%2029%200.999939C12.9837%200.999939%200%2013.9837%200%2029.9999C0%2046.0162%2012.9837%2058.9999%2029%2058.9999C36.7538%2058.9999%2043.7968%2055.9569%2049%2051V57.9259C49%2058.5191%2049.4809%2059%2050.0741%2059H88.8366C88.8406%2059%2088.8445%2059%2088.8484%2059H155.152C156.833%2059%20157.863%2057.1555%20156.98%2055.7243L123.828%201.96507ZM122%207.57328L93.0618%2054.5H150.938L122%207.57328ZM87.775%2054.5L102.5%2030.6216V5.5H53.5V54.5H87.775ZM49%2044.1543C44.5616%2050.4144%2037.2579%2054.4999%2029%2054.4999C15.469%2054.4999%204.5%2043.5309%204.5%2029.9999C4.5%2016.469%2015.469%205.49994%2029%205.49994C37.2579%205.49994%2044.5616%209.58548%2049%2015.8455V44.1543Z%22%20fill%3D%22currentcolor%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E", "favicon": "https://movingparts.io/favicon.svg", "ogImage": "https://movingparts.io/og-image-new.png" }, "__llm_logo_reasoning": { "selectedIndex": 0, "reasoning": "Selected #0 because it is visible, located in the header, and matches the brand inferred from the URL and page title ('Moving Parts').", "confidence": 0.9, "source": "llm" }, "__llm_button_reasoning": { "primary": { "index": 0, "text": "Book a demo", "reasoning": "Button #0 ('Book a demo') uses the vibrant brand color #0000FF, making it the most prominent CTA. The text is action-oriented, encouraging user engagement." }, "secondary": { "index": 1, "text": "Sign Up", "reasoning": "Button #1 ('Sign Up') has a different background color (#000000) and serves as a secondary action, complementing the primary CTA." }, "confidence": 0.95 }, "personality": { "tone": "modern", "energy": "medium", "targetAudience": "tech-savvy professionals" }, "designSystem": { "framework": "custom", "componentLibrary": "" }, "confidence": { "buttons": 0.95, "colors": 0.9, "overall": 0.925 }, "__llm_metadata": { "logoSelection": { "llmCalled": true, "llmSucceeded": true, "finalSource": "llm", "rawLogoSelection": { "selectedLogoIndex": 0, "selectedLogoReasoning": "Selected #0 because it is visible, located in the header, and matches the brand inferred from the URL and page title ('Moving Parts').", "confidence": 0.9 } }, "buttonClassification": { "llmCalled": true, "llmSucceeded": true } } } ```