1. Inga linjer som avgränsare
Struktur skapas av luft, bakgrundsskiften och former. En linje säger att något slutar, en form säger att något börjar.
Kom igång
Börja med en AI-agent
Det enklaste sättet att skapa något i Magellos formspråk är att låta en AI-agent göra jobbet, till exempel Claude eller Copilot. Agenten läser reglerna själv. Du beskriver bara vad du vill ha.
Steg 1Öppna din AI-agent
Steg 2Kopiera texten nedan
Steg 3Beskriv vad du vill ha
Steg 4Granska och använd
Texten att klistra in
Kopiera texten och klistra in den i agenten. Skriv sedan vad du vill ha. Till exempel en presentation om vårt erbjudande inom Cloud, eller en LinkedIn-bild till en ny medarbetare.
Läs https://github.com/magello-group/design-guidelines/blob/main/AGENTS.md och följ den.
Jag vill skapa: Om styleguiden
Ett formspråk, flera medier
Magello är professionellt och avskalat, men inte stelt. Allvaret ligger i typografin, luften och den dämpade färgskalan. Lekfullheten ligger i formerna.
Styleguiden är uppdelad i Grunder (färg, form, typografi, bilder, avstånd), Byggstenar (komponenter, sektioner, formulär, Markdown) och Navigation. Varje sida visar hur något ser ut, när det ska användas och när det inte ska det.
Allt du ser på sidorna är byggt med samma CSS som ska användas i andra projekt: css/magello.css och js/magello.js. Du kan alltså kopiera markup direkt från exemplen.
Utgångspunkt
Sju principer
Alla regler i styleguiden följer av de här sju. Saknar du ett mönster: härled från principerna i stället för att hitta på något som bryter mot dem.
2. Accentfärger är fyllnad
Magenta, blå, orange, grön, röd och gul fyller former, ikoner, knappar och text. De ritas aldrig som streck eller kant.
3. Former har rörelse
Ingen synlig kant är exakt vågrät eller lodrät. Hörnen avviker 2–7 % från ett rätblock, så det ser handgjort ut.
4. Svartvitt utom varumärket
Foton är alltid svartvita. Då får magenta och ikonernas färger hela scenen.
5. Rosagrått är kärnan
Svart text på vitt är grunden. Den rosagrå paletten ger värme och struktur. Magenta används sparsamt och med avsikt.
6. Signaturytan
En rosagrå yta med lutande kant. Det mest igenkännbara elementet. Används överst på landningsytor, inte överallt.
7. Luft och en gemensam linje
Generöst ovanför rubriker, tätare under. Allt innehåll delar vänsterkant med logotypen.
Hitta rätt
Vad vill du göra?
Bygga en sida
Knappar, kort, steg, citat, tabeller och sektioner med bruksanvisning.
Till komponenter →
