Drakenote CSS

A Tailwind CSS framework for hand-drawn, sketchnote-style tech journals and infographics.

Turn your content into a cream-paper, marker-and-ink tech journal. Drakenote CSS ships a token system (ink, paper, and six marker colors), a 12-column sketchnote board layout, and a full component library — cards, icon circles, flow diagrams, checklists, quote bubbles, and code panels — all styled with dashed borders, offset "sketch" shadows, and rounded hand-drawn edges.

Live Demo →

Installation

npm

npm install @greendrakestudio/drakenotecss

Then link the compiled CSS in your HTML:

<link
  rel="stylesheet"
  href="node_modules/@greendrakestudio/drakenotecss/dist/drakenote.css"
/>

CDN (jsDelivr)

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@greendrakestudio/drakenotecss/dist/drakenote.css"
/>

Quick Start

Wrap your content in .dn-scope and .dn-paper-texture, then use .dn-board for the grid:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@greendrakestudio/drakenotecss/dist/drakenote.css"
/>

<div class="dn-scope dn-paper-texture">
  <div class="dn-board">
    <div class="dn-card dn-span-6 dn-card--purple">
      <div class="dn-card__header">
        <span class="dn-icon-circle dn-icon-circle--purple">✨</span>
        <h3>Hello Drakenote</h3>
      </div>
      <p>Your sketchnote content goes here.</p>
    </div>

    <div class="dn-card dn-span-6 dn-card--orange">
      <div class="dn-card__header">
        <span class="dn-icon-circle dn-icon-circle--orange">🎨</span>
        <h3>Another Card</h3>
      </div>
      <p>Mix and match colors and components.</p>
    </div>
  </div>
</div>

Components

| Component | Class | | ------------ | ------------------------------------------------------------------------------ | | Grid layout | .dn-board, .dn-span-{1–12} | | Card | .dn-card, .dn-card--{color}, .dn-card--fill-{color}, .dn-card--dashed | | Icon circle | .dn-icon-circle, .dn-icon-circle--{color} | | Flow diagram | .dn-flow, .dn-flow__step, .dn-flow__arrow, .dn-flow__label | | Checklist | .dn-checklist | | Callout | .dn-callout | | Quote | .dn-quote | | Code block | .dn-code | | Chip / tag | .dn-chip, .dn-chip-row | | Stack list | .dn-stacklist | | Header | .dn-header, .dn-title, .dn-subtitle, .dn-daytab | | Utilities | .dn-muted, .dn-center, .dn-rotate-l, .dn-rotate-r, .dn-mark--{color} |

Colors: purple · orange · blue · green · yellow · pink

Development

# Watch mode
npx @tailwindcss/cli -i ./src/drakenote.css -o ./dist/drakenote.css --watch

# Production build
npm run build