Component
01

Drakenote CSS β€” Component Demo

All framework components, used for testing & as a style guide
πŸ‰ Green Drake Studio β€” sketchnote design system
🎨Tokens
πŸƒCards
➑️Flow
βœ…Checklist
πŸ’‘Callout
πŸ’¬Quote
1. Color tokens
purple
orange
blue
green
yellow
pink
ink
paper
bg

Font families: Baloo 2 (display) Β· Nunito (body) Β· Fira Code (code)

2. Icon circles
βšͺdefault
✨purple
🎨orange
πŸƒblue
βœ…green
⭐yellow
πŸ’¬pink
3. Cards
✨

dn-card--purple

Basic card with a theme-color border. Use .dn-card--purple, .dn-card--orange, .dn-card--blue, .dn-card--green, .dn-card--yellow, .dn-card--pink.

Highlight text: marker purple, marker orange, marker green, marker blue.

🧩

dn-card--fill-green

Card with a tinted background matching the theme color β€” add .dn-card--fill-{color} alongside the border color class.

πŸ’¬Chat
πŸ””Reminder
πŸ“ŠDashboard
πŸ”

dn-card--dashed β€” Flow diagram

πŸ“ 1. Content Write outline
β†’
🎨 2. Assign color Pick topic color
β†’
πŸƒ 3. Arrange cards .dn-board grid
β†’
βœ… 4. Finalize Add takeaway
πŸš€ Each step only needs a new icon + label β€” no CSS rewrite needed.
πŸ“š

dn-stacklist

  • Layout.dn-board (12-col grid)
  • Card.dn-card + theme color
  • Diagram.dn-flow
  • Display fontBaloo 2
  • Body fontNunito
πŸ’»

dn-code

<div class="dn-card dn-card--purple"> <div class="dn-card__header"> <span class="dn-icon-circle dn-icon-circle--purple">✨</span> <h3>Title</h3> </div> <p>Card content…</p> </div>
A good framework is one where next time you only change the content, not the CSS.
πŸ“‹

dn-checklist

  • Extracting color tokens into CSS variables makes theme switching lightning fast.
  • Dashed borders + large rounded corners are the "signature" of the whole system.
  • A 12-column grid is flexible enough for any sketchnote layout.
πŸ’—

dn-card--pink

Pink is used for quotes/takeaways. Less common for main content, great for emotional notes.

πŸ’‘ dn-callout β€” sticky-note style tip, bo trΓ²n 999px, viền nΓ©t Δ‘α»©t.
4. Utilities

dn-center
dn-muted text

dn-rotate-l (-2deg)

dn-rotate-r (+2deg)