Zero dependencies. Dark-mode first. WCAG 2.1 AA. Mobile nav, auto-contrast, dashboard charts, scroll animations — three files and you're live.
v2.1.0 through v2.5.0 added 7 new nav patterns, a full app-shell layout, a 28-token semantic layer, shape tokens — and a brand-new Social addon with 23+ components for feeds, DMs, profiles, and more.
23+ components for social interfaces — post feed (8 variants), action bar, compose modal, DM inbox & thread, reaction picker, profile tabs, media grid, story circles, notification bell, and more. Call DH.initSocial().
7 new navigation patterns — Back to Top, Floating Pill Nav, Stepper, Full-Screen Overlay Nav, Sticky ToC, Bottom Tab Bar, Command Palette. Plus a full App Shell with sidebar, main, aside, mobile drawer, and rail mode.
28 new alias tokens — --dh-color-on-primary, surface stack, status colours, focus ring, nav tokens. Override once in tokens.css and every component in every addon updates automatically.
Five new tokens — --dh-btn-radius (pill by default), --dh-card-radius, --dh-input-radius, --dh-modal-radius, --dh-drawer-width — wired to every relevant component. One override reshapes your entire UI.
Drop dotHello into any HTML file via CDN, or download the kit to host it yourself.
<!-- In <head> -->
<link rel="stylesheet" href="https://dot.hellodjt.com/cdn/latest/dothello.min.css">
<link rel="stylesheet" href="https://dot.hellodjt.com/cdn/latest/tokens.css">
<!-- Before </body> -->
<script src="https://dot.hellodjt.com/cdn/latest/dothello.min.js"></script>
<script>DH.init();</script><!-- In <head> -->
<link rel="stylesheet" href="https://dot.hellodjt.com/cdn/v2.5.0/dothello.min.css">
<link rel="stylesheet" href="https://dot.hellodjt.com/cdn/v2.5.0/tokens.css">
<!-- Before </body> -->
<script src="https://dot.hellodjt.com/cdn/v2.5.0/dothello.min.js"></script>
<script>DH.init();</script>/* tokens.css — your brand in one file */
:root {
--dh-color-primary: #6366f1; /* brand colour */
--dh-color-dark: #0d0f1a; /* page background */
--dh-font-body: 'Inter', sans-serif;
--dh-anim-duration: 400ms; /* scroll reveal speed */
}<!-- Single element -->
<div data-dh-reveal="fade">Fades in on scroll</div>
<div data-dh-reveal="slide-up">Slides up on scroll</div>
<!-- Auto-stagger children -->
<div data-dh-stagger>
<div data-dh-reveal="zoom">Card 1</div>
<div data-dh-reveal="zoom">Card 2 (80ms delay)</div>
<div data-dh-reveal="zoom">Card 3 (160ms delay)</div>
</div>dotHello is built in layers. Core gives you a complete design system in three files. Addons snap on top — each a self-contained CSS + JS pair — activated only on the pages that need them.
DH.initDashboard().DH.GenAI.init().DH.Transport.init().DH.Media.init().DH.Commerce.init().DH.initSocial().All seven scroll-reveal variants, driven by CSS custom properties. Fully WCAG 2.3.3 compliant.
Zero JS when animation-timeline: scroll() is supported. JS rAF fallback for all other browsers.
Click the button to swap panels — the same animation used on hellodjt card templates.
Click below to cross-dissolve to the back panel.
Any content here — QR code, contact details, links.
A selection of components included in dotHello. View the full component library →
Eyebrow
Supporting copy here.
Get startedLightweight, token-driven card component.
Every template uses only dotHello — no additional frameworks. Open in a new tab, view source, copy freely.
Product launch page with hero, features grid, social proof, pricing table, and email capture.
Open template ↗CloudSync-style SaaS page with feature sections, testimonials, and tiered pricing.
Open template ↗Creative agency showcase with project grid, service cards, team section, and contact form.
Open template ↗Episode listing with audio players, show notes, subscribe links, and guest profiles.
Open template ↗Artist landing page with tour dates, music player, merch section, and social links.
Open template ↗TechConf-style event page with countdown timer, speaker grid, schedule, and tickets CTA.
Open template ↗Pre-launch page with countdown, email waitlist capture, and social links.
Open template ↗These templates require an addon pair alongside dotHello Core. Each template notes which addon it needs.
Full-page analytics dashboard with sidebar nav, 4 stat cards, area + bar + donut + line charts, sortable data table, activity feed, and goal progress bars.
Open template →Full interactive catalog of 32 GenAI components — prompt inputs, streaming text, tool use, citations, model selector, step tracker, toasts, and more.
Open template →Full interactive catalog of 18 transport components — booking widget, fare cards, seat map, departure board, boarding pass, live status tracker, ETA strip, fleet cards, and more.
Open template →Full interactive catalog of 14 commerce component families — product cards, cart, checkout, shipping options, payment, order tracking, reviews, discounts, invoices, and more.
Open template →20 interactive components for streaming, broadcast, and multimedia interfaces. Live TV player, video on-demand, music & audio, watch party, and more.
View Catalog →23+ interactive components for social media interfaces — post feed, action bar, compose modal, DM inbox & thread, reaction picker, profile tabs, story circles, notification bell, and more.
View Catalog →Override any token in your tokens.css to instantly rebrand the entire framework. No SASS, no build step.
hellodjt.com is built entirely on this framework — the card builder, dashboard, all card templates, and this very page. Same three files. No build step.