Kernel

Kernel is a lightweight design foundation for web projects.

It provides shared rules for typography, spacing, layout, accessibility, and fonts, while leaving project-specific UI and branding to each project.

Kernel can be used with both static HTML/SCSS projects and React applications.

Installation

Install Kernel from npm.

npm install @novless-jp/kernel

Core Styles

Load Kernel Core from your main SCSS entry point.

@use "pkg:@novless-jp/kernel";

Kernel Core includes:

• Reset
• Base styles
• Fonts
• Typography utilities
• Layout utilities
• Accessibility utilities

Example:

<section class="k-section">
  <div class="k-container">
    <h1 class="k-text-peak k-weight-bold">
      Beautiful Web
    </h1>
  </div>
</section>

SCSS Tools

Tokens, functions, and mixins can be used without emitting Kernel's Core CSS.

@use "pkg:@novless-jp/kernel/tools" as k;

Example:

.c-card {
  padding: k.$size-ui-24;

  @include k.min(768) {
    padding: k.$size-ui-32;
  }
}

This is useful when project SCSS needs to reference Kernel's underlying design rules.

Color Tokens

Kernel provides primitive color palettes.

$palette-nox-*
$palette-aven-*
$palette-vire-*
$palette-sera-*
$palette-ambra-*

These are intended to act as foundations for project-specific semantic colors.

Example:

@use "pkg:@novless-jp/kernel/tools" as k;

$color-primary: k.$palette-aven-700;
$color-danger: k.$palette-sera-900;
$color-warning: k.$palette-ambra-500;
$color-success: k.$palette-vire-900;

Typography

Kernel provides a predefined typography scale.

.k-text-peak
.k-text-surge
.k-text-pulse
.k-text-tone
.k-text-calm
.k-text-quiet
.k-text-shade
.k-text-whisper

Font size and line height are treated as a pair to maintain consistent typography across projects.

Additional utilities include:

.k-tracking-normal
.k-tracking-relaxed
.k-tracking-loose

.k-weight-normal
.k-weight-bold

.k-uppercase

Fonts

Kernel provides three font families.

Kernel Sans

Default font family.

• Latin / Numbers: Roboto
• Japanese: Noto Sans JP

Kernel Serif

Serif font for both Latin and Japanese.

• Latin / Numbers: Quattrocento
• Japanese: Noto Serif JP

Kernel Serif JP

Japanese Serif with Sans-serif Latin and numbers.

• Latin / Numbers: Roboto
• Japanese: Noto Serif JP

Font files are delivered from:

fonts.novless.jp

Kernel Sans is used as the default.

:root {
  --font-family-base: "Kernel Sans", sans-serif;
}

Projects can override the default font without modifying Kernel.

:root {
  --font-family-base: "Kernel Serif", serif;
}

or:

:root {
  --font-family-base: "Kernel Serif JP", serif;
}

Font families can also be applied locally with utility classes.

<p class="k-font-sans">Kernel Sans</p>
<p class="k-font-serif">Kernel Serif</p>
<p class="k-font-serif-jp">Kernel Serif JP</p>

Layout

Kernel follows an 8px-based layout system.

Container

<div class="k-container">
  ...
</div>

The standard desktop container has a maximum outer width of 1184px, including horizontal padding.

Section

<section class="k-section">
  ...
</section>

k-section provides the standard vertical section spacing.

Project-specific layouts can override these values when necessary.

Accessibility

Visually hidden content can be created with:

<span class="k-visually-hidden">
  Screen reader text
</span>

Kernel aims to provide safe defaults that help projects maintain accessible interfaces without restricting project-specific design.

React

React components are provided as an optional adapter.

import { Button } from "@novless-jp/kernel/react";

React-specific styles can also be imported separately.

import "@novless-jp/kernel/react/styles.css";

The React layer uses the same tokens and design foundations as Kernel Core.

Package Structure

@novless-jp/kernel
├─ Core SCSS
├─ SCSS Tools
├─ React
└─ React Styles

Available package exports:

@novless-jp/kernel
@novless-jp/kernel/tools
@novless-jp/kernel/styles.css
@novless-jp/kernel/react
@novless-jp/kernel/react/styles.css

Design Principles

Kernel provides foundations, not project-specific design.

Kernel is responsible for:

• Color primitives
• Typography scale
• Spacing rules
• Layout foundations
• Font defaults
• Generic accessibility utilities
• Shared design tokens
• Reusable low-level UI foundations

Projects are responsible for:

• Brand colors
• Brand-specific UI
• Cards
• Navigation
• Project-specific components
• Project-specific layouts
• Visual expression

The goal is to provide safe defaults while keeping individual projects flexible.

License

Kernel is released under the MIT License.

See LICENSE for details.