Velvue

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Quick Start

Install Velvue with npm

  npm install velvue

Usage

Include this in your main.ts

import { createApp } from 'vue'
import App from './App.vue'

import 'velvue/style'
import Velvue from 'velvue'

createApp(App).use(Velvue).mount('#app')

Documentation

Learn how to use the framework, what it offers you, and how the various components work together:

Visit Velvue Documentation

Features

• Figma-Driven: All components are based exactly on the Figma design.
• Lightweight: No dependencies other than Vue 3
• Dark Mode: Natively supported via CSS variables.
• Accessible: Built according to WAI-ARIA standards.

Visual Preview

NOTE: Implement screenshot with an example page with some important/often used components in webdesign.

Color Usage

Override Color Reference

Note that the color scale uses 100% opacity, and colors with lower opacity may cause the color system to break. You can find all available variables in the documentation. Simply enter the variable name and specify a new color.

Create a simple file where you override the framework’s colors to keep things organized.

Example velvue-overrides.css

:root{
    --velvue-primary: #ffffff;
    --velvue-action: #ffffff;
    --velvue-on-action: #ffffff;
    /** and more to go **/
}

Color Scale

To generate these scales accurately, you can use Tints.dev or the Foundation Color Generator plugin in Figma.

We use a Base-Tint-Shade system. The standard brand color is always defined as 500.

• Tints (50-400): Generated by layering the base color with decreasing opacity over a white (#FFFFFF) background.
• Shades (600-800): Generated by layering the base color with decreasing opacity over a black (#000000) background.

Note: After generating the visual result, ensure you convert it back to a solid Hex/RGB value.

Variables have been organized into several categories to ensure clarity

• Alias (Primary Color, Error, Warning, Information, Neutral, Border, Border Radius)
• Brand (Base Colors)
• Mapped (Text, Icon, Surface, Border)
• Responsive: (Font Size, Line Spacing, Character Spacing)

License

This project is licensed under the MIT License - see the LICENSE.md file for details.