Whitespace
Märket i blått, orange och gult, och en produkt i konturer bredvid. Namn prövas i logotypgeneratorn.
Märket
Favicon, app-ikon, en topprad som är för trång för ett ordmärke.
<Logo size="sm|md|lg|xl" />
<!-- eller: -->
import { mark } from "@whitespace/malm-ui/logo";<Logo name="Kund" inverse />Produktlogotyp
Namnet är konturer. Ett namn som inte är genererat är ett byggfel.
<Logo name="Kund" size="lg" />Färgerna
Tre färger, var och en med ett jobb. Reglerna är varumärkets (skill/SKILL.md §5), inte den här sidans.
Blå
Länkar, aktiv navigation, fokusringar. Rektangeln i märket. Aldrig på ikoner.
Orange
Formerna, och bara formerna. Cirkeln i märket. Aldrig knappar, text, etiketter eller siffror.
Gul
Formerna: kvartscirkeln, halvcirkeln, ringen. Aldrig text eller knappar.
Elementen
Fjorton geometriska former, sju solida och sju prickade. En solid form tar en varumärkesfärg; en prickad är alltid svart. Högst två eller tre på en yta.
Cirkel, kvartscirkel och rektangel — samma tre som bygger märket.
<BrandElement name="circle" color="orange" />
<BrandElement name="quadrant-annulus" color="yellow" />
<BrandElement name="rectangle" color="blue" />Textur bredvid de solida. Ingen färg att välja.
<BrandElement name="dots-circle" />Webben
whitespace.se målas inte med de tre varumärkesfärgerna — de är formernas. Sidan står på beige, texten är bläck, och tre temapaletter ger sektioner och plattor sin ton. Knappar: nightfall i vila, evening vid hover.
Grön
Lila
Beige
Bläck
Sidans mörka: text, knappar, mörka plattor.
Brun
Paras med lila i en av startsidans ingångar.
Cappuccino
Ljusare brun; det neutrala gradientschemat.
Typsnitt
Suisse Intl, 400 för brödtext och 600 för betoning; komponentbiblioteket sätter rubriker i 500. Suisse Works kursiv för citat, och bara där. Aldrig 700.
Ytor
Vita och frostade celler med vita hårlinjer på den beige duken. Inga skuggor på kort: ram eller bakgrundsfärg i stället.
Källan
Värdena här är kopierade från skill/tokens.css; designwebbplatsen läser dem därifrån och är alltid aktuell.
Hela varumärket
Allt annat — ordmärket, teman, typografi, röst, komponenterna för whitespace.se — finns i ett repo, och visas på en egen webbplats byggd med den här styleguiden som gränssnitt.
Skillen
Varumärkes- och kodreglerna som text en assistent följer, med tokens, typsnitt och logotyper.
skill/Logotyper och element
Komponenterna för whitespace.se
Nunjucks-makron och Sass för marknadswebben: hjältar, innehållsmoduler, artikelsida, sidhuvud och sidfot.
component-library/Designwebbplatsen
Varumärket visat genom malm-ui:s styleguide: Malm är gränssnittet, Whitespace innehållet. Körs lokalt med bun run dev i site/ tills den publiceras.