Styling

Overview

Collage Admin uses SCSS with sass-embedded. Global styles live in app/assets/scss/. Vuetify 3 provides the component foundation with a fully overridden custom theme.

File Structure

app/assets/scss/
├── main.scss           # Entry point — imports all partials
├── _variables.scss     # Design tokens (colors, typography, spacing)
├── _vuetify.scss       # Vuetify theme overrides
├── _typography.scss    # Global font rules (Acumin Pro)
├── _utilities.scss     # Utility classes
├── _animations.scss    # Transition and animation keyframes
└── components/
    ├── _dam.scss        # DAM-specific layout rules
    ├── _sidebar.scss    # Navigation sidebar
    ├── _dialogs.scss    # Dialog overrides
    └── _forms.scss      # Form input overrides

Design Tokens (_variables.scss)

All values from the Collage brand system. The Admin-Frontend design system guide documents the full palette; the Nuxt 4 app uses CSS custom properties derived from the same tokens.

Colors

// Brand
$color-brand:        #6473FF;
$color-brand-hover:  #3A47BB;
$color-brand-dark:   #383859;

// Surfaces
$color-page-bg:      #F6F6F6;
$color-card-bg:      #FFFFFF;
$color-panel-bg:     #E9E9EF;

// Text
$color-text-primary:   #3D3D3D;
$color-text-secondary: #525252;
$color-text-muted:     #8F8F8F;

// Status
$color-success:  #13B854;
$color-danger:   #FF5572;
$color-warning:  #FF9800;

// Border
$color-border:   #E0E0E0;

Typography

Acumin Pro is loaded via Adobe Typekit. The kit URL is configured in nuxt.config.ts under app.head.link.

$font-family:   'acumin-pro', sans-serif;
$font-size-sm:  12px;
$font-size-base: 14px;
$font-size-md:  16px;
$font-size-lg:  18px;
$line-height-base: 1.4;

Vuetify 3 Theme

Vuetify's theme is configured in plugins/vuetify.ts — not via SCSS. The theme maps Vuetify semantic color names to Collage tokens:

// plugins/vuetify.ts
createVuetify({
  theme: {
    themes: {
      light: {
        colors: {
          primary:   '#6473FF',
          secondary: '#3A47BB',
          error:     '#FF5572',
          success:   '#13B854',
          surface:   '#FFFFFF',
          background: '#F6F6F6',
        }
      }
    }
  }
})

Component Styling

In Vue SFCs, use <style scoped> for component-specific styles. Never use deep selectors (::v-deep) unless overriding a Vuetify internal that has no other option.

<style scoped lang="scss">
.asset-card {
  border: 1px solid $color-border;
  border-radius: 8px;

  &:hover {
    border-color: $color-brand-hover;
  }
}
</style>

Utility Classes

_utilities.scss provides a small set of non-Vuetify helpers:

Class	Description
.truncate	Single-line text truncation with ellipsis
.line-clamp-2	Two-line clamp
.gap-4, .gap-8, .gap-16, .gap-24	Flex/grid gap shortcuts
.text-muted	color: $color-text-muted
.text-danger	color: $color-danger
.text-success	color: $color-success

Animations

_animations.scss defines reusable keyframes referenced in component transitions:

Name	Description
fade-in	Opacity 0 → 1
slide-up	translateY(8px) + fade
skeleton-pulse	Background shimmer for skeleton loaders

Rules

• Use SCSS variables from _variables.scss — never hardcode hex values
• All component styles are scoped — avoid global class pollution
• No !important except when overriding Vuetify internals (add a comment explaining why)
• Spacing uses multiples of 4 px: 4, 8, 12, 16, 20, 24, 32, 40
• Border radius: 4px (inputs), 8px (cards), 12px (dialogs), 9999px (pills)

Related Documentation

• Configuration — SCSS preprocessor setup
• Plugins — Vuetify plugin configuration