Design system · Bootstrap 5 + jQuery

Faceted Heat on Quiet Paper

Complete component reference for Nitro Tech Media. Tokens, patterns, and interaction states built on Bootstrap CSS with jQuery behaviors.

Browse tokens How to use

Usage

Load Bootstrap 5, then the Nitro theme layer, then jQuery + Bootstrap JS + ntm-ds.js.

<link href="bootstrap.min.css" rel="stylesheet"/>
<link href="/assets/css/ntm-ds.css" rel="stylesheet"/>
<body class="ntm-ds">…</body>
<script src="jquery.min.js"></script>
<script src="bootstrap.bundle.min.js"></script>
<script src="/assets/js/ntm-ds.js"></script>

Colors

Warm near-white canvases, Coffee Bean ink/void, and a yellow→orange→red heat spectrum for accents and primary actions.

Canvas
#FBF9F7
--ntm-canvas
Canvas elevated
#FFFFFF
--ntm-canvas-elevated
Ink
#241915
--ntm-ink
Ink muted
#5C534E
--ntm-ink-muted
Ink faint
#8A827C
--ntm-ink-faint
Void
#241915
--ntm-void
Void elevated
#2E2520
--ntm-void-elevated
Heat amber
#F6C300
--ntm-heat-amber
Heat gold
#E0AD00
--ntm-heat-gold
Heat orange
#F08E00
--ntm-heat-orange
Heat red
#D42517
--ntm-heat-red
Heat brick
#C21920
--ntm-heat-brick

Signature gradient

--ntm-heat-spectrum: primary buttons, accent rules, focus energy.

Typography

Display: Outfit. Body/UI: Manrope. Sentence case for UI; all-caps reserved for logo lockups and rare labels.

Display · .ntm-display

Software that ships

H1 · .ntm-h1

Core capabilities

H2 · .ntm-h2

How we engineer & deliver

H3 · .ntm-h3

Custom web applications

Body / lead

Body at 17px with 1.6 line-height for long reading.

Lead text supports a short section intro without competing with the headline.

Inline link · .ntm-link

Explore buttons

Buttons

12px radius, not full pills. Primary uses heat spectrum; secondary is hairline; ghost is text-forward.

Hover: lift + stronger heat glow. Active: slight scale down. Focus-visible: orange ring.

Cards

Hairline borders over heavy shadows. Cards only for interactive hit areas (pillars, work tiles).

Pillar card

Equal-weight capability cell with heat accent and text CTA.

Explore

Case study

Media card

Image scales 1.03 on hover. Captions stay below, no sticker overlays.

Void card

For dark delivery bands, three points max, no staircase process chrome.

Forms

Quiet fields, heat focus ring, jQuery validation via data-ntm-validate.

Enter a valid email.
We reply with a practical next step.

Icons

Thin geometric strokes. No Material filled blobs in colored circles. Optional tile for list intros.

Sizes: .ntm-icon--sm · default · --lg · --xl

Section spacing

Section padding scales with viewport. Trust strips use the compact variant.

.ntm-section

padding-block: clamp(4rem, 8vw, 7.5rem)

.ntm-section--sm

clamp(2.5rem, 5vw, 4rem)

Content width

--ntm-content: 72rem
--ntm-content-narrow: 42rem

.ntm-section--low

Alternating light band for proof / work.

Hover states

  • Primary button: lift −2px, stronger heat shadow, slight brightness
  • Secondary button: border darkens, soft fill
  • Text link: underline grows to full width
  • Interactive card: border shifts toward heat-orange, optional lift
  • Media card image: scale 1.03
  • Nav link: ink darkens; active uses red + orange underline
  • Focus-visible: orange outline / heat field ring on inputs

Mobile behavior

  • Nav: Bootstrap collapse; links close the panel on tap (jQuery)
  • Buttons in rows: full width under 576px via .ntm-btn-row
  • Footer: section titles become collapse toggles below md
  • Pillars / cards: 1 col → 2 → 4 using Bootstrap grid
  • Reduced motion: reveals and hover transitions disabled when preferred
  • Touch: hover-lift helpers skipped when (hover: none)

Breakpoint language follows Bootstrap 5 (sm 576 · md 768 · lg 992 · xl 1200).