Primer Brand Identity

A complete profile of Primer's visual system — colors, typography, components, and personality — extracted from https://primer.io/. Built for designers, agents, and AI tools.

Quick Facts

Color Palette

• primary: #230800
• secondary: #7B6B66
• accent: #FF7C4F
• background: #FFFFFF
• textPrimary: #F86432
• link: #F86432

Typography

• primary: Inter — Font Link
• heading: Inter — Font Link

Visual Assets

• Logo: data:image/svg+xml;utf8,%3Csvg%20width%3D%22101%22%20height%3D%2224%22%20viewBox%3D%220%200%20101%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20data-fc-idx%3D%220%22%3E%0A%3Cpath%20d%3D%22M21.2377%200H2.84226C1.27252%200%200%201.26829%200%202.83281V21.1672C0%2022.7317%201.27252%2024%202.84226%2024H21.2377C22.8075%2024%2024.08%2022.7317%2024.08%2021.1672V2.83281C24.08%201.26829%2022.8075%200%2021.2377%200Z%22%20fill%3D%22%23FF7C4F%22%20style%3D%22fill%3A%20rgb(255%2C%20124%2C%2079)%20!important%3B%22%2F%3E%0A%3Cpath%20d%3D%22M15.9424%208.6329H13.3696C12.6375%208.6329%2012.0444%208.04169%2012.0444%207.31203V6.3013C12.0444%205.01504%2010.9983%203.97108%209.70637%203.97108C8.41444%203.97108%207.36839%205.01365%207.36839%206.3013C7.36839%207.58894%208.41444%208.63151%209.70637%208.63151H10.7205C11.4526%208.63151%2012.0457%209.22272%2012.0457%209.95239V12.3601C12.0457%2013.0884%2011.4526%2013.681%2010.7205%2013.681H9.70637C8.41444%2013.681%207.36839%2014.7236%207.36839%2016.0112V17.6962C7.36839%2018.9825%208.41444%2020.0251%209.70637%2020.0251C10.9983%2020.0251%2012.0444%2018.9825%2012.0444%2017.6962V15.0005C12.0444%2014.2708%2012.6375%2013.6796%2013.3696%2013.6796H15.941C16.3716%2013.6796%2016.7203%2013.3321%2016.7203%2012.9029V9.40964C16.7203%208.98042%2016.373%208.6329%2015.9424%208.6329Z%22%20fill%3D%22black%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%0A%3Cpath%20d%3D%22M93.7681%2019.6763C93.7681%2019.9754%2093.9321%2020.1374%2094.2363%2020.1374H95.8727C96.177%2020.1374%2096.3409%2019.9754%2096.3409%2019.6763V11.7635C96.3409%2011.1183%2096.7618%2010.6794%2097.4161%2010.6794H100.035C100.339%2010.6794%20100.503%2010.5174%20100.503%2010.2183V8.60256C100.503%208.30211%20100.339%208.1415%20100.035%208.1415H96.7618C96.5048%208.1415%2096.3409%208.3035%2096.3409%208.60256V9.38623C96.3409%2010.055%2095.9436%2010.4468%2095.2657%2010.4468H95.0545C94.2835%2010.4468%2093.7681%2010.9549%2093.7681%2011.7843V19.6763ZM85.7845%2010.0674C87.421%2010.0674%2088.731%2011.0823%2089.1519%2012.7659H82.4186C82.8159%2011.1515%2084.055%2010.0674%2085.7845%2010.0674ZM85.7845%207.82998C82.2074%207.82998%2079.7763%2010.3443%2079.7763%2014.0577C79.7763%2017.7711%2082.1379%2020.3326%2086.0193%2020.3326C88.5671%2020.3326%2090.555%2019.1792%2091.4427%2017.1038C91.583%2016.8047%2091.419%2016.6192%2091.1148%2016.6192H89.3381C89.1269%2016.6192%2088.9644%2016.7119%2088.8227%2016.8961C88.2614%2017.6798%2087.2793%2018.1187%2086.0874%2018.1187C84.0772%2018.1187%2082.6033%2016.8504%2082.2991%2014.7971H91.3232C91.5802%2014.7971%2091.7441%2014.6351%2091.7441%2014.3817V14.1284C91.7441%2010.4828%2089.4311%207.82998%2085.7845%207.82998ZM73.1764%207.80644C71.3302%207.80644%2069.809%208.5901%2069.1325%209.97466C68.5004%208.63718%2067.2154%207.80644%2065.5317%207.80644C64.0356%207.80644%2062.8659%208.42949%2062.2116%209.46653L61.9074%208.47518C61.8129%208.17473%2061.6267%208.08335%2061.3461%208.08335H60.1764C59.8722%208.08335%2059.7083%208.24535%2059.7083%208.54441V19.6168C59.7083%2019.9172%2059.8722%2020.0778%2060.1764%2020.0778H61.8129C62.1171%2020.0778%2062.281%2019.9158%2062.281%2019.6168V12.9044C62.281%2011.2208%2063.3563%2010.0896%2064.9469%2010.0896C66.443%2010.0896%2067.4488%2011.1972%2067.4488%2012.8573V19.6154C67.4488%2019.9144%2067.6127%2020.0764%2067.9169%2020.0764H69.5534C69.8576%2020.0764%2070.0215%2019.9144%2070.0215%2019.6154V12.9016C70.0215%2011.218%2071.0968%2010.0868%2072.6874%2010.0868C74.1835%2010.0868%2075.1893%2011.1945%2075.1893%2012.8546V19.6126C75.1893%2019.9117%2075.3532%2020.0737%2075.6574%2020.0737H77.2939C77.5981%2020.0737%2077.762%2019.9117%2077.762%2019.6126V12.3686C77.7607%209.74206%2076.052%207.80644%2073.1764%207.80644ZM57.1772%208.08335C57.4814%208.08335%2057.6454%208.24535%2057.6454%208.54441V19.6168C57.6454%2019.9158%2057.4814%2020.0778%2057.1772%2020.0778H55.5408C55.2365%2020.0778%2055.0726%2019.9158%2055.0726%2019.6168V8.5458C55.0726%208.24535%2055.2365%208.08474%2055.5408%208.08474L57.1772%208.08335ZM56.359%207.0657C57.2481%207.0657%2057.9246%206.39696%2057.9246%205.52053C57.9246%204.6441%2057.2467%203.97536%2056.359%203.97536C55.4713%203.97536%2054.7934%204.6441%2054.7934%205.52053C54.7934%206.39696%2055.4713%207.0657%2056.359%207.0657ZM46.2805%2019.6181C46.2805%2019.9172%2046.4444%2020.0792%2046.7487%2020.0792H48.3851C48.6893%2020.0792%2048.8533%2019.9172%2048.8533%2019.6181V11.7054C48.8533%2011.0602%2049.2742%2010.6213%2049.9285%2010.6213H52.5471C52.8513%2010.6213%2053.0152%2010.4593%2053.0152%2010.1602V8.54441C53.0152%208.24396%2052.8513%208.08335%2052.5471%208.08335H49.2742C49.0172%208.08335%2048.8533%208.24535%2048.8533%208.54441V9.32807C48.8533%209.99682%2048.456%2010.3886%2047.778%2010.3886H47.5669C46.7959%2010.3886%2046.2805%2010.8968%2046.2805%2011.7261V19.6181ZM34.8059%206.26127H37.8927C40.0667%206.26127%2041.6712%207.48384%2041.6712%209.44438C41.6712%2011.4049%2040.0681%2012.6275%2037.8927%2012.6275H34.8059V6.26127ZM34.3378%2020.0792C34.642%2020.0792%2034.8059%2019.9172%2034.8059%2019.6181V14.9356H38.0566C41.7504%2014.9356%2044.3357%2012.813%2044.3357%209.44576C44.3357%206.07851%2041.749%203.93243%2038.0566%203.93243H32.5388C32.2345%203.93243%2032.0706%204.09443%2032.0706%204.39349V19.6181C32.0706%2019.9172%2032.2345%2020.0792%2032.5388%2020.0792H34.3378Z%22%20fill%3D%22currentColor%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%0A%3C%2Fsvg%3E
• Favicon: https://cdn.prod.website-files.com/69399b8951adc20362e136b7/695d1477a347288b26ea3641_favicon.png
• Social card (og:image): https://cdn.prod.website-files.com/69399b8951adc20362e136b7/694006e075b3d77c110ef17a_graph%20image.jpg

UI Components

• input: background=transparent, textColor=#230800, borderColor=#E8D1C0, borderRadius=10000px, shadow=none
• buttonPrimary: background=#FF7C4F, textColor=#230800, borderColor=#FF7C4F, borderRadius=10000px, shadow=none
• buttonSecondary: background=#FFFFFF, textColor=#230800, borderRadius=0px, shadow=none

Brand Personality

Tone: professional · Energy: medium · Audience: businesses seeking payment solutions

Primer Brand in the Wild

Real-world brand assets — ads, campaigns, marketing materials.