# Using the KB V1 standard

Start with the [integrated CSS consumer](../examples/components/css.html) or [scoped Sass consumer](../examples/components/sass.html). These use the same real fields, actions and surfaces. They are local examples: validation/reset work, but no data is saved or sent. The [landing page](../index.html) now embeds the accepted components. Its expandable reference area retains historical/extended material; use the current component sections and these references for V1 rules.

## CSS consumer

Copy theme.css, fields.css, actions.css and surfaces.css with their relative imports preserved (the generated files are standalone). Load theme.css first, then the component files you need. Set class=dark on the document root for dark mode. The consuming application owns preference persistence and runtime behavior. Theme CSS defines variables, not a page reset or a font download. Component CSS is optional. For local Noto Sans, load fonts.css and copy assets/fonts/noto-sans/ plus assets/licenses/NotoSans-OFL.txt, preserving paths.

Use a container with font-family:var(--kb-font-family-ui), color:var(--kb-text-primary) and background:var(--kb-background-page) when reproducing the accepted page gradient. Use actual component classes and native elements from the examples. Consumer layout.css is demonstration layout, not part of the shared component API.

## Sass consumer

```scss
@use './path/to/scss' as kb;
@include kb.theme($selector: '.application', $dark-selector: '.application.dark');
.application {
  @include kb.fields();
  @include kb.actions();
  @include kb.surfaces();
}
```

See examples/components/consumer.scss and generated consumer.css. Importing the API alone emits no styles. Scope the optional mixins if existing application classes must remain isolated. Do not load both the compiled scoped component bundle and the global component files for the same scope. Token maps support bounded overrides; retain verified source roles and check changed backdrops/state contrast.

## Build and verify

Run npm ci, npm run build:theme, build:fields, build:actions, build:surfaces and build:examples. Run check:theme, check:fields, check:actions, check:surfaces and test:theme before distributing generated files. Sass is pinned in package-lock.json. Do not edit generated CSS manually. Runtime consumers of generated CSS do not need Sass or npm.

[Rendered consumer evidence](reference/integrated-verification.json) compares CSS and scoped Sass field styles in both themes at 1200/390/320px, validates native required/reset/disabled behavior and records actual browser fonts. Existing component-specific evidence covers the full state matrices; this integrated check does not replace those audits.

## Current rules and limits

- [Typography](typography-baseline.md), [fields](fields-usage.md), [actions](actions-usage.md), [surfaces](surfaces-usage.md), [icons](icons-usage.md).
- Noto Sans must actually be loaded. The current references use optional local fonts.css and seven unmodified normal faces (300–900), with upstream URLs/SHA-256 hashes in assets/fonts/noto-sans/provenance.json and the SIL OFL notice in assets/licenses/NotoSans-OFL.txt. Keep the notice with distributions. Assets total approximately 3.90 MB; browsers request only needed faces. Italics are not supplied. The established platform fallback chain remains if font files fail; fallback is usable but not visual parity.
- WSDMM Central is the baseline; source-specific conflicts and intentional contrast refinements are documented per component. Earlier screenshots and the old skill do not override current files.
- Icons are optional in buttons. Use native controls, associated labels, accessible action names and one clear keyboard focus indicator.
- Chromium checks are local evidence. Supported-browser coverage, assistive technology, virtual keyboards, application-specific backdrops remain integration/handoff work.
- No application repository migration, package publication or pushes are included. Teams will apply the final skill to their apps later.

## Integration and font verification

[119 local links/assets](reference/integration-links.json) resolve across the landing page and current component/consumer references. [Blocked-external-request font checks](reference/local-font-verification.json) record actual custom Noto Sans glyph rendering at all seven supplied weights across nine current pages. This verifies local font availability, not a service worker or an offline application package. The rebuilt landing uses local fonts and actual shared components; its expandable reference archive is historical/extended material. Fonts are separate from theme CSS so teams can opt in or supply their own approved hosting.

## Team adoption skill

Use [kb-design-standard](../skills/kb-design-standard/SKILL.md) for subsequent application work. The [handoff notes](handoff.md) identify reusable artifacts and installation assumptions. The skill uses current source files and documents the superseded old-skill rules; it does not authorize an application migration by itself.