Integration Guide

How to use the LMNTL brand design system in Hour Timesheet, Minute7, and other projects.

Quick Start

RECOMMENDED

CDN Approach

Zero setup, works immediately in any project

✓ No build step required
✓ Works with any framework
✓ Automatic updates
✓ ~15KB gzipped

ADVANCED

NPM Package

Full TypeScript support, tree-shaking, React components

✓ TypeScript types
✓ React icon components
✓ Tailwind preset
✓ Version pinning

CDN Integration

Step 1: Add the CSS

Add this single line to your HTML <head>:

<link rel="stylesheet" href="https://lmntl.ai/styles/brand-tokens.css">

Step 2: Set the Brand

Wrap your content with a data-brand attribute:

<div data-brand="hour">
  <!-- Hour Timesheet orange theme -->
</div>

<div data-brand="minute7">
  <!-- Minute7 green theme -->
</div>

<div data-brand="lmntl">
  <!-- Mission Critical navy theme -->
</div>

<div data-brand="mcs">
  <!-- LMNTL purple theme (default) -->
</div>

Step 3: Use Brand Classes

Apply the pre-built component classes:

<!-- Buttons -->
<button class="brand-btn brand-btn-primary">Primary Action</button>
<button class="brand-btn brand-btn-secondary">Secondary</button>
<button class="brand-btn brand-btn-outline">Outline</button>

<!-- Cards -->
<div class="brand-card">
  <h3 class="brand-card-title">Card Title</h3>
  <p class="brand-card-description">Card content here</p>
</div>

<!-- Badges -->
<span class="brand-badge">New</span>
<span class="brand-badge brand-badge-outline">Beta</span>

<!-- Alerts -->
<div class="brand-alert brand-alert-success">Success message</div>
<div class="brand-alert brand-alert-error">Error message</div>

<!-- Form Inputs -->
<input type="text" class="brand-input" placeholder="Enter text...">
<select class="brand-select">...</select>

Live Demo

data-brand="hour"

DCAA Compliant

data-brand="minute7"

QuickBooks Sync

data-brand="lmntl"

Audit Ready

data-brand="mcs"

Enterprise Ready

Using CSS Variables Directly

Access design tokens via CSS custom properties:

.my-component {
  /* Colors */
  background-color: var(--brand-primary);
  color: var(--brand-primary-foreground);
  border-color: var(--brand-primary-light);

  /* Spacing */
  padding: var(--brand-space-4);
  margin: var(--brand-space-2);
  gap: var(--brand-space-3);

  /* Typography */
  font-family: var(--brand-font-heading);
  font-size: var(--brand-text-base);
  line-height: var(--brand-leading-normal);

  /* Borders & Shadows */
  border-radius: var(--brand-radius-lg);
  box-shadow: var(--brand-shadow-md);

  /* Transitions */
  transition: var(--brand-transition-normal);
}

Available Tokens

Colors

--brand-primary
--brand-primary-light
--brand-primary-dark
--brand-accent
--brand-success
--brand-warning
--brand-error
--brand-neutral-*

Spacing

--brand-space-1 (0.25rem)
--brand-space-2 (0.5rem)
--brand-space-3 (0.75rem)
--brand-space-4 (1rem)
--brand-space-6 (1.5rem)
--brand-space-8 (2rem)
--brand-space-12 (3rem)
--brand-space-16 (4rem)

Typography

--brand-font-heading
--brand-font-body
--brand-font-mono
--brand-text-xs
--brand-text-sm
--brand-text-base
--brand-text-lg
--brand-text-xl to 4xl

NPM Package Integration

Available Now: The @mission-critical-saas/brand-system package is published on GitHub Packages. See the repository for source code.

LIVE DEMO

Colors Imported from NPM Package

These colors are dynamically imported from @mission-critical-saas/brand-system/tokens in this page's frontmatter:

mcs

#1E40AF

primary

#3B82F6

light

#1E3A8A

dark

minute7

#059669

primary

#22C55E

light

#047857

dark

hour

#EA580C

primary

#F97316

light

#C2410C

dark

lmntl

#7C3AED

primary

#A78BFA

light

#5B21B6

dark

import { colors, getBrandColors } from '@mission-critical-saas/brand-system/tokens';

