# Paper Brand Identity A complete profile of **Paper**'s visual system — colors, typography, components, and personality — extracted from https://paper.design/. Built for designers, agents, and AI tools. - Page: https://characterquilt.com/branding/paper - Machine-readable JSON: https://characterquilt.com/branding/paper.json - Per-page llms.txt: https://characterquilt.com/branding/paper/llms.txt ## Quick Facts | Field | Value | |---|---| | Primary | #000000 | | Accent | #181818 | | Body Font | Matter | | Heading Font | Matter | ## Color Palette - primary: #000000 - accent: #181818 - background: #EFEFE4 - textPrimary: #181818 - link: #000000 ## Typography - primary: Matter — https://fonts.google.com/specimen/Matter - heading: Matter — https://fonts.google.com/specimen/Matter ## Visual Assets - Logo: data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22110%22%20height%3D%2230%22%20viewBox%3D%220%200%20110%2030%22%20fill%3D%22none%22%20class%3D%22light%3Atext-%5B%23222222%5D%20dark%3Atext-%5B%23EFEFE4%5D%20origin-left%20scale-80%22%20aria-label%3D%22Paper%22%20data-fc-idx%3D%220%22%3E%3Cpath%20d%3D%22M34.9805%2023.975V2.97656H42.3299C46.6196%202.97656%2049.4394%205.52637%2049.4394%209.39608C49.4394%2013.2658%2046.6196%2015.8156%2042.3299%2015.8156H38.4002V23.975H34.9805ZM38.4002%2012.6959H42.3299C44.6098%2012.6959%2045.9597%2011.436%2045.9597%209.39608C45.9597%207.35623%2044.6098%206.12633%2042.3299%206.12633H38.4002V12.6959ZM49.2871%2016.6255C49.2871%2021.1551%2052.1369%2024.3049%2056.2166%2024.3049C58.3464%2024.3049%2060.2063%2023.315%2061.1062%2021.7551V23.9749H64.376V9.24598H61.1062V11.3159C60.2963%209.90594%2058.3464%208.91601%2056.2166%208.91601C52.1369%208.91601%2049.2871%2012.0658%2049.2871%2016.6255ZM56.8765%2021.3351C54.3567%2021.3351%2052.5569%2019.3853%2052.5569%2016.6255C52.5569%2013.8657%2054.3567%2011.8858%2056.8765%2011.8858C59.4264%2011.8858%2061.2262%2013.8357%2061.2262%2016.6255C61.2262%2019.3853%2059.4264%2021.3351%2056.8765%2021.3351ZM67.0505%2029.9745V9.24598H70.2903V11.4958C71.1602%209.93593%2073.0501%208.91601%2075.2099%208.91601C79.2896%208.91601%2082.1394%2012.0658%2082.1394%2016.5955C82.1394%2021.1551%2079.2896%2024.3049%2075.2099%2024.3049C73.0801%2024.3049%2071.1302%2023.315%2070.2903%2021.8751V29.9745H67.0505ZM70.2003%2016.5955C70.2003%2019.3853%2071.9701%2021.3351%2074.5199%2021.3351C77.0698%2021.3351%2078.8396%2019.3553%2078.8396%2016.5955C78.8396%2013.8357%2077.0698%2011.8858%2074.5199%2011.8858C72.0001%2011.8858%2070.2003%2013.8357%2070.2003%2016.5955ZM83.4049%2016.6255C83.4049%2021.0651%2086.5247%2024.3049%2090.9344%2024.3049C94.1331%2024.3049%2096.9147%2022.428%2097.7651%2019.6243H94.4187C93.6778%2020.7667%2092.3991%2021.4551%2090.9344%2021.4551C88.6245%2021.4551%2086.9746%2019.9252%2086.6747%2017.4954H97.7139C97.7739%2017.2254%2097.8038%2016.8655%2097.8038%2016.3555C97.8038%2011.7658%2095.134%208.91601%2090.8744%208.91601C86.5547%208.91601%2083.4049%2012.1258%2083.4049%2016.6255ZM94.6241%2015.0956H86.7947C87.3046%2013.0557%2088.8345%2011.7358%2090.8744%2011.7358C93.0042%2011.7358%2094.3541%2012.9957%2094.6241%2015.0956ZM100.068%209.24598V23.9749H103.308V16.4455C103.308%2013.6257%20104.688%2012.0958%20107.327%2012.0958C108.167%2012.0958%20108.947%2012.2458%20109.547%2012.3958V9.24598C109.007%209.036%20108.287%208.91601%20107.537%208.91601C105.618%208.91601%20104.118%209.90594%20103.308%2011.7358V9.24598H100.068Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20rgb(34%2C%2034%2C%2034)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M15.9874%200H3.99685V3.99685H15.9874V15.9874H3.99685V3.99685L0%203.99687V15.9874V25.9795H3.99685H15.9874V15.9874H25.9795V3.99685V0H15.9874Z%22%20fill%3D%22%2381ACEC%22%20style%3D%22fill%3A%20rgb(129%2C%20172%2C%20236)%20!important%3B%22%2F%3E%3C%2Fsvg%3E - Favicon: https://paper.design/favicon.ico - Social card (og:image): https://paper.design/opengraph-image.jpg?opengraph-image.9a84ecdd.jpg ## UI Components - buttonPrimary: background=#181818, textColor=#FCFCF9, borderRadius=4px, shadow=none ## Brand Personality Tone: modern · Energy: medium · Audience: designers and developers ## Paper Brand in the Wild Real-world brand assets — ads, campaigns, marketing materials. - **Build Log • Paper** - Image: https://paper.design/_next/static/media/2025-11-06.ed530a10.webp - Source: https://paper.design/build-log - **Exploring retro print with CMYK Halftone** - Image: https://paper.design/blog/making-cmyk-shader/shaders-panel-ui.png - Source: https://paper.design/blog/retro-print-cmyk-halftone-shader - **Roadmap • Paper** - Image: https://paper.design/roadmap/copy-react-dark.webp - Source: https://paper.design/roadmap - **Build Log • Paper** - Image: https://paper.design/_next/static/media/2025-09-09.702560ef.webp - Source: https://paper.design/build-log - **Roadmap • Paper** - Image: https://paper.design/roadmap/tokens-dark.webp - Source: https://paper.design/roadmap - **A real space to design in the age of agents** - Image: https://paper.design/blog/a-real-space-to-design-in-the-age-of-agents/opengraph-image-4dgtxm?545969d245ab4209 - Source: https://paper.design/blog/a-real-space-to-design-in-the-age-of-agents ## 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": "Matter", "role": "body" }, { "family": "Inter", "role": "body" }, { "family": "Paper Mono", "role": "monospace" } ], "colors": { "primary": "#000000", "accent": "#181818", "background": "#EFEFE4", "textPrimary": "#181818", "link": "#000000" }, "typography": { "fontFamilies": { "primary": "Matter", "heading": "Matter" }, "fontStacks": { "heading": [ "Matter", "system-ui" ], "body": [ "Matter", "system-ui" ], "paragraph": [ "Matter", "system-ui" ] }, "fontSizes": { "h1": "56px", "h2": "56px", "body": "56px" } }, "spacing": { "baseUnit": 4, "borderRadius": "0px" }, "components": { "buttonPrimary": { "background": "#181818", "textColor": "#FCFCF9", "borderRadius": "4px", "borderRadiusCorners": { "topLeft": "4px", "topRight": "4px", "bottomRight": "4px", "bottomLeft": "4px" }, "shadow": "none" } }, "images": { "logo": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22110%22%20height%3D%2230%22%20viewBox%3D%220%200%20110%2030%22%20fill%3D%22none%22%20class%3D%22light%3Atext-%5B%23222222%5D%20dark%3Atext-%5B%23EFEFE4%5D%20origin-left%20scale-80%22%20aria-label%3D%22Paper%22%20data-fc-idx%3D%220%22%3E%3Cpath%20d%3D%22M34.9805%2023.975V2.97656H42.3299C46.6196%202.97656%2049.4394%205.52637%2049.4394%209.39608C49.4394%2013.2658%2046.6196%2015.8156%2042.3299%2015.8156H38.4002V23.975H34.9805ZM38.4002%2012.6959H42.3299C44.6098%2012.6959%2045.9597%2011.436%2045.9597%209.39608C45.9597%207.35623%2044.6098%206.12633%2042.3299%206.12633H38.4002V12.6959ZM49.2871%2016.6255C49.2871%2021.1551%2052.1369%2024.3049%2056.2166%2024.3049C58.3464%2024.3049%2060.2063%2023.315%2061.1062%2021.7551V23.9749H64.376V9.24598H61.1062V11.3159C60.2963%209.90594%2058.3464%208.91601%2056.2166%208.91601C52.1369%208.91601%2049.2871%2012.0658%2049.2871%2016.6255ZM56.8765%2021.3351C54.3567%2021.3351%2052.5569%2019.3853%2052.5569%2016.6255C52.5569%2013.8657%2054.3567%2011.8858%2056.8765%2011.8858C59.4264%2011.8858%2061.2262%2013.8357%2061.2262%2016.6255C61.2262%2019.3853%2059.4264%2021.3351%2056.8765%2021.3351ZM67.0505%2029.9745V9.24598H70.2903V11.4958C71.1602%209.93593%2073.0501%208.91601%2075.2099%208.91601C79.2896%208.91601%2082.1394%2012.0658%2082.1394%2016.5955C82.1394%2021.1551%2079.2896%2024.3049%2075.2099%2024.3049C73.0801%2024.3049%2071.1302%2023.315%2070.2903%2021.8751V29.9745H67.0505ZM70.2003%2016.5955C70.2003%2019.3853%2071.9701%2021.3351%2074.5199%2021.3351C77.0698%2021.3351%2078.8396%2019.3553%2078.8396%2016.5955C78.8396%2013.8357%2077.0698%2011.8858%2074.5199%2011.8858C72.0001%2011.8858%2070.2003%2013.8357%2070.2003%2016.5955ZM83.4049%2016.6255C83.4049%2021.0651%2086.5247%2024.3049%2090.9344%2024.3049C94.1331%2024.3049%2096.9147%2022.428%2097.7651%2019.6243H94.4187C93.6778%2020.7667%2092.3991%2021.4551%2090.9344%2021.4551C88.6245%2021.4551%2086.9746%2019.9252%2086.6747%2017.4954H97.7139C97.7739%2017.2254%2097.8038%2016.8655%2097.8038%2016.3555C97.8038%2011.7658%2095.134%208.91601%2090.8744%208.91601C86.5547%208.91601%2083.4049%2012.1258%2083.4049%2016.6255ZM94.6241%2015.0956H86.7947C87.3046%2013.0557%2088.8345%2011.7358%2090.8744%2011.7358C93.0042%2011.7358%2094.3541%2012.9957%2094.6241%2015.0956ZM100.068%209.24598V23.9749H103.308V16.4455C103.308%2013.6257%20104.688%2012.0958%20107.327%2012.0958C108.167%2012.0958%20108.947%2012.2458%20109.547%2012.3958V9.24598C109.007%209.036%20108.287%208.91601%20107.537%208.91601C105.618%208.91601%20104.118%209.90594%20103.308%2011.7358V9.24598H100.068Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20rgb(34%2C%2034%2C%2034)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M15.9874%200H3.99685V3.99685H15.9874V15.9874H3.99685V3.99685L0%203.99687V15.9874V25.9795H3.99685H15.9874V15.9874H25.9795V3.99685V0H15.9874Z%22%20fill%3D%22%2381ACEC%22%20style%3D%22fill%3A%20rgb(129%2C%20172%2C%20236)%20!important%3B%22%2F%3E%3C%2Fsvg%3E", "favicon": "https://paper.design/favicon.ico", "ogImage": "https://paper.design/opengraph-image.jpg?opengraph-image.9a84ecdd.jpg", "logoHref": "/", "logoAlt": "Paper" }, "__llm_logo_reasoning": { "selectedIndex": 0, "reasoning": "Selected #0 because it is visible, located in the header, and links to the homepage, matching the brand name 'Paper'.", "confidence": 0.95, "source": "llm" }, "__llm_button_reasoning": { "primary": { "index": 2, "text": "download Paper", "reasoning": "The button 'download Paper' is likely the primary CTA as it directly relates to the main action users are expected to take on the site, which is downloading the product." }, "secondary": { "index": 1, "text": "view the roadmap", "reasoning": "The button 'view the roadmap' serves as a secondary action, providing additional information rather than a direct product interaction." }, "confidence": 0.9 }, "personality": { "tone": "modern", "energy": "medium", "targetAudience": "designers and developers" }, "designSystem": { "framework": "tailwind", "componentLibrary": "" }, "confidence": { "buttons": 0.9, "colors": 0.9, "overall": 0.9 }, "__llm_metadata": { "logoSelection": { "llmCalled": true, "llmSucceeded": true, "finalSource": "llm", "rawLogoSelection": { "selectedLogoIndex": 0, "selectedLogoReasoning": "Selected #0 because it is visible, located in the header, and links to the homepage, matching the brand name 'Paper'.", "confidence": 0.95 } }, "buttonClassification": { "llmCalled": true, "llmSucceeded": true } } } ```