# Napsix — Style guide

2026.09 · Home / XIA Agents

People, product and a recognizable identity. Use this guide to design the next Napsix pages with the same principles as Home and XIA Agents.

## COLOR WITH A PURPOSE

- Paper: `#FAF9F6` — Large backgrounds and reading.
- Charcoal: `#242A27` — Headings and secondary actions.
- Green: `#385541` — Emphasis, focus and comparisons.
- Interface lime: `hsl(72 90% 53%)` — Primary actions, with dark text.
- Secondary text: `#5D665F` — Descriptions on light backgrounds.
- Border: `#DEDFD7` — Subtle separation between content.

## TYPOGRAPHY

JetBrains Mono: Headings, navigation, labels and CTAs. Weights 600–700; tight tracking only in large headings.

Inter: Body text, descriptions and comparisons. Weights 400–600; 16–20 px text and 1.6 line height.

## Composition

Copy and CTAs on the left; a 1:1 video on the right. One column on mobile. At most two hero chips.

## Motion

Hover and focus: 300 ms. Reveal: 500 ms, with 80 ms steps. Videos and demos have pause controls; reduced motion disables loops.

## Human scenes

Offices and teams define the visual direction. XIA appears within the work. Recreated interfaces are labeled illustrative.

## Hierarchy

One primary action per block. 14 px CTA corners, 22–28 px cards and media. Space before decoration.

## Brand and communication

Official logos, never redrawn or distorted. Canonical product names. Explain outcomes and controls with verifiable examples.

## Accessibility

Visible focus, dark text on lime and meaningful links. Stacked comparisons on mobile. Understanding must never depend on motion alone.

## CSS / React

`components/site/site-theme.css` + `human-landing.css`

`CtaLink motion="expand"` / `motion="pill"`; `site-cta-compact`

`HumanProductLinks`, `HumanHero`, `HumanDemo`, `CompareTable`, `Reveal`

Load JetBrains Mono and Inter before using the CSS. The export is a style reference, not an application: demos, video and Reveal need the kit React components. Included SVG files are official masters; other PNG assets and covers remain available on /brandkit.

Master logos retain their #CAF31D lime. The interface uses the existing --accent token; do not recolor SVG logos with surface colors.

## Final navigation and motion system

Use only the modern palette in this guide. LogoWall variant="marquee" uses logo + name chips with pause controls. PageProgressNav provides orientation on long desktop pages; mobile retains natural scrolling. ProgressMeter animates sourced percentages or clearly labeled samples. Reveal sequences layers with index (80 ms) and remains visible without JavaScript. Product CTAs: “Explore {name}”, using CtaLink motion="expand". Native smooth scrolling without wheel hijacking; disabled for reduced-motion. General tables preserve columns with accessible horizontal scrolling; only the Home comparison stacks two alternatives.

Full contract and APIs: site-style-system.md in the ZIP (Spanish).