Typography
The type scale, weights, leading, and the four title roles every owned title samples.
- Source
src/stylesheets/nitro_kit/tokens.css- API
var(--nk-text-{size}), var(--nk-font-weight-{weight}), var(--nk-leading-{leading}), and var(--nk-title-{role}-{size,weight})
Type scale
Six sizes cover every owned text decision.
Every text size
--nk-text-xsThe quick brown fox jumps over the lazy dog
--nk-text-smThe quick brown fox jumps over the lazy dog
--nk-text-baseThe quick brown fox jumps over the lazy dog
--nk-text-lgThe quick brown fox jumps over the lazy dog
--nk-text-xlThe quick brown fox jumps over the lazy dog
--nk-text-2xlThe quick brown fox jumps over the lazy dog
test/dummy/app/components/gallery/foundations/typography_page.rbTYPE_SIZES.each do |size|
type_specimen(
"The quick brown fox jumps over the lazy dog",
token: "--nk-text-#{size}",
style: "--gallery-type-size: var(--nk-text-#{size})"
)
endWeights and leading
Four weights and three leadings pair with the scale.
Every weight
--nk-font-weight-normalSignals over ceremony
--nk-font-weight-mediumSignals over ceremony
--nk-font-weight-semiboldSignals over ceremony
--nk-font-weight-boldSignals over ceremony
test/dummy/app/components/gallery/foundations/typography_page.rbWEIGHTS.each do |weight|
type_specimen(
"Signals over ceremony",
token: "--nk-font-weight-#{weight}",
style: "--gallery-type-weight: var(--nk-font-weight-#{weight})"
)
endEvery leading
--nk-leading-tightLines set close read as one thought. Lines set open read as a list. The leading decides before the words do.
--nk-leading-normalLines set close read as one thought. Lines set open read as a list. The leading decides before the words do.
--nk-leading-relaxedLines set close read as one thought. Lines set open read as a list. The leading decides before the words do.
test/dummy/app/components/gallery/foundations/typography_page.rbLEADINGS.each do |leading|
type_specimen(
"Lines set close read as one thought. Lines set open read as a list. The leading decides before the words do.",
token: "--nk-leading-#{leading}",
style: "--gallery-type-leading: var(--nk-leading-#{leading})"
)
endTitle roles
Every owned title and legend samples one of four roles, so the hierarchy is stated once and themeable.
Every title role
--nk-title-page-sizeThe one page heading
PageHeader--nk-title-section-sizeFull-width section headers
DataSection, SettingsSection, DangerZone--nk-title-surface-sizePanels and fieldsets
Dialog, Sheet, EmptyState, Fieldset--nk-title-compact-sizeLegends and status titles
Alert, Toast, CheckboxGroup, RadioButtonGroup, AppearancePickertest/dummy/app/components/gallery/foundations/typography_page.rbTITLE_ROLES.each do |role, job, consumers|
figure(data: { gallery: "title-specimen", gallery_title_role: role }) do
figcaption do
strong { role.to_s.capitalize }
code { "--nk-title-#{role}-size" }
end
p(data: { gallery: "title-specimen-text" }) { job }
small { consumers }
end
endA surface title in context
Quarterly invoices
The empty state title above samples the surface role.
test/dummy/app/components/gallery/foundations/typography_page.rbrender NitroKit::EmptyState.new(
id: "gallery-typography-surface",
title: "Quarterly invoices",
description: "The empty state title above samples the surface role."
)System rules for coding agents
Instructions for coding agents, repeated on every component page so one fetched page has enough context. Humans can usually skip this section.
test/dummy/app/components/gallery/agent_rules.rb
View agent instructions
- Nitro Kit 2.0 is a gem-owned, Phlex-only UI system for Rails. Render components directly:
render NitroKit::Button.new("Save", variant: :primary). - Compose Nitro components inside application-owned Phlex classes. Public initializers and declared slots are the component API; private methods are not.
- Public options are explicit keywords, and enumerated options are closed vocabularies. Invalid names or values raise
ArgumentError; this component's accepted options are in the contract above. - Pass native attributes through their typed boundary:
html:for HTML,aria:for ARIA, anddata:for application data.classandstyleare forbidden, including insidehtml:. - Nitro owns
NitroKit::Component::RESERVED_DATA_ATTRIBUTES:data-nk,data-slot,data-variant,data-size,data-nk-escape,data-enhanced,data-state,data-disabled,data-required,data-orientation,data-presentation,data-placement,data-layout,data-side,data-field-type,data-dir,data-gap,data-align,data-justify,data-wrap,data-cols,data-mode,data-key. Do not pass them throughdata:.data-action,data-controllerare additive and compose with Nitro behavior. - If an integration truly requires a class, use
desperately_need_a_class:. It requires a non-blank String and marks the exception withdata-nk-escape="class". - Every root emits
data-nk; owned parts emit component-qualifieddata-slotvalues such asfield-controlorcard-title. Select on those attributes, never on classes. - Customize components with documented
--nk-*custom properties in an application stylesheet. Variables beginning with--_nk-*are private component mechanics. - Use
NitroKit::FlexandNitroKit::Gridfor layout. Parents own external placement and available width; components own their intrinsic geometry. - Preserve native elements and accessibility semantics. State is exposed through native semantics and ARIA first, and through
data-statewhen styling or behavior also needs it.