Styleguide
Această pagină servește drept ghid pentru definirea stilului general al proiectului. Include detalii despre tipografie, spațiere, paleta de culori și modul în care sunt stilizate componentele primare utilizate pe parcursul proiectului. Scopul este de a asigura consistență vizuală și funcțională în toate elementele interfeței.
Typography
Headings
H1 Heading
<h1>Heading 1</h1>H2 Heading
<h2>Heading 2</h2>H3 Heading
<h3>Heading 3</h3>H4 Heading
<h4>Heading 4</h4>H5 Heading
<h5>Heading 5</h5>H6 Heading
<h6>Heading 6</h6>Text Sizes
Base paragraph text
<p>Base paragraph text</p>Small text
<p class='text-sm'>Small text</p>Extra small text
<p class='text-xs'>Extra small text</p>Large text
<p class='text-lg'>Large text</p>Extra large text
<p class='text-xl'>Extra large text</p>2XL text
<p class='text-2xl'>2XL text</p>Lists
- Unordered list item 1
- Unordered list item 2
- Unordered list item 3
<ul class='list-disc list-inside space-y-1'>
<li>Unordered list item</li>
</ul>- Ordered list item 1
- Ordered list item 2
- Ordered list item 3
<ol class='list-decimal list-inside space-y-1'>
<li>Ordered list item</li>
</ol>Inline Elements
Bold text
<strong>Bold text</strong>Italic text
<em>Italic text</em>Underlined text
<u>Underlined text</u>Inline code
<code>Inline code</code>Keyboard input
<kbd>Keyboard input</kbd>Spacing
Spacing Scale
spacing-1 (0.25rem | 4px)
spacing-2 (0.5rem | 8px)
spacing-3 (0.75rem | 12px)
spacing-4 (1rem | 16px)
Colors
Color Palette
PrimaryMain accent color
SecondarySecondary accent color
MutedSubtle background color
Components
Buttons
<Button>Primary Button</Button><Button variant='secondary'>Secondary Button</Button><Button variant='outline'>Outline Button</Button>Cards
Card Title
Card Description
Card Content
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card Description</CardDescription>
</CardHeader>
<CardContent>
<p>Card Content</p>
</CardContent>
</Card>