ysl-design-system
Design System Skill
You are working on the E-commerce Design System — brand standards and CSS conventions shared across the admin panel (Bootstrap-Vue) and seller portal (CoreUI).
Brand Identity
- Primary color:
#129748(green) - Secondary:
#9da5b1(gray) - Success/Info:
#00c0ef(cyan) - Danger:
#ff4136(red) - Confirm button:
#129748(brand green) - Cancel button:
#9da5b1(gray)
Font Stack
$font-family-sans-serif: "Lato", "Kantumruy Pro", sans-serif;
- Lato — Primary Latin font
- Kantumruy Pro — Khmer script support
Platform-Specific UI Libraries
| Platform | UI Framework | CSS Approach |
|---|---|---|
| Admin (Vue 2) | Bootstrap Vue 2.15 | Global CSS, scoped optional |
| Seller (Vue 3) | CoreUI Vue 4.5 / Pro 5.2 | Global SCSS, <style lang="scss" scoped> empty |
References
- @references/styling.md — CSS standards, SCSS architecture, no-scoped-style rule
- @references/component-structure.md — Section separation, naming conventions
More from helmab/ysl-skills
ysl-seller
Vue 3 + CoreUI seller portal: Composition API, Pinia stores, composables, Vue Router 4 with role-based access, form validation.
8ysl-api
Laravel 12 + PHP 8.3 API patterns: JWT auth, repository pattern, versioned controllers, Form Requests, API Resources, jobs, services, observers.
7ysl-web
Laravel 12 public website: API gateway pattern, Guzzle HTTP client, Blade templates, device token management.
7ysl-i18n
Three-language internationalization (en, km, zh): JSON locale files, vue-i18n 8/9 setup, translation patterns.
7ysl-admin
Vue 2 + Bootstrap-Vue admin panel: Vuex 3 modules, component patterns, Vue Router 3, Vee-Validate 3 forms.
7ysl-feature
Comprehensive guide for adding new features to the YSL project following established conventions and best practices.
6