started work on design page

src/content/meta/design.mdx

@@ -0,0 +1,45 @@
+import Container from '../../components/meta/Container.astro'
+import Palette from '../../components/meta/Palette.astro'
+
+import ArticleCard from '../../components/ArticleCard.astro'
+
+# Meta / Design
+
+In questa pagina tento di spiegare come funziona il design di questo sito.
+
+## Card
+
+Le card sono uno dei componenti più importanti di questo sito. Sono utilizzate per mostrare i post, i progetti e le pagine. Ecco alcuni esempi per dare un'idea
+
+### Lista di articoli
+
+Una lista di articoli è composta da più card, ognuna delle quali rappresenta un articolo. Ogni card ha un titolo, una descrizione e una lista di tag.
+
+<Container size="large" style={{ '--zone-color': 'var(--guide-base-color)' }}>
+    <div class="article-list">
+        <ArticleCard id="article-1" title="Titolo 1" description="Descrizione 1" tags={['tag1', 'tag2']} />
+        <ArticleCard id="article-2" title="Titolo 2" description="Descrizione 2" tags={['tag2', 'tag3']} />
+        <ArticleCard id="article-3" title="Titolo 3" description="Descrizione 3" tags={['tag3', 'tag4']} />
+        <ArticleCard id="article-3" title="Titolo 3" description="Descrizione 3" tags={['tag3', 'tag4']} />
+        <ArticleCard id="article-3" title="Titolo 3" description="Descrizione 3" tags={['tag3', 'tag4']} />
+        <ArticleCard id="article-3" title="Titolo 3" description="Descrizione 3" tags={['tag3', 'tag4']} />
+    </div>
+</Container>
+
+## Palette
+
+Varie sezioni del sito utilizzano diverse palette di colori. Questa è la palette di base.
+
+### Guide
+
+<Palette
+    colors={[
+        'var(--guide-base)',
+        'var(--guide-darkest)',
+        'var(--guide-darker)',
+        'var(--guide-dark)',
+        'var(--guide-light)',
+        'var(--guide-lighter)',
+        'var(--guide-lightest)',
+    ]}
+/>