Everything needed to make something that looks like Samora. The guidelines explain the reasoning, the files below save you from recreating it. If a file you need is missing, ask rather than improvising one.
The mark and how it behaves, the colour system, typography, the scales, live components in both themes, and the ten rules that keep the interface from looking machine made.
The Oklch hue of the brand gold. The beige sits at 81.78, which is why every neutral in the system is a relative of the logo.
Archivo, at three weights. Mark, product and print, one family.
2px for what you click, 3px for what contains things. There are no pills in Samora.
Not in buttons, not in empty states, not anywhere in the interface.
Every lockup, in the three grounds it is allowed on. Use SVG wherever the thing rendering it will take one, which is almost everywhere now.
Stacked lockup, beigeMark over the wordmark. Presentations, coversStacked lockup, reversedFor dark groundsStacked lockup, transparentPlace on your own groundHorizontal lockupLetterhead, email, site headersHorizontal, transparentPlace on your own groundBadgeAvatars and favicons. 48px minimum on beigeBadge, reversedHolds down to 32pxBadge, flat goldSingle colour print and embroideryStacked lockup, PNG1600px wide, for anything that refuses SVGBadge, PNG1600px. Social profiles, resize downArchivo, three weights, and nothing else. Self host these rather than hotlinking, and install them locally so your documents match.
Archivo RegularBody textArchivo MediumButtons, labels, the wordmarkArchivo SemiboldHeadingsThe token file is the design system in executable form. Paste it over the :root block and the rest of the brand book stops being advice.
samora-tokens.cssColour, type, space, radius, motion, base componentsBrand book, PDF17 pages. For agencies, printers and investorsEvery file on this page in one archive.
Complete brand kitMarks, fonts, tokens and the brand book in one archive
