@akson/cortex-landing-themes

Design system and theming utilities for landing pages - CSS custom properties, theme presets, and design tokens

Installation

npm install @akson/cortex-landing-themes

Usage

import { ThemeProvider, useTheme, designTokens } from '@akson/cortex-landing-themes';

function App() {
  return (
    <ThemeProvider theme="myarmy-default">
      <LandingPage />
    </ThemeProvider>
  );
}

function MyComponent() {
  const theme = useTheme();
  
  return (
    <div style={{
      color: theme.colors.primary,
      fontFamily: theme.fonts.heading
    }}>
      Swiss Military Theme
    </div>
  );
}

Design Tokens

:root {
  /* MyArmy Colors */
  --myarmy-primary: #1A1A1A;
  --myarmy-secondary: #7A8B73;
  --myarmy-accent: #1F3A0F;
  
  /* Typography */
  --font-heading: 'Swiss Military', serif;
  --font-body: 'Inter', sans-serif;
  
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
}

Themes

• myarmy-default - Standard Swiss military theme
• myarmy-dark - Dark mode variant
• myarmy-minimal - Minimalist version

Features

• CSS custom properties
• Theme switching
• Design token system
• WCAG AAA compliant colors
• Swiss military aesthetic

License

MIT © MyArmy