@affinda/css

Base CSS styles and font setup for Affinda UI components.

Installation

npm install @affinda/css
# or
pnpm add @affinda/css

Usage

Import in your main application file to automatically set up:

• CSS reset
• Affinda font families
• Design tokens (colors, spacing, etc.)
• Base component styles

// In your main.tsx or index.tsx
import '@affinda/css';

This single import provides everything your Affinda components need to render correctly.

Font Setup

Affinda Typography

Affinda uses the NeuSans font family for headings and buttons, with Helvetica for body text.

Font Weights:

• NeuSans Book (weight: 500) - Headings, buttons, labels
• NeuSans Regular (weight: 400) - Alternative body text
• Helvetica - Default body text

Automatic Font Loading

When you import @affinda/css, the following font families are automatically configured:

--font-family-heading: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;
--font-family-body: 'Helvetica', 'Inter', 'Segoe UI', system-ui, sans-serif;
--font-family-button: 'NeuSans', 'Inter', 'Segoe UI', system-ui, sans-serif;

Loading NeuSans Font Files

Option 1: Self-Host Font Files (Recommended)

1. Obtain the NeuSans font files (.woff2 and .woff formats)
2. Add them to your public/fonts/ directory
3. Update the @font-face declarations in your app:

/* In your global CSS file */
@font-face {
  font-family: 'NeuSans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/NeuSans-Book.woff2') format('woff2'),
       url('/fonts/NeuSans-Book.woff') format('woff');
}

@font-face {
  font-family: 'NeuSans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/NeuSans-Regular.woff2') format('woff2'),
       url('/fonts/NeuSans-Regular.woff') format('woff');
}

Option 2: Use CDN (if available)

If NeuSans is available via a font CDN, link it in your HTML:

<link rel="stylesheet" href="https://your-cdn.com/fonts/neusans.css">

Option 3: Fallback Fonts

If you don't have access to NeuSans, the components will gracefully fall back to Inter and system fonts, maintaining good typography.

What's Included

Reset Styles

• Modern CSS reset for consistent rendering across browsers
• Box-sizing: border-box
• Normalized margins and padding

Font Declarations

• NeuSans font family setup
• CSS custom properties for font families
• Automatic fallbacks to system fonts

Base Styles

• Design tokens integration (@affinda/tokens)
• Focus ring utilities
• Screen reader utilities
• Responsive density controls

Design Tokens

All Affinda colors, spacing, and typography tokens are automatically loaded:

var(--colour-brand-inkwell)
var(--colour-brand-mist-green)
var(--colour-brand-ice)
/* ... and 140+ more design tokens */

Files

• index.css - Main entry point (imports reset, fonts, base)
• reset.css - CSS reset
• fonts.css - Font family declarations and @font-face rules
• base.css - Base styles and design token integration

Complete Example

// main.tsx
import '@affinda/css'; // Loads reset, fonts, tokens, base styles
import { Navbar, Button, Card } from '@affinda/react';
import { defineCustomElements } from '@affinda/wc/loader';

defineCustomElements();

function App() {
  return (
    <div>
      <Navbar>
        {/* All components automatically use NeuSans for headings */}
        <Button>Click me</Button>
      </Navbar>
    </div>
  );
}

Need the NeuSans Font?

Contact Affinda or your design team to obtain the official NeuSans font files. The font is part of the Affinda brand identity and should be licensed appropriately.

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

The font stack includes system font fallbacks for maximum compatibility.