npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, πŸ‘‹, I’m Ryan HefnerΒ  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you πŸ™

Β© 2026 – Pkg Stats / Ryan Hefner

@kaze-no-manga/brand

v1.0.1

Published

🎨 Design tokens and Tailwind preset for Kaze no Manga

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

zweerzweer

Keywords

kaze-no-mangadesign-tokensdesign-systemtailwindtailwindcsstailwind-presetthemecolorstypographymangastyling

Readme

@kaze-no-manga/brand

npm version License: MIT Coverage Badge

Design system and brand assets for Kaze no Manga

Table of Contents

Overview

This package contains the complete design system for Kaze no Manga, including design tokens, Tailwind CSS configuration, and brand guidelines.

Features

  • 🎨 Design Tokens: Colors, typography, spacing, shadows, border-radius
  • 🎭 Tailwind Preset: Pre-configured Tailwind CSS preset
  • πŸ“ Brand Guidelines: Logo usage, color palette, typography rules
  • πŸ“¦ Multiple Formats: TypeScript, CSS variables

Installation

npm install @kaze-no-manga/brand

Usage

Tailwind CSS

// tailwind.config.ts
import { preset } from '@kaze-no-manga/brand/preset'

export default {
  presets: [preset],
  content: ['./app/**/*.{ts,tsx}'],
}

CSS Variables

// app/root.tsx
import '@kaze-no-manga/brand/css'

Design Tokens

import { colors, typography, spacing } from '@kaze-no-manga/brand'

const primaryColor = colors.primary[500]
const headingFont = typography.fontFamily.heading
const baseSpacing = spacing[4]

Component Examples

// Using Tailwind classes (from preset)
<button className="bg-primary-500 text-white px-4 py-2 rounded-md">
  Click me
</button>

// Dark mode support
<div className="bg-background text-foreground">
  Adapts to light/dark mode automatically
</div>

// Manual dark mode toggle
<html className="dark-mode">
  <div className="bg-surface text-foreground border border-border">
    Dark mode content
  </div>
</html>

// Using design tokens programmatically
import { colors, spacing } from '@kaze-no-manga/brand'

const styles = {
  backgroundColor: colors.primary[500],
  padding: spacing[4],
}

// Using CSS variables
<div style={{ 
  color: 'var(--color-text-primary)',
  backgroundColor: 'var(--color-background)'
}}>
  Theme-aware styling
</div>

Available Imports

// All design tokens
import { colors, typography, spacing, shadows, radius } from '@kaze-no-manga/brand'

// Tailwind preset only
import { preset } from '@kaze-no-manga/brand/preset'

// CSS variables
import '@kaze-no-manga/brand/css'

Design Tokens

Colors

Primary Palette (Purple/Lilac theme):

colors.primary[50]   // #f5f3ff - Lightest backgrounds
colors.primary[500]  // #8b5cf6 - Main brand color  
colors.primary[900]  // #4c1d95 - Darkest text

Theme-aware Colors:

colors.background.light  // #fafafa
colors.background.dark   // #0a0a0a
colors.text.primary.light  // #171717
colors.text.primary.dark   // #fafafa

Semantic Colors: success, warning, error, info with full 50-900 scales

Typography

Font Families:

typography.fontFamily.sans     // ['Inter', 'system-ui', 'sans-serif']
typography.fontFamily.heading  // ['Poppins', 'Inter', 'sans-serif']  
typography.fontFamily.mono     // ['Fira Code', 'monospace']

Font Scale (1.25 modular scale):

typography.fontSize.xs    // ['0.75rem', { lineHeight: '1rem' }]
typography.fontSize.base  // ['1rem', { lineHeight: '1.5rem' }]
typography.fontSize['5xl'] // ['3rem', { lineHeight: '1' }]

Spacing

4px Grid System:

spacing[1]   // 0.25rem (4px)
spacing[4]   // 1rem (16px)  
spacing[8]   // 2rem (32px)
spacing[32]  // 8rem (128px)

Dark Mode

Automatic (prefers-color-scheme):

@media (prefers-color-scheme: dark) {
  /* Automatically applied */
}

Manual Toggle:

<html className="dark-mode">
  <!-- Dark mode active -->
</html>

Tailwind Classes:

<div className="bg-background text-foreground">
  <!-- Adapts automatically -->
</div>

Brand Guidelines

Logo

  • Primary Logo (logo.svg): Full color with gradient background
  • Icon (logo-icon.svg): Circular icon for small spaces
  • Light Backgrounds (logo-white.svg): For use on light backgrounds
  • Monochrome (logo-mono.svg): Single color, adapts to text color
  • Minimum Size: 32px height
  • Clear Space: 16px on all sides

Logo Concept

The logo evokes "Kaze no Manga" (Wind of Manga) through:

  • Wind lines: Flowing horizontal lines reminiscent of manga speed lines
  • Typography: Clean, modern typeface with hierarchical sizing
  • Colors: Primary purple palette with subtle gradients
  • Minimalism: Simple geometric forms for versatility

Color Usage

  • Primary: CTAs, links, active states
  • Secondary: Accents, highlights
  • Neutral: Text, borders, backgrounds
  • Semantic: Success/error messages, warnings

Typography

  • Headings: Bold, clear hierarchy
  • Body: Readable, comfortable line-height
  • Code: Monospace for technical content

Package Structure

brand/
β”œβ”€β”€ lib/                    # Built TypeScript files
β”‚   β”œβ”€β”€ tokens/
β”‚   β”‚   β”œβ”€β”€ colors.ts
β”‚   β”‚   β”œβ”€β”€ typography.ts
β”‚   β”‚   β”œβ”€β”€ spacing.ts
β”‚   β”‚   β”œβ”€β”€ shadows.ts
β”‚   β”‚   └── radius.ts
β”‚   β”œβ”€β”€ tailwind/
β”‚   β”‚   └── preset.ts
β”‚   β”œβ”€β”€ css/
β”‚   β”‚   └── variables.css
β”‚   └── index.ts
β”œβ”€β”€ assets/
β”‚   β”œβ”€β”€ logo/               # Logo variants (PNG)
β”‚   └── square/             # Square logo (PNG)
β”œβ”€β”€ test/                   # Test suite (124 tests)
└── README.md

Documentation

Interactive documentation is available via Storybook:

🌐 Live Documentation: kaze-no-manga.github.io/brand

Local Development

# Start Storybook locally
npm run docs:dev

# Build Storybook for production
npm run docs:build

The documentation includes:

  • Interactive color palette with copy-to-clipboard
  • Typography scale with live examples
  • Spacing grid visualization
  • Dark mode toggle
  • Code snippets for all design tokens

Versioning

This package follows Semantic Versioning:

  • Major: Breaking changes to tokens or API
  • Minor: New tokens or features
  • Patch: Bug fixes or documentation updates

License

MIT License - see LICENSE for details.

Part of the Kaze no Manga project