Rivaas Artwork

Official logos and brand assets for Rivaas, available in multiple colors, sizes, and formats.

🎨 Color Variants

All logos are generated in the following color variants from the Rivaas color palette:

Variant	Hex	Usage
alpine	#1E6F5C	Primary brand color (default)
alpine-dark	#155A49	Darker brand variant
alpine-light	#3FAF98	Lighter accent variant
white	#F8FAF9	For dark backgrounds
dark	#0F1413	For light backgrounds

📦 Available Assets

SVG (Vector)

Located in dist/svg/:

• logo-alpine.svg - Primary brand color
• logo-alpine-dark.svg - Darker variant
• logo-alpine-light.svg - Lighter variant
• logo-white.svg - For dark backgrounds
• logo-dark.svg - For light backgrounds

PNG (Raster)

Located in dist/png/{size}/:

Available sizes: 16×16, 32×32, 64×64, 128×128, 256×256, 512×512, 1024×1024

Each size directory contains all color variants:

• logo-alpine.png
• logo-alpine-dark.png
• logo-alpine-light.png
• logo-white.png
• logo-dark.png

Favicons

Located in dist/favicon/:

• favicon.svg - Vector favicon (alpine)
• favicon.ico - Multi-size ICO file
• favicon-16x16.png - 16×16 PNG
• favicon-32x32.png - 32×32 PNG
• apple-touch-icon.png - 180×180 for Apple devices

🚀 Quick Start

Prerequisites

This project uses Nix for reproducible development environments. Make sure you have:

• Nix with flakes enabled
• (Optional) direnv for automatic environment loading

Setup

1. Clone this repository
2. Enter the development environment:

   nix develop
   # or with direnv:
   direnv allow

3. Install dependencies:

   npm install

Generate Logo Variants

1. Place your master logo file:

   cp /path/to/your/logo.svg src/logo.svg

2. Generate all variants:

   npm run generate

3. Find generated assets in the dist/ directory

🛠️ Development

Tools Included

The Nix development shell provides:

• node - Node.js runtime
• npm - Package manager

npm packages used:

• sharp - High-performance SVG to PNG conversion (via libvips)
• cheerio - XML parsing for color replacement
• png-to-ico - ICO file generation

Project Structure

artwork/
├── src/
│   └── logo.svg              # Master SVG source
├── scripts/
│   └── generate.js           # Generation script (Node.js)
├── dist/                     # Generated output
│   ├── svg/                  # SVG variants
│   ├── png/                  # PNG variants (by size)
│   └── favicon/              # Favicon files
├── package.json              # npm dependencies
├── flake.nix                 # Nix development environment
└── .envrc                    # direnv integration

Customization

To modify color variants, edit the COLORS object in scripts/generate.js:

const COLORS = {
  alpine: '#1E6F5C',
  'alpine-dark': '#155A49',
  'alpine-light': '#3FAF98',
  white: '#F8FAF9',
  dark: '#0F1413',
};

To change PNG sizes, edit the SIZES array:

const SIZES = [16, 32, 64, 128, 256, 512, 1024];

📋 Usage Examples

Web (HTML)

<!-- SVG (recommended for web) -->
<img src="dist/svg/logo-alpine.svg" alt="Rivaas" width="200">

<!-- PNG for specific size -->
<img src="dist/png/128/logo-alpine.png" alt="Rivaas" width="128">

<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="dist/favicon/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="dist/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="dist/favicon/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="dist/favicon/apple-touch-icon.png">

Markdown

![Rivaas Logo](dist/svg/logo-alpine.svg)

React/Vue/etc

import logo from './dist/svg/logo-alpine.svg';

<img src={logo} alt="Rivaas" />

📄 License

See LICENSE file for details.

🤝 Contributing

This repository is primarily for storing official Rivaas brand assets. If you need to propose changes to the logo or brand colors, please open an issue first to discuss.