Design System
Sapra.AI component library — a reference for developers and AI assistants.
Colors
Typography
Desktop (≥1024px)
The quick brown fox
Satoshi Medium — 56px / 1.1 / 0.56pxThe quick brown fox
Satoshi Medium — 32px / 1.1 / 0.32pxThe quick brown fox
Satoshi Medium — 24px / 1.1 / 0.24pxThe quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet.
Satoshi Medium — 14px / 1.2 / 0.7pxTHE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
IBM Plex Mono Regular — 10px / 1.0 / 1px / uppercaseTablet (768px – 1023px)
The quick brown fox
Satoshi Medium — 48px / 1.1 / 0.48pxThe quick brown fox
Satoshi Medium — 32px / 1.1 / 0.32pxThe quick brown fox
Satoshi Medium — 24px / 1.1 / 0.24pxThe quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet.
Satoshi Medium — 14px / 1.2 / 0.7pxTHE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
IBM Plex Mono Regular — 10px / 1.0 / 1px / uppercaseMobile (<768px)
The quick brown fox
Satoshi Medium — 32px / 1.1 / 0.32pxThe quick brown fox
Satoshi Medium — 24px / 1.1 / 0.24pxThe quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet.
Satoshi Medium — 14px / 1.2 / 0.7pxTHE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
IBM Plex Mono Regular — 10px / 1.0 / 1px / uppercaseDesign Tokens
Font Families
--font-headingSatoshi--font-bodySatoshi--font-monoIBM Plex MonoFont Sizes
--text-h156px--text-h232px--text-h324px--text-p14px--text-label10pxColors
--color-black#000000--color-grey-dark#171717--color-grey#A5A5A5--color-grey-light#EAEAEA--color-primary#00FFDD--color-primary-hover#00BCA3--color-error#FF6B7A--color-warning#FFAE00--color-success#00D649Spacing
--space-xs6px--space-sm12px--space-md24px--space-lg48px--space-xl96pxGrid System
Preview (12 columns)
Components
UiIcon
app/components/ui/UiIcon.vueInline SVG icon component. Inherits color via currentColor.
UiButton
app/components/ui/UiButton.vueMulti-variant button. Renders <button>, <a>, or NuxtLink via to/href props.
UiTextInput
app/components/ui/UiTextInput.vueText input field with optional label, icon, validation status, and helper link.
UiDropdown
app/components/ui/UiDropdown.vueSelect dropdown with label and custom options.
UiCheckbox
app/components/ui/UiCheckbox.vueCheckbox with three states: unchecked, checked, and indeterminate.
UiRadioGroup
app/components/ui/UiRadioGroup.vueRadio button group with optional label.
UiSwitch
app/components/ui/UiSwitch.vueToggle switch for boolean settings.
UiChoicebox
app/components/ui/UiChoicebox.vueCard-style selectable option with checkbox and description.
UiTag
app/components/ui/UiTag.vueTag/chip for categories, filters, and labels. Supports semantic color variants.
UiBadge
app/components/ui/UiBadge.vueSmall colored label for statuses and categories.
UiStatus
app/components/ui/UiStatus.vueStatus indicator with colored dot and label.
UiAvatar
app/components/ui/UiAvatar.vueCircular avatar with user icon fallback or initials.
UiLink
app/components/ui/UiLink.vueStyled link/button with icon support and multiple layouts.
UiDivider
app/components/ui/UiDivider.vueHorizontal rule separator.
Content above
Content below
UiSpinner
app/components/ui/UiSpinner.vueLoading spinner with animated rotation. Shows a solid circle when complete.
UiProgressBar
app/components/ui/UiProgressBar.vueHorizontal progress bar with optional percentage label.
UiMessageBox
app/components/ui/UiMessageBox.vueAlert/notification box with variant icons and optional dismiss button.
UiPagination
app/components/ui/UiPagination.vuePage navigation with ellipsis and prev/next arrows.
UiTabs
app/components/ui/UiTabs.vueTab navigation with active indicator and content slot.
Content for the Overview tab.
UiAccordion / UiAccordionItem
app/components/ui/UiAccordion.vueCollapsible content panels.
UiCard + UiTable
app/components/ui/UiCard.vue · UiTable.vueCard wrapper with title and actions slot. Table renders semantic HTML with sortable columns.
Users
| Name | Role | Status | Actions |
|---|---|---|---|
| Mario Rossi | Developer | Active | |
| Anna Verdi | Designer | Pending | |
| Luca Bianchi | PM | Inactive |
CardDashboard
app/components/CardDashboard.vueTopic card with tag, title, description, and action link.
Intelligenza Artificiale
+340% di copertura nelle ultime 3 ore. OpenAI ha annunciato nuovi modelli per il mercato europeo.
Cybersecurity
Nuove normative UE in vigore da aprile 2026.
CardArticle
app/components/CardArticle.vueArticle card with image, metadata, sentiment, and categories.
Dieci anni di OpenAI: successi e sfide
OpenAI è stata fondata nel 2015 da Sam Altman ed Elon Musk con l'obiettivo di sviluppare un'intelligenza artificiale responsabile e benefica per l'umanità.
Categorie
Nuova legge sulla privacy digitale
Il Parlamento europeo approva nuove regole sulla protezione dei dati personali.
Categorie
CardSaved
app/components/CardSaved.vueCollection card showing saved article count and metadata.
Appalti 2026
8 articoli
AI & Regolamentazione
23 articoli
AppSidebar
app/components/AppSidebar.vueSidebar with navigation links, topic filters, and source filters.
AppDrawer + DrawerArticle
app/components/AppDrawer.vueSliding panel from the right edge with backdrop overlay. DrawerArticle provides article detail content.
AppModal
app/components/AppModal.vueCentered dialog overlay with optional confirmation footer. Useful for confirm actions, alerts, and short forms.
SearchPanel
app/components/SearchPanel.vueSearch section with text input, category filter, and tag results grid.
UiChartKpi
app/components/ui/UiChartKpi.vueSingle metric display with optional trend indicator. Pure CSS, no chart.js dependency.
UiChartDonut
app/components/ui/UiChartDonut.vueDonut/pie chart. Colors default to design system palette.
UiChartLine
app/components/ui/UiChartLine.vueLine/area chart. Supports multiple datasets, fill mode, and custom colors.
UiChartBar
app/components/ui/UiChartBar.vueBar chart. Supports horizontal and vertical orientation.
UiDateRangePicker
app/components/ui/UiDateRangePicker.vueDate range picker with preset buttons and custom date inputs.
Selected: — / —