Installation

# Install from GitHub Packages
npm install @mission-critical-saas/brand-system

# Or with yarn
yarn add @mission-critical-saas/brand-system

Package Exports

// Import CSS tokens
import '@mission-critical-saas/brand-system/tokens/css';

// Import TypeScript color constants
import { colors, getBrandColors } from '@mission-critical-saas/brand-system/tokens';

// Import specific brand icons
import { TimeTrackingIcon, DcaaComplianceIcon } from '@mission-critical-saas/brand-system/icons/hour';
import { QuickBooksSyncIcon } from '@mission-critical-saas/brand-system/icons/minute7';
import { AiPlatformIcon } from '@mission-critical-saas/brand-system/icons/lmntl';

// Import components
import { BrandProvider, TrustBadges } from '@mission-critical-saas/brand-system/components';

// Import Tailwind preset
import { mcsBrandPreset } from '@mission-critical-saas/brand-system/tailwind-preset';

React/Next.js Usage

// app/layout.tsx
import '@mission-critical-saas/brand-system/tokens/css';
import { BrandProvider } from '@mission-critical-saas/brand-system/components';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <BrandProvider brand="hour">
          {children}
        </BrandProvider>
      </body>
    </html>
  );
}

// components/FeatureCard.tsx
import { TimeTrackingIcon, ReportingIcon } from '@mission-critical-saas/brand-system/icons/hour';
import { TrustBadges } from '@mission-critical-saas/brand-system/components';

export function FeatureCard() {
  return (
    <div className="brand-card">
      <div className="flex gap-4 mb-4">
        <TimeTrackingIcon size={24} />
        <ReportingIcon size={24} />
      </div>

      <h3 className="brand-card-title">DCAA Compliant</h3>
      <p className="brand-card-description">
        Meet all DCAA requirements with our compliant time tracking.
      </p>

      <TrustBadges badges={['dcaa', 'audit']} layout="compact" />
    </div>
  );
}

Tailwind CSS Preset

// tailwind.config.js
import { mcsBrandPreset } from '@mission-critical-saas/brand-system/tailwind-preset';

export default {
  presets: [mcsBrandPreset],
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
};

// Now you can use brand colors in Tailwind:
// bg-lmntl-purple, text-minute7-green, border-hour-orange, etc.

TypeScript Color Constants

import { colors, getBrandColors, type Brand } from '@mission-critical-saas/brand-system/tokens';

// Direct access to color values
const hourOrange = colors.hour.primary; // '#EA580C'
const minute7Green = colors.minute7.primary; // '#059669'

// Dynamic brand colors
function getButtonStyle(brand: Brand) {
  const brandColors = getBrandColors(brand);
  return {
    backgroundColor: brandColors.primary,
    color: 'white',
    borderColor: brandColors.primaryLight,
  };
}

Asset URLs

All brand assets are available via CDN for direct use in any project:

Asset Type	URL Pattern
CSS Tokens	https://lmntl.ai/styles/brand-tokens.css
Logos	https://lmntl.ai/logos/{name}.svg
Trust Badges	https://lmntl.ai/badges/{name}.svg
Minute7 Icons	https://lmntl.ai/icons/minute7/{name}.svg
Hour Icons	https://lmntl.ai/icons/hour/{name}.svg
LMNTL Icons	https://lmntl.ai/icons/lmntl/{name}.svg
Patterns	https://lmntl.ai/patterns/{name}.svg

Tip: View all available assets on the Brand Assets page.

Implementation Status

✓

Setup Repository

Created brand-system repo with TypeScript, tsup build, GitHub Packages

✓

Extract & Convert Tokens

CSS tokens and TypeScript constants for colors, spacing, typography

✓

Create React Components

Icon components, BrandProvider, TrustBadges components

✓

Tailwind Preset

Drop-in preset with all brand colors and custom utilities

✓

Documentation

README with usage examples, CI/CD for automated publishing

✓

Published v1.0.0

Available on GitHub Packages, integrated into this marketing site

Status: v1.0.0 released and available. See the live demo above showing colors imported directly from the package.

Need Help?

For questions about integrating the brand system, check the documentation or reach out:

Brand Documentation Component Library