Design System & UI - FactoriaF5-Asturias/project-p5-digital-academy-team1-restaurant-frontend GitHub Wiki

Design System

The visual identity "GitSushi — Developer Gastronomy" is defined once in src/style.css and reused everywhere. The design tokens are declared inside Tailwind's @theme block, so each one automatically becomes a utility class (bg-primary, text-on-surface...).

In Tailwind v4, only variables declared inside @theme generate utility classes. Plain variables in :root can still be used with var(--name) in regular CSS, but they do not create classes.

Color palette

Token Value Usage Example class
primary #d6381d Main actions, brand coral bg-primary, text-primary
on-primary #ffffff Text on primary text-on-primary
primary-container #fff0eb Soft highlights bg-primary-container
secondary #07956a Completed / success states text-secondary
tertiary #0384c6 Technical / informative details text-tertiary
error #dc2626 Errors and destructive actions bg-error
background / surface #d3d3d3 Page background bg-surface
surface-container #ffffff Cards and panels bg-surface-container
on-surface #191919 Main text text-on-surface
on-surface-variant #666a73 Secondary text text-on-surface-variant
outline / outline-variant #d1d5db / #e5e7eb Borders and dividers border-outline

The application uses a single light theme (no dark mode).

Typography & icons

Resource Usage
Inter Body text and headings
JetBrains Mono "Code" labels, eyebrows and badges (programming identity)
Material Symbols Outlined Icons (e.g. admin section cards)

All loaded from Google Fonts in index.html.

Element Desktop Tablet / mobile (< 1024px)
h1 48px / 800 32px
h2 32px / 700 24px
h3 20px / 600 20px

Spacing and radius

Spacing Value Radius Value
--space-2xs 0.25rem --radius-sm 0.25rem
--space-xs 0.5rem --radius-default 0.5rem
--space-sm 0.75rem --radius-md 0.75rem
--space-md 1rem --radius-lg 1rem
--space-lg 1.5rem --radius-xl 1.5rem
--space-xl 2rem --radius-full 9999px

Main container: .page-container, max width 1200px with a 1.25rem gutter.

Base component classes

Class Purpose
.card White panel with border and large radius
.btn-primary Main call to action (coral)
.btn-secondary Secondary action (outlined)
.label-code Monospace label
.label-eyebrow Small uppercase monospace heading
.label-badge Small monospace badge

Tailwind inside components

Components use BEM classes in the template and apply Tailwind utilities to them in a scoped style block with @apply, referencing the global tokens:

<template>
  <main class="delivery-view">
    <h1 class="delivery-view__title">Resumen de reparto</h1>
  </main>
</template>

<style scoped>
@reference "../style.css";

.delivery-view {
  @apply mx-auto flex w-full max-w-6xl flex-col gap-6 px-4 py-8 sm:px-6;
}
</style>

Naming Conventions

  • Components: PascalCase, descriptive and in English (CartSummary.vue, PaymentSelector.vue). Views end with View; global layout components start with The (TheHeader.vue, TheFooter.vue).
  • Composables: use + purpose (useProducts.js, usePagination.js).
  • Stores: resource name (cart.js → useCartStore).
  • Services: resource + .service.js (orders.service.js).
  • Tests: same name as the file + .test.js, next to it.
  • Constants: UPPER_SNAKE_CASE, frozen with Object.freeze (ROLES, DINE_IN_PAYMENT_METHODS).
  • Custom CSS classes: BEM — block__element--modifier, where the block matches the component name in kebab-case (cart-summary, cart-summary__line, cart-summary__line-price-original).
  • Tailwind tokens: semantic names only (bg-primary, text-on-surface); no hard-coded colors.
  • UI text: in Spanish (real restaurant in Spain). Code identifiers in English.
⚠️ **GitHub.com Fallback** ⚠️