E7A UI

E7A UI is a compact React 19 component library and CSS design foundation for interfaces built with the E7A visual identity.

It provides reusable typography, color and spacing tokens, brand-aware interface primitives, and the E7A mark and logo. It is not a page framework, backend runtime or full-featured application template.

Current stage: internal-first, external-ready. We use the library across E7A products first while stabilizing contracts, documentation and visual compatibility. We welcome conversations with external developers interested in using it; general third-party licensing is not yet granted. Public download availability should not be confused with an open-source license.

E7A website · npm package · Brand usage policy

Installation

Install an exact version confirmed to exist on public npmjs.com (no GitHub token required). For example, the previously released 0.2.1:

pnpm add --save-exact @e7a-ru/[email protected]
# or
npm install --save-exact @e7a-ru/[email protected]

The dual-theme feature is included in UI 0.3.0. After checking that version against the public npm registry, install it with npm install --save-exact @e7a-ru/[email protected] or pnpm add --save-exact @e7a-ru/[email protected]. Package source, a Git tag and these installation instructions are not proof that a version has been published. UI 0.2.2 was a separate source/archive candidate; versions are immutable and are not overwritten.

Use React 19 as a peer dependency. The package ships ESM and TypeScript declarations. Web apps may use Next.js or another bundler that supports CSS imports.

Quick start

Import design tokens and scoped component styles in your application's global stylesheet, in that order. Do not import foundation.css just to style the logo:

@import "@e7a-ru/ui/tokens.css";
@import "@e7a-ru/ui/components.css";

components.css contains the styles used by E7ALogo, E7AButton and E7APanel, without page-level reset rules. Applications control their own global CSS, fonts, Tailwind layers and layout.

Use the components in React:

import { E7ALogo, E7AMark, E7AButton, E7APanel } from "@e7a-ru/ui";

export function BrandExample() {
  return (
    <main>
      <E7ALogo />
      <E7APanel eyebrow="E7A / SYSTEM" title="A consistent visual foundation">
        <E7AMark title="E7A identity" style={{ width: 90, height: 120 }} />
        <E7AButton variant="primary">Explore</E7AButton>
      </E7APanel>
    </main>
  );
}

What is included

| Export | Use | | --- | --- | | E7ALogo | Official E7A wordmark | | E7AMark | Configurable E7A mark (outline, displaced state and node offsets) | | E7AButton | Primary/secondary/quiet button styles and disabled state | | E7APanel | Reusable content panel |

Also exported: component prop types for TypeScript users.

Stylesheets can be imported individually:

• @e7a-ru/ui/tokens.css — canonical CSS custom properties;
• @e7a-ru/ui/components.css — scoped Logo, Button and Panel styling (required for the styled Quick Start);
• @e7a-ru/ui/foundation.css — optional global reset/foundation, retained for existing consumers; it changes html, body, universal sizing and :focus-visible, so avoid importing it into an application that already owns these rules. The logo styles it historically included are now also available in components.css.

Fonts are not fetched by this package. Applications provide Manrope and JetBrains Mono, for example through their own Next.js font configuration and --font-manrope / --font-jetbrains-mono variables.

Dark and Light — UI 0.3.0

Both E7A themes share components, typography, geometry, spacing and motion. The existing Dark palette is the unchanged default: importing only tokens.css and components.css does not enable automatic switching.

When using the verified 0.3.0 package or a locally reviewed 0.3.0 tarball, add the optional stylesheet after the baseline tokens:

@import "@e7a-ru/ui/tokens.css";
@import "@e7a-ru/ui/themes.css";
@import "@e7a-ru/ui/components.css";

<!-- Application explicitly owns its theme selection. -->
<html data-e7a-theme="light">
  <!-- A nested surface can opt back into Dark. -->
  <section data-e7a-theme="dark">...</section>
</html>

Use data-e7a-theme="light" on the root or a particular container; data-e7a-theme="dark" also works for a nested region. In a scoped region the stylesheet sets matching foreground/background and color-scheme, so currentColor SVGs and native controls follow the chosen surface. There is no JavaScript theme provider, automatic system-preference switch, font installation or global reset. foundation.css remains optional and is not required for themed components.

The Light and Dark palettes and component behavior have source, contrast and Chromium browser acceptance tests in Core. Consuming products must still test their own layouts, keyboard states and visual interactions before adoption or deployment. Publishing the Core package never deploys a consuming product.

Versioning and integration

Use explicit versions and a committed lockfile in production. Minor versions before 1.0.0 may contain incompatible changes: review release notes, type contracts and visual diffs before upgrading.

The library is independently versioned. Publishing UI does not change a deployed Website, Reader or Bot Studio; each product chooses when to adopt it.

Brand usage — advance written permission required

The E7A name as a third-party brand, official logo, E7A mark, distinctive artwork, brand templates and other E7A Brand Assets must not be used in a third-party project, product, marketing material or visual identity without prior explicit written permission from the relevant rights holders. Installing or downloading this library is not permission to copy or use E7A branding. Truthful descriptive references permitted by applicable law are not prohibited.

See the official bilingual E7A Brand Usage Policy. The brand policy remains independent of any future code licensing.

Source, support and rights

The published npm artifact contains built JavaScript, type declarations and CSS. The E7A source repository and internal engineering documentation are currently private.

Current license: UNLICENSED (all rights reserved). The published archive is readable without authentication, but the team is initially using it for E7A projects. We are preparing a documented pathway for external developers; until an explicit license or individual permission is granted, package availability alone does not authorize third-party use, modification or redistribution. The E7A names, logo and visual identity require their own branding/trademark permissions.

E7A public website: https://e7a.ru. Packaging issues and license requests can be directed to the maintainers through E7A's published contact channels.