@floorsfinance/brand-assets

Official brand assets for Floors Finance — modern, minimal, high-contrast DeFi/fintech platform.

Installation

npm install @floorsfinance/brand-assets

Quick Start

Import Colors

// TypeScript
import { MINT, TANGERINE, NIGHTY, WHITE, PLATINUM } from '@floorsfinance/brand-assets/colors';
import { colors } from '@floorsfinance/brand-assets/colors';

// JavaScript
const { MINT, NIGHTY } = require('@floorsfinance/brand-assets/colors');

Use Design Tokens

import tokens from '@floorsfinance/brand-assets/colors/tokens.json';

console.log(tokens.tokens.color.accent.mint.value); // #BEFFB0

Package Structure

@floorsfinance/brand-assets/
├── colors/
│   ├── index.js       # JavaScript exports
│   ├── index.ts       # TypeScript definitions
│   └── tokens.json    # W3C DTCG design tokens
├── logos/
│   └── svg/           # All logo variants (Light/Dark)
├── fonts/
│   └── README.md      # Font installation guide
├── examples/
│   └── usage.tsx      # React/TypeScript examples
├── guidelines.md      # Complete brand guidelines
└── package.json

Color Palette

| Token | Value | Usage | |-------|-------|-------| | MINT | #BEFFB0 | Fresh accent, primary action | | TANGERINE | #FFB651 | Warm accent, callouts | | NIGHTY | #101114 | Primary dark background | | WHITE | #FFFFFF | Clean base | | PLATINUM | #F4F4F5 | Neutral light surface |

Typography

Primary Typeface: Poppins (Google Fonts)

All text uses Poppins with tight tracking (-4% to -2%). See fonts/README.md for installation.

Hierarchy

| Level | Size | Line-height | Tracking | |-------|------|-------------|----------| | H1 | 56pt | 64pt | -4% | | H2 | 40pt | 48pt | -4% | | H3 | 36pt | 42pt | -4% | | H4 | 28pt | 36pt | -2% | | Subhead | 24pt | 32pt | -4% |

Logo Assets

SVG logos are available in logos/svg/:

• Full lockup (horizontal)
• Wordmark only
• Symbol only
• Light/dark variants

Minimum size: 152px × 50px (horizontal lockup)

Documentation

• Brand Guidelines: See guidelines.md for complete brand system
• Code Examples: See examples/usage.tsx for React integration

License

MIT — See LICENSE file

Support

For brand questions or asset requests, contact the Floors Finance team.