Hand-Drawn - Free HTML/CSS UI Kit
Whimsical, sketchy components featuring custom organic squiggly borders, notebook paper themes, and beautiful handwritten details.
Download Full Kit (.zip)
Complete kit with all components & styles
Just need one component?
Download base.css and add the following line to your HTML:
<link rel="stylesheet" href="base.css">
Then grab a component below and add it to your HTML.
Color Palette
Notebook Paper
#FCFBF7
Ink Blue
#2B6CB0
Pencil Graphite
#2D3748
Highlighter Yellow
#FEFCBF
Eraser Pink
#F687B3
Typography
Hero Sections
Sketchy Centered Hero
HTML
<section class="hd-hero-centered">
<div class="hd-hero-badge">
<span class="hd-badge-arrow">✎</span>
Sketch Atelier v1.0 --active
</div>
<h1 class="hd-hero-title">
The Beauty of <span class="hd-highlight bg-yellow">Organic Sketching</span>.<br>
Curated by Hand.
</h1>
<p class="hd-hero-subtitle">Deploy organic, hand-drawn responsive grids, sketched pencil buttons, and stunning sketchy notebooks components in just seconds.</p>
<div class="hd-hero-actions">
<a href="#" class="hd-btn hd-btn-primary">Draw Canvas!</a>
<a href="#" class="hd-btn hd-btn-outline">Read Notebook</a>
</div>
<div class="hd-hero-canvas hd-surface">
<div class="hd-canvas-header">
<div class="hd-binder-rings">
<span class="hd-ring"></span>
<span class="hd-ring"></span>
<span class="hd-ring"></span>
<span class="hd-ring"></span>
<span class="hd-ring"></span>
</div>
<div class="hd-canvas-title">~ / sketchpad-core / line-layer</div>
</div>
<div class="hd-canvas-grid">
<div class="hd-canvas-left">
<div class="hd-sketch-card">
<svg viewBox="0 0 24 24" width="36" height="36" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
<div class="hd-sketch-text">
<h3>12,480 Lines</h3>
<p>Sketched Layer Volume</p>
</div>
</div>
</div>
<div class="hd-canvas-right">
<div class="hd-code-line"><span class="h-blue">let</span> artist = <span class="h-pink">new</span> <span class="h-yellow">PencilArtist</span>();</div>
<div class="hd-code-line">artist.<span class="h-blue">draw</span>({ style: <span class="h-pink">"sketchy"</span> });</div>
<div class="hd-code-line">console.<span class="h-blue">log</span>(<span class="h-pink">"Canvas Rendered!"</span>);</div>
</div>
</div>
</div>
</section>
CSS (Component Only)
/* Component: Sketchy Centered Hero */
/* NOTE: This component requires base.css to be included in your page. */
.hd-hero-centered {
max-width: 1000px;
margin: 4rem auto;
padding: 0 2rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.hd-hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 1.25rem;
border: var(--hd-border-width) dashed var(--hd-border);
border-radius: var(--hd-radius-btn);
font-family: var(--hd-font-heading);
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 2rem;
transform: rotate(-1.5deg);
background-color: var(--hd-surface);
box-shadow: var(--hd-shadow-sm);
}
.hd-badge-arrow {
font-size: 1.2rem;
display: inline-block;
animation: hd-wiggle 1.5s infinite alternate;
}
@keyframes hd-wiggle {
0% { transform: rotate(0deg); }
100% { transform: rotate(15deg); }
}
.hd-hero-title {
font-size: 4rem;
line-height: 1.2;
margin-bottom: 2rem;
max-width: 850px;
}
.hd-highlight {
padding: 0.1rem 0.75rem;
border: 2px solid var(--hd-border);
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
display: inline-block;
transform: rotate(-1deg);
box-shadow: var(--hd-shadow-sm);
}
.hd-hero-subtitle {
font-size: 1.25rem;
max-width: 650px;
margin-bottom: 3rem;
line-height: 1.7;
font-weight: 600;
}
.hd-hero-actions {
display: flex;
gap: 1.5rem;
margin-bottom: 5rem;
}
/* Notebook Sketchbook Canvas */
.hd-hero-canvas {
width: 100%;
padding: 0 !important;
overflow: hidden;
background-color: var(--hd-surface) !important;
border: var(--hd-border-width) solid var(--hd-border) !important;
border-radius: 20px 25px 20px 22px / 22px 20px 25px 20px !important;
box-shadow: var(--hd-shadow-lg) !important;
}
.hd-hero-canvas:hover {
transform: translate(-2px, -2px);
box-shadow: 10px 12px 0px var(--hd-border) !important;
}
.hd-canvas-header {
padding: 1.25rem 2rem;
border-bottom: var(--hd-border-width) solid var(--hd-border);
display: flex;
align-items: center;
position: relative;
background-color: #faf9f6;
}
.hd-binder-rings {
display: flex;
gap: 0.65rem;
}
.hd-ring {
width: 12px;
height: 28px;
border: var(--hd-border-width) solid var(--hd-border);
border-radius: 8px;
background-color: #e2e8f0;
box-shadow: inset 2px 0px 0px rgba(0,0,0,0.1);
transform: translateY(-8px);
}
.hd-canvas-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: var(--hd-font-heading);
font-size: 0.95rem;
font-weight: 700;
color: var(--hd-text);
}
.hd-canvas-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 2rem;
padding: 2.5rem;
text-align: left;
}
.hd-canvas-left {
display: flex;
align-items: center;
}
.hd-sketch-card {
display: flex;
align-items: center;
gap: 1.25rem;
background-color: #fffdec;
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-card);
padding: 1.5rem 2rem;
width: 100%;
box-shadow: var(--hd-shadow-sm);
transform: rotate(-1deg);
}
.hd-sketch-text h3 {
font-size: 1.85rem;
color: var(--hd-text);
margin-bottom: 0.15rem;
}
.hd-sketch-text p {
font-size: 0.9rem;
font-weight: 700;
}
.hd-canvas-right {
display: flex;
flex-direction: column;
justify-content: center;
font-family: monospace;
font-size: 0.95rem;
font-weight: 700;
gap: 0.85rem;
background-color: #f7fafc;
border: var(--hd-border-width) dashed var(--hd-border);
padding: 2rem;
border-radius: var(--hd-radius-btn);
box-shadow: var(--hd-shadow-sm);
transform: rotate(1deg);
}
.h-blue { color: #1a56db; }
.h-pink { color: var(--hd-accent); }
.h-yellow { color: #b7791f; }
@media (max-width: 768px) {
.hd-hero-title { font-size: 2.75rem; }
.hd-hero-actions { flex-direction: column; width: 100%; gap: 1rem; }
.hd-hero-actions .hd-btn { width: 100%; }
.hd-canvas-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Patrick+Hand&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--hd-bg: #FCFBF7; /* Soft notebook paper */
--hd-surface: #FFFFFF;
--hd-primary: #2B6CB0; /* Deep Ink Blue */
--hd-secondary: #FEFCBF; /* Highlighter Yellow */
--hd-accent: #F687B3; /* Eraser Pink */
--hd-success: #48BB78; /* Highlighter Green */
--hd-danger: #E53E3E; /* Red Marker */
--hd-text: #2D3748; /* Dark Graphite Pencil */
--hd-text-muted: #718096;
--hd-text-light: #A0AEC0;
--hd-border: #2D3748;
--hd-border-width: 2.5px;
/* Squiggly Hand-Drawn Radii */
--hd-radius-card: 255px 15px 225px 15px / 15px 225px 15px 255px;
--hd-radius-btn: 20px 5px 20px 5px / 5px 20px 5px 20px;
--hd-radius-circle: 50% 50% 50% 50% / 50% 50% 50% 50%;
--hd-font-heading: 'Architects Daughter', cursive;
--hd-font-body: 'Patrick Hand', cursive;
--hd-transition: all 0.2s ease;
--hd-shadow: 4px 5px 0px #2D3748;
--hd-shadow-lg: 6px 8px 0px #2D3748;
--hd-shadow-sm: 2px 3px 0px #2D3748;
--hd-shadow-press: 1px 1px 0px #2D3748;
}
body {
margin: 0;
font-family: var(--hd-font-body);
font-size: 1.15rem;
color: var(--hd-text);
background-color: var(--hd-bg);
-webkit-font-smoothing: antialiased;
}
/* Notebook Surface Container */
.hd-surface {
background-color: var(--hd-surface);
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-card);
padding: 2.5rem;
box-shadow: var(--hd-shadow);
position: relative;
transition: var(--hd-transition);
}
/* Global Logo */
.hd-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--hd-font-heading);
font-size: 1.35rem;
font-weight: 700;
color: var(--hd-text);
transition: var(--hd-transition);
}
.hd-logo:hover {
transform: rotate(-3deg) scale(1.05);
}
.hd-logo-icon {
width: 38px;
height: 38px;
border-radius: var(--hd-radius-circle);
background-color: var(--hd-secondary);
border: var(--hd-border-width) solid var(--hd-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--hd-font-heading);
font-size: 1.25rem;
font-weight: 700;
box-shadow: var(--hd-shadow-sm);
transform: rotate(4deg);
}
/* Global Buttons */
.hd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 2rem;
font-family: var(--hd-font-heading);
font-size: 1.05rem;
font-weight: 700;
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-btn);
cursor: pointer;
text-decoration: none;
box-shadow: var(--hd-shadow);
transition: var(--hd-transition);
gap: 0.5rem;
background-color: var(--hd-surface);
color: var(--hd-text);
}
.hd-btn:active {
transform: translate(3px, 4px);
box-shadow: var(--hd-shadow-press);
}
.hd-btn-primary {
background-color: var(--hd-secondary); /* Highlighter Yellow focus! */
}
.hd-btn-primary:hover {
background-color: #fef08a;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-outline {
background-color: var(--hd-surface);
}
.hd-btn-outline:hover {
background-color: #faf9f6;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-accent {
background-color: var(--hd-accent); /* Eraser pink */
}
.hd-btn-accent:hover {
background-color: #f472b6;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-ghost {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
.hd-btn-ghost:hover {
border-color: var(--hd-border);
background-color: rgba(254, 252, 191, 0.4);
box-shadow: var(--hd-shadow-sm);
transform: rotate(-1deg);
}
.hd-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: var(--hd-radius-circle) !important;
}
.hd-btn-block {
width: 100%;
}
/* Pencil Input Fields */
.hd-input {
width: 100%;
padding: 0.8rem 1.2rem;
border: var(--hd-border-width) dashed var(--hd-border);
border-radius: var(--hd-radius-btn);
font-family: var(--hd-font-body);
font-size: 1.15rem;
color: var(--hd-text);
background-color: var(--hd-surface);
outline: none;
transition: var(--hd-transition);
}
.hd-input::placeholder {
color: var(--hd-text-light);
}
.hd-input:focus {
border-style: solid;
background-color: #fffdec;
box-shadow: var(--hd-shadow-sm);
}
.hd-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: var(--hd-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--hd-font-heading);
margin: 0;
color: var(--hd-text);
line-height: 1.3;
}
p {
font-family: var(--hd-font-body);
line-height: 1.6;
margin: 0;
color: var(--hd-text-muted);
}
/* Helper Utilities */
.text-ink { color: var(--hd-primary) !important; }
.text-pink { color: var(--hd-accent) !important; }
.text-muted { color: var(--hd-text-muted) !important; }
.bg-paper { background-color: var(--hd-bg) !important; }
.bg-yellow { background-color: var(--hd-secondary) !important; }
.bg-pink { background-color: var(--hd-accent) !important; }
.bg-green { background-color: var(--hd-success) !important; }
.bg-red { background-color: var(--hd-danger) !important; }
.bg-blue { background-color: #bee3f8 !important; }
/* --- COMPONENT STYLES --- */
.hd-hero-centered {
max-width: 1000px;
margin: 4rem auto;
padding: 0 2rem;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.hd-hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.4rem 1.25rem;
border: var(--hd-border-width) dashed var(--hd-border);
border-radius: var(--hd-radius-btn);
font-family: var(--hd-font-heading);
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 2rem;
transform: rotate(-1.5deg);
background-color: var(--hd-surface);
box-shadow: var(--hd-shadow-sm);
}
.hd-badge-arrow {
font-size: 1.2rem;
display: inline-block;
animation: hd-wiggle 1.5s infinite alternate;
}
@keyframes hd-wiggle {
0% { transform: rotate(0deg); }
100% { transform: rotate(15deg); }
}
.hd-hero-title {
font-size: 4rem;
line-height: 1.2;
margin-bottom: 2rem;
max-width: 850px;
}
.hd-highlight {
padding: 0.1rem 0.75rem;
border: 2px solid var(--hd-border);
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
display: inline-block;
transform: rotate(-1deg);
box-shadow: var(--hd-shadow-sm);
}
.hd-hero-subtitle {
font-size: 1.25rem;
max-width: 650px;
margin-bottom: 3rem;
line-height: 1.7;
font-weight: 600;
}
.hd-hero-actions {
display: flex;
gap: 1.5rem;
margin-bottom: 5rem;
}
/* Notebook Sketchbook Canvas */
.hd-hero-canvas {
width: 100%;
padding: 0 !important;
overflow: hidden;
background-color: var(--hd-surface) !important;
border: var(--hd-border-width) solid var(--hd-border) !important;
border-radius: 20px 25px 20px 22px / 22px 20px 25px 20px !important;
box-shadow: var(--hd-shadow-lg) !important;
}
.hd-hero-canvas:hover {
transform: translate(-2px, -2px);
box-shadow: 10px 12px 0px var(--hd-border) !important;
}
.hd-canvas-header {
padding: 1.25rem 2rem;
border-bottom: var(--hd-border-width) solid var(--hd-border);
display: flex;
align-items: center;
position: relative;
background-color: #faf9f6;
}
.hd-binder-rings {
display: flex;
gap: 0.65rem;
}
.hd-ring {
width: 12px;
height: 28px;
border: var(--hd-border-width) solid var(--hd-border);
border-radius: 8px;
background-color: #e2e8f0;
box-shadow: inset 2px 0px 0px rgba(0,0,0,0.1);
transform: translateY(-8px);
}
.hd-canvas-title {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: var(--hd-font-heading);
font-size: 0.95rem;
font-weight: 700;
color: var(--hd-text);
}
.hd-canvas-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 2rem;
padding: 2.5rem;
text-align: left;
}
.hd-canvas-left {
display: flex;
align-items: center;
}
.hd-sketch-card {
display: flex;
align-items: center;
gap: 1.25rem;
background-color: #fffdec;
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-card);
padding: 1.5rem 2rem;
width: 100%;
box-shadow: var(--hd-shadow-sm);
transform: rotate(-1deg);
}
.hd-sketch-text h3 {
font-size: 1.85rem;
color: var(--hd-text);
margin-bottom: 0.15rem;
}
.hd-sketch-text p {
font-size: 0.9rem;
font-weight: 700;
}
.hd-canvas-right {
display: flex;
flex-direction: column;
justify-content: center;
font-family: monospace;
font-size: 0.95rem;
font-weight: 700;
gap: 0.85rem;
background-color: #f7fafc;
border: var(--hd-border-width) dashed var(--hd-border);
padding: 2rem;
border-radius: var(--hd-radius-btn);
box-shadow: var(--hd-shadow-sm);
transform: rotate(1deg);
}
.h-blue { color: #1a56db; }
.h-pink { color: var(--hd-accent); }
.h-yellow { color: #b7791f; }
@media (max-width: 768px) {
.hd-hero-title { font-size: 2.75rem; }
.hd-hero-actions { flex-direction: column; width: 100%; gap: 1rem; }
.hd-hero-actions .hd-btn { width: 100%; }
.hd-canvas-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
Hand-Drawn Split Hero
HTML
<section class="hd-hero-split">
<div class="hd-split-grid">
<div class="hd-split-content">
<h1 class="hd-split-title">Draft Ideas.<br><span class="hd-highlight bg-yellow">Ink Content</span>.</h1>
<p class="hd-split-desc">A premium hand-drawn sketchbook UI built with uneven border radius variables, gorgeous marker highlights, and realistic graphite text layers.</p>
<div class="hd-split-actions">
<a href="#" class="hd-btn hd-btn-primary">Connect Draft!</a>
<a href="#" class="hd-btn hd-btn-outline">Open Journal</a>
</div>
</div>
<div class="hd-split-visual">
<div class="hd-visual-main bg-paper">
<div class="hd-visual-header">
<span class="hd-visual-title">Sketch Index</span>
<span class="hd-badge bg-blue" style="border: 2px solid var(--hd-border); font-size: 0.8rem; font-weight: 700; border-radius: var(--hd-radius-btn);">Layer 01</span>
</div>
<div class="hd-visual-metric text-pink">84.5%</div>
<p class="hd-visual-desc">Average organic handdrawn curvature fidelity across active nodes.</p>
</div>
<div class="hd-visual-overlay bg-yellow">
<div class="hd-profile-card">
<div class="hd-profile-avatar">
<img src="https://i.pravatar.cc/100?img=33" alt="Avatar">
</div>
<div class="hd-profile-info">
<h4>Sarah Jenkins</h4>
<p class="text-ink">Sketch Artist</p>
</div>
</div>
</div>
</div>
</div>
</section>
CSS (Component Only)
/* Component: Hand-Drawn Split Hero */
/* NOTE: This component requires base.css to be included in your page. */
.hd-hero-split {
max-width: 1200px;
margin: 4rem auto;
padding: 0 2rem;
}
.hd-split-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 5rem;
align-items: center;
}
.hd-split-content {
text-align: left;
}
.hd-split-title {
font-size: 4rem;
line-height: 1.2;
margin-bottom: 2rem;
}
.hd-split-desc {
font-size: 1.25rem;
color: var(--hd-text-muted);
margin-bottom: 3rem;
line-height: 1.7;
font-weight: 600;
}
.hd-split-actions {
display: flex;
gap: 1.5rem;
}
/* Staggered Organic Overlapping Cards */
.hd-split-visual {
position: relative;
height: 480px;
display: flex;
align-items: center;
justify-content: center;
}
.hd-visual-main {
width: 310px;
padding: 1.75rem !important;
position: absolute;
top: 2rem;
left: 1.5rem;
z-index: 2;
transform: rotate(-3.5deg);
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-card);
box-shadow: var(--hd-shadow-lg);
transition: var(--hd-transition);
}
.hd-visual-main:hover {
transform: rotate(-1.5deg) translate(-2px, -2px);
box-shadow: 8px 10px 0px var(--hd-border);
}
.hd-visual-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.hd-visual-title {
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: var(--hd-text);
}
.hd-badge {
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 0.8rem;
padding: 0.2rem 0.6rem;
}
.hd-visual-metric {
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 3.5rem;
margin-bottom: 0.5rem;
line-height: 1;
}
.hd-visual-desc {
max-width: 58%;
font-size: 0.95rem;
line-height: 1.5;
font-weight: 600;
}
.hd-visual-overlay {
width: 210px;
padding: 1.15rem !important;
position: absolute;
top: 16.5rem;
right: 0.5rem;
z-index: 3;
transform: rotate(2.5deg);
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-btn);
box-shadow: var(--hd-shadow);
transition: var(--hd-transition);
}
.hd-visual-overlay:hover {
transform: rotate(0.5deg) translate(-2px, -2px);
box-shadow: 6px 7px 0px var(--hd-border);
}
.hd-profile-card {
display: flex;
align-items: center;
gap: 0.85rem;
}
.hd-profile-avatar {
width: 42px;
height: 42px;
border-radius: var(--hd-radius-circle);
border: 2px solid var(--hd-border);
overflow: hidden;
flex-shrink: 0;
transform: rotate(-3deg);
}
.hd-profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hd-profile-info h4 {
font-family: var(--hd-font-heading);
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 0.15rem;
}
.hd-profile-info p {
font-size: 0.85rem;
font-weight: 600;
margin: 0;
}
@media (max-width: 900px) {
.hd-split-grid {
grid-template-columns: 1fr;
gap: 4rem;
text-align: center;
}
.hd-split-content {
display: flex;
flex-direction: column;
align-items: center;
}
.hd-split-actions {
justify-content: center;
}
.hd-split-visual {
max-width: 450px;
margin: 0 auto;
}
}
@media (max-width: 480px) {
.hd-split-title { font-size: 2.75rem; }
.hd-visual-main { width: 280px; left: 0; }
.hd-visual-overlay { width: 190px; right: 0; top: 18rem; }
.hd-split-actions { flex-direction: column; width: 100%; gap: 1rem; }
.hd-split-actions .hd-btn { width: 100%; }
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Patrick+Hand&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--hd-bg: #FCFBF7; /* Soft notebook paper */
--hd-surface: #FFFFFF;
--hd-primary: #2B6CB0; /* Deep Ink Blue */
--hd-secondary: #FEFCBF; /* Highlighter Yellow */
--hd-accent: #F687B3; /* Eraser Pink */
--hd-success: #48BB78; /* Highlighter Green */
--hd-danger: #E53E3E; /* Red Marker */
--hd-text: #2D3748; /* Dark Graphite Pencil */
--hd-text-muted: #718096;
--hd-text-light: #A0AEC0;
--hd-border: #2D3748;
--hd-border-width: 2.5px;
/* Squiggly Hand-Drawn Radii */
--hd-radius-card: 255px 15px 225px 15px / 15px 225px 15px 255px;
--hd-radius-btn: 20px 5px 20px 5px / 5px 20px 5px 20px;
--hd-radius-circle: 50% 50% 50% 50% / 50% 50% 50% 50%;
--hd-font-heading: 'Architects Daughter', cursive;
--hd-font-body: 'Patrick Hand', cursive;
--hd-transition: all 0.2s ease;
--hd-shadow: 4px 5px 0px #2D3748;
--hd-shadow-lg: 6px 8px 0px #2D3748;
--hd-shadow-sm: 2px 3px 0px #2D3748;
--hd-shadow-press: 1px 1px 0px #2D3748;
}
body {
margin: 0;
font-family: var(--hd-font-body);
font-size: 1.15rem;
color: var(--hd-text);
background-color: var(--hd-bg);
-webkit-font-smoothing: antialiased;
}
/* Notebook Surface Container */
.hd-surface {
background-color: var(--hd-surface);
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-card);
padding: 2.5rem;
box-shadow: var(--hd-shadow);
position: relative;
transition: var(--hd-transition);
}
/* Global Logo */
.hd-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--hd-font-heading);
font-size: 1.35rem;
font-weight: 700;
color: var(--hd-text);
transition: var(--hd-transition);
}
.hd-logo:hover {
transform: rotate(-3deg) scale(1.05);
}
.hd-logo-icon {
width: 38px;
height: 38px;
border-radius: var(--hd-radius-circle);
background-color: var(--hd-secondary);
border: var(--hd-border-width) solid var(--hd-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--hd-font-heading);
font-size: 1.25rem;
font-weight: 700;
box-shadow: var(--hd-shadow-sm);
transform: rotate(4deg);
}
/* Global Buttons */
.hd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 2rem;
font-family: var(--hd-font-heading);
font-size: 1.05rem;
font-weight: 700;
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-btn);
cursor: pointer;
text-decoration: none;
box-shadow: var(--hd-shadow);
transition: var(--hd-transition);
gap: 0.5rem;
background-color: var(--hd-surface);
color: var(--hd-text);
}
.hd-btn:active {
transform: translate(3px, 4px);
box-shadow: var(--hd-shadow-press);
}
.hd-btn-primary {
background-color: var(--hd-secondary); /* Highlighter Yellow focus! */
}
.hd-btn-primary:hover {
background-color: #fef08a;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-outline {
background-color: var(--hd-surface);
}
.hd-btn-outline:hover {
background-color: #faf9f6;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-accent {
background-color: var(--hd-accent); /* Eraser pink */
}
.hd-btn-accent:hover {
background-color: #f472b6;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-ghost {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
.hd-btn-ghost:hover {
border-color: var(--hd-border);
background-color: rgba(254, 252, 191, 0.4);
box-shadow: var(--hd-shadow-sm);
transform: rotate(-1deg);
}
.hd-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: var(--hd-radius-circle) !important;
}
.hd-btn-block {
width: 100%;
}
/* Pencil Input Fields */
.hd-input {
width: 100%;
padding: 0.8rem 1.2rem;
border: var(--hd-border-width) dashed var(--hd-border);
border-radius: var(--hd-radius-btn);
font-family: var(--hd-font-body);
font-size: 1.15rem;
color: var(--hd-text);
background-color: var(--hd-surface);
outline: none;
transition: var(--hd-transition);
}
.hd-input::placeholder {
color: var(--hd-text-light);
}
.hd-input:focus {
border-style: solid;
background-color: #fffdec;
box-shadow: var(--hd-shadow-sm);
}
.hd-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: var(--hd-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--hd-font-heading);
margin: 0;
color: var(--hd-text);
line-height: 1.3;
}
p {
font-family: var(--hd-font-body);
line-height: 1.6;
margin: 0;
color: var(--hd-text-muted);
}
/* Helper Utilities */
.text-ink { color: var(--hd-primary) !important; }
.text-pink { color: var(--hd-accent) !important; }
.text-muted { color: var(--hd-text-muted) !important; }
.bg-paper { background-color: var(--hd-bg) !important; }
.bg-yellow { background-color: var(--hd-secondary) !important; }
.bg-pink { background-color: var(--hd-accent) !important; }
.bg-green { background-color: var(--hd-success) !important; }
.bg-red { background-color: var(--hd-danger) !important; }
.bg-blue { background-color: #bee3f8 !important; }
/* --- COMPONENT STYLES --- */
.hd-hero-split {
max-width: 1200px;
margin: 4rem auto;
padding: 0 2rem;
}
.hd-split-grid {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 5rem;
align-items: center;
}
.hd-split-content {
text-align: left;
}
.hd-split-title {
font-size: 4rem;
line-height: 1.2;
margin-bottom: 2rem;
}
.hd-split-desc {
font-size: 1.25rem;
color: var(--hd-text-muted);
margin-bottom: 3rem;
line-height: 1.7;
font-weight: 600;
}
.hd-split-actions {
display: flex;
gap: 1.5rem;
}
/* Staggered Organic Overlapping Cards */
.hd-split-visual {
position: relative;
height: 480px;
display: flex;
align-items: center;
justify-content: center;
}
.hd-visual-main {
width: 310px;
padding: 1.75rem !important;
position: absolute;
top: 2rem;
left: 1.5rem;
z-index: 2;
transform: rotate(-3.5deg);
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-card);
box-shadow: var(--hd-shadow-lg);
transition: var(--hd-transition);
}
.hd-visual-main:hover {
transform: rotate(-1.5deg) translate(-2px, -2px);
box-shadow: 8px 10px 0px var(--hd-border);
}
.hd-visual-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.hd-visual-title {
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: var(--hd-text);
}
.hd-badge {
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 0.8rem;
padding: 0.2rem 0.6rem;
}
.hd-visual-metric {
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 3.5rem;
margin-bottom: 0.5rem;
line-height: 1;
}
.hd-visual-desc {
max-width: 58%;
font-size: 0.95rem;
line-height: 1.5;
font-weight: 600;
}
.hd-visual-overlay {
width: 210px;
padding: 1.15rem !important;
position: absolute;
top: 16.5rem;
right: 0.5rem;
z-index: 3;
transform: rotate(2.5deg);
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-btn);
box-shadow: var(--hd-shadow);
transition: var(--hd-transition);
}
.hd-visual-overlay:hover {
transform: rotate(0.5deg) translate(-2px, -2px);
box-shadow: 6px 7px 0px var(--hd-border);
}
.hd-profile-card {
display: flex;
align-items: center;
gap: 0.85rem;
}
.hd-profile-avatar {
width: 42px;
height: 42px;
border-radius: var(--hd-radius-circle);
border: 2px solid var(--hd-border);
overflow: hidden;
flex-shrink: 0;
transform: rotate(-3deg);
}
.hd-profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hd-profile-info h4 {
font-family: var(--hd-font-heading);
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 0.15rem;
}
.hd-profile-info p {
font-size: 0.85rem;
font-weight: 600;
margin: 0;
}
@media (max-width: 900px) {
.hd-split-grid {
grid-template-columns: 1fr;
gap: 4rem;
text-align: center;
}
.hd-split-content {
display: flex;
flex-direction: column;
align-items: center;
}
.hd-split-actions {
justify-content: center;
}
.hd-split-visual {
max-width: 450px;
margin: 0 auto;
}
}
@media (max-width: 480px) {
.hd-split-title { font-size: 2.75rem; }
.hd-visual-main { width: 280px; left: 0; }
.hd-visual-overlay { width: 190px; right: 0; top: 18rem; }
.hd-split-actions { flex-direction: column; width: 100%; gap: 1rem; }
.hd-split-actions .hd-btn { width: 100%; }
}
Forms
Sketchy Login Card
HTML
<div class="hd-login-card hd-surface bg-paper">
<div class="hd-login-header">
<h2>Enter Draft!</h2>
<p>Open your hand-drawn notebook spatial workspace.</p>
</div>
<form class="hd-login-form" onsubmit="return false;">
<div class="hd-form-group">
<label class="hd-label" for="login-email">Artist Address</label>
<input type="email" id="login-email" class="hd-input" placeholder="[email protected]" required>
</div>
<div class="hd-form-group">
<label class="hd-label" for="login-password">Pencil Code</label>
<input type="password" id="login-password" class="hd-input" placeholder="••••••••" required>
</div>
<div class="hd-form-options">
<label class="hd-checkbox-container">
<input type="checkbox" checked>
<span class="hd-checkmark"></span>
<span class="hd-checkbox-label">Keep Draft Active</span>
</label>
<a href="#" class="hd-forgot-link">Lost Pencil?</a>
</div>
<button type="submit" class="hd-btn hd-btn-primary hd-btn-block">Initialize Canvas!</button>
</form>
<div class="hd-login-divider">
<span>or sign in via crayon</span>
</div>
<div class="hd-social-login">
<button class="hd-btn hd-btn-circle hd-btn-outline" aria-label="Google Key">
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M12.24 10.285V13.4h6.887C18.2 15.614 15.645 18 12.24 18c-3.86 0-7-3.14-7-7s3.14-7 7-7c1.7 0 3.3.6 4.6 1.8l2.4-2.4C17.3 1.7 14.9 1 12.24 1c-5.5 0-10 4.5-10 10s4.5 10 10 10c5.8 0 9.8-4.1 9.8-10 0-.6 0-1.1-.1-1.7H12.24z"/></svg>
</button>
<button class="hd-btn hd-btn-circle hd-btn-outline" aria-label="GitHub Key">
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
</button>
</div>
</div>
CSS (Component Only)
/* Component: Sketchy Login Card */
/* NOTE: This component requires base.css to be included in your page. */
.hd-login-card {
max-width: 440px;
margin: 2rem auto;
padding: 3.5rem 3rem !important;
}
.hd-login-header {
text-align: center;
margin-bottom: 2.5rem;
}
.hd-login-header h2 {
font-size: 2.25rem;
margin-bottom: 0.75rem;
}
.hd-login-header p {
font-size: 1rem;
color: var(--hd-text-muted);
font-weight: 600;
}
.hd-login-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.hd-form-group {
display: flex;
flex-direction: column;
}
.hd-form-options {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.95rem;
margin-bottom: 0.5rem;
}
/* Custom Hand-Drawn Outlined Checkbox */
.hd-checkbox-container {
display: flex;
align-items: center;
position: relative;
cursor: pointer;
user-select: none;
gap: 0.6rem;
font-weight: 700;
color: var(--hd-text);
}
.hd-checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.hd-checkmark {
width: 20px;
height: 20px;
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-btn);
display: inline-block;
position: relative;
transition: var(--hd-transition);
background-color: var(--hd-surface);
box-shadow: var(--hd-shadow-sm);
transform: rotate(2deg);
}
.hd-checkbox-container:hover input ~ .hd-checkmark {
transform: translate(-1px, -1px) scale(1.05);
box-shadow: 3px 3px 0px var(--hd-border);
}
.hd-checkbox-container input:checked ~ .hd-checkmark {
background-color: var(--hd-secondary);
}
.hd-checkmark:after {
content: "✓";
position: absolute;
display: none;
left: 2px;
top: -4px;
font-size: 1.1rem;
font-weight: 900;
color: var(--hd-text);
}
.hd-checkbox-container input:checked ~ .hd-checkmark:after {
display: block;
}
.hd-forgot-link {
color: var(--hd-accent);
text-decoration: none;
font-weight: 700;
transition: var(--hd-transition);
}
.hd-forgot-link:hover {
color: #f43f5e;
transform: rotate(-1.5deg) scale(1.05);
}
/* Divider */
.hd-login-divider {
text-align: center;
margin: 2rem 0;
position: relative;
}
.hd-login-divider:before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: var(--hd-border-width);
border-top: var(--hd-border-width) dashed var(--hd-border);
z-index: 1;
}
.hd-login-divider span {
background-color: var(--hd-surface);
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-btn);
padding: 0.25rem 0.85rem;
font-size: 0.9rem;
font-weight: 700;
color: var(--hd-text);
position: relative;
z-index: 2;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: var(--hd-shadow-sm);
transform: rotate(-2deg);
}
/* Socials */
.hd-social-login {
display: flex;
justify-content: center;
gap: 1rem;
}
.hd-social-login .hd-btn-circle {
border-radius: var(--hd-radius-circle) !important;
}
.hd-social-login .hd-btn-circle svg {
display: block;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Patrick+Hand&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--hd-bg: #FCFBF7; /* Soft notebook paper */
--hd-surface: #FFFFFF;
--hd-primary: #2B6CB0; /* Deep Ink Blue */
--hd-secondary: #FEFCBF; /* Highlighter Yellow */
--hd-accent: #F687B3; /* Eraser Pink */
--hd-success: #48BB78; /* Highlighter Green */
--hd-danger: #E53E3E; /* Red Marker */
--hd-text: #2D3748; /* Dark Graphite Pencil */
--hd-text-muted: #718096;
--hd-text-light: #A0AEC0;
--hd-border: #2D3748;
--hd-border-width: 2.5px;
/* Squiggly Hand-Drawn Radii */
--hd-radius-card: 255px 15px 225px 15px / 15px 225px 15px 255px;
--hd-radius-btn: 20px 5px 20px 5px / 5px 20px 5px 20px;
--hd-radius-circle: 50% 50% 50% 50% / 50% 50% 50% 50%;
--hd-font-heading: 'Architects Daughter', cursive;
--hd-font-body: 'Patrick Hand', cursive;
--hd-transition: all 0.2s ease;
--hd-shadow: 4px 5px 0px #2D3748;
--hd-shadow-lg: 6px 8px 0px #2D3748;
--hd-shadow-sm: 2px 3px 0px #2D3748;
--hd-shadow-press: 1px 1px 0px #2D3748;
}
body {
margin: 0;
font-family: var(--hd-font-body);
font-size: 1.15rem;
color: var(--hd-text);
background-color: var(--hd-bg);
-webkit-font-smoothing: antialiased;
}
/* Notebook Surface Container */
.hd-surface {
background-color: var(--hd-surface);
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-card);
padding: 2.5rem;
box-shadow: var(--hd-shadow);
position: relative;
transition: var(--hd-transition);
}
/* Global Logo */
.hd-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--hd-font-heading);
font-size: 1.35rem;
font-weight: 700;
color: var(--hd-text);
transition: var(--hd-transition);
}
.hd-logo:hover {
transform: rotate(-3deg) scale(1.05);
}
.hd-logo-icon {
width: 38px;
height: 38px;
border-radius: var(--hd-radius-circle);
background-color: var(--hd-secondary);
border: var(--hd-border-width) solid var(--hd-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--hd-font-heading);
font-size: 1.25rem;
font-weight: 700;
box-shadow: var(--hd-shadow-sm);
transform: rotate(4deg);
}
/* Global Buttons */
.hd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 2rem;
font-family: var(--hd-font-heading);
font-size: 1.05rem;
font-weight: 700;
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-btn);
cursor: pointer;
text-decoration: none;
box-shadow: var(--hd-shadow);
transition: var(--hd-transition);
gap: 0.5rem;
background-color: var(--hd-surface);
color: var(--hd-text);
}
.hd-btn:active {
transform: translate(3px, 4px);
box-shadow: var(--hd-shadow-press);
}
.hd-btn-primary {
background-color: var(--hd-secondary); /* Highlighter Yellow focus! */
}
.hd-btn-primary:hover {
background-color: #fef08a;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-outline {
background-color: var(--hd-surface);
}
.hd-btn-outline:hover {
background-color: #faf9f6;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-accent {
background-color: var(--hd-accent); /* Eraser pink */
}
.hd-btn-accent:hover {
background-color: #f472b6;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-ghost {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
.hd-btn-ghost:hover {
border-color: var(--hd-border);
background-color: rgba(254, 252, 191, 0.4);
box-shadow: var(--hd-shadow-sm);
transform: rotate(-1deg);
}
.hd-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: var(--hd-radius-circle) !important;
}
.hd-btn-block {
width: 100%;
}
/* Pencil Input Fields */
.hd-input {
width: 100%;
padding: 0.8rem 1.2rem;
border: var(--hd-border-width) dashed var(--hd-border);
border-radius: var(--hd-radius-btn);
font-family: var(--hd-font-body);
font-size: 1.15rem;
color: var(--hd-text);
background-color: var(--hd-surface);
outline: none;
transition: var(--hd-transition);
}
.hd-input::placeholder {
color: var(--hd-text-light);
}
.hd-input:focus {
border-style: solid;
background-color: #fffdec;
box-shadow: var(--hd-shadow-sm);
}
.hd-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: var(--hd-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--hd-font-heading);
margin: 0;
color: var(--hd-text);
line-height: 1.3;
}
p {
font-family: var(--hd-font-body);
line-height: 1.6;
margin: 0;
color: var(--hd-text-muted);
}
/* Helper Utilities */
.text-ink { color: var(--hd-primary) !important; }
.text-pink { color: var(--hd-accent) !important; }
.text-muted { color: var(--hd-text-muted) !important; }
.bg-paper { background-color: var(--hd-bg) !important; }
.bg-yellow { background-color: var(--hd-secondary) !important; }
.bg-pink { background-color: var(--hd-accent) !important; }
.bg-green { background-color: var(--hd-success) !important; }
.bg-red { background-color: var(--hd-danger) !important; }
.bg-blue { background-color: #bee3f8 !important; }
/* --- COMPONENT STYLES --- */
.hd-login-card {
max-width: 440px;
margin: 2rem auto;
padding: 3.5rem 3rem !important;
}
.hd-login-header {
text-align: center;
margin-bottom: 2.5rem;
}
.hd-login-header h2 {
font-size: 2.25rem;
margin-bottom: 0.75rem;
}
.hd-login-header p {
font-size: 1rem;
color: var(--hd-text-muted);
font-weight: 600;
}
.hd-login-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.hd-form-group {
display: flex;
flex-direction: column;
}
.hd-form-options {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.95rem;
margin-bottom: 0.5rem;
}
/* Custom Hand-Drawn Outlined Checkbox */
.hd-checkbox-container {
display: flex;
align-items: center;
position: relative;
cursor: pointer;
user-select: none;
gap: 0.6rem;
font-weight: 700;
color: var(--hd-text);
}
.hd-checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.hd-checkmark {
width: 20px;
height: 20px;
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-btn);
display: inline-block;
position: relative;
transition: var(--hd-transition);
background-color: var(--hd-surface);
box-shadow: var(--hd-shadow-sm);
transform: rotate(2deg);
}
.hd-checkbox-container:hover input ~ .hd-checkmark {
transform: translate(-1px, -1px) scale(1.05);
box-shadow: 3px 3px 0px var(--hd-border);
}
.hd-checkbox-container input:checked ~ .hd-checkmark {
background-color: var(--hd-secondary);
}
.hd-checkmark:after {
content: "✓";
position: absolute;
display: none;
left: 2px;
top: -4px;
font-size: 1.1rem;
font-weight: 900;
color: var(--hd-text);
}
.hd-checkbox-container input:checked ~ .hd-checkmark:after {
display: block;
}
.hd-forgot-link {
color: var(--hd-accent);
text-decoration: none;
font-weight: 700;
transition: var(--hd-transition);
}
.hd-forgot-link:hover {
color: #f43f5e;
transform: rotate(-1.5deg) scale(1.05);
}
/* Divider */
.hd-login-divider {
text-align: center;
margin: 2rem 0;
position: relative;
}
.hd-login-divider:before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: var(--hd-border-width);
border-top: var(--hd-border-width) dashed var(--hd-border);
z-index: 1;
}
.hd-login-divider span {
background-color: var(--hd-surface);
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-btn);
padding: 0.25rem 0.85rem;
font-size: 0.9rem;
font-weight: 700;
color: var(--hd-text);
position: relative;
z-index: 2;
text-transform: uppercase;
letter-spacing: 0.05em;
box-shadow: var(--hd-shadow-sm);
transform: rotate(-2deg);
}
/* Socials */
.hd-social-login {
display: flex;
justify-content: center;
gap: 1rem;
}
.hd-social-login .hd-btn-circle {
border-radius: var(--hd-radius-circle) !important;
}
.hd-social-login .hd-btn-circle svg {
display: block;
}
Hand-Drawn Profile Settings
HTML
<div class="hd-settings-card hd-surface">
<div class="hd-settings-header">
<h3>Artist Settings</h3>
<p class="hd-settings-subtitle">Manage public information and dynamic sketch Preferences.</p>
</div>
<form class="hd-settings-form" onsubmit="return false;">
<div class="hd-form-row">
<div class="hd-form-group">
<label class="hd-label" for="settings-first">First Name</label>
<input type="text" id="settings-first" class="hd-input" value="Sarah">
</div>
<div class="hd-form-group">
<label class="hd-label" for="settings-last">Last Name</label>
<input type="text" id="settings-last" class="hd-input" value="Jenkins">
</div>
</div>
<div class="hd-form-group">
<label class="hd-label" for="settings-email">Artist Address</label>
<input type="email" id="settings-email" class="hd-input" value="[email protected]">
</div>
<div class="hd-form-group">
<label class="hd-label" for="settings-bio">Notebook Bio</label>
<textarea id="settings-bio" class="hd-input hd-textarea" rows="4">Curator of high-performance spatial blueprints and dynamic pencil layouts. Built on Architects Daughter.</textarea>
</div>
<hr class="hd-divider-line">
<div class="hd-toggle-group">
<div class="hd-toggle-text">
<h4>Dynamic Graphite Highlights</h4>
<p>Inject rich solid sketchy yellow and pink fills into visual tags.</p>
</div>
<label class="hd-toggle">
<input type="checkbox" checked>
<span class="hd-slider"></span>
</label>
</div>
<div class="hd-settings-actions">
<button type="button" class="hd-btn hd-btn-outline">Reset Draft</button>
<button type="submit" class="hd-btn hd-btn-primary">Save Blueprint!</button>
</div>
</form>
</div>
CSS (Component Only)
/* Component: Hand-Drawn Profile Settings */
/* NOTE: This component requires base.css to be included in your page. */
.hd-settings-card {
max-width: 600px;
margin: 2rem auto;
padding: 3.5rem 3rem !important;
}
.hd-settings-header {
margin-bottom: 2.5rem;
}
.hd-settings-header h3 {
font-size: 1.85rem;
margin-bottom: 0.5rem;
}
.hd-settings-subtitle {
font-size: 1rem;
color: var(--hd-text-muted);
font-weight: 600;
}
.hd-settings-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.hd-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.hd-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
.hd-divider-line {
border: 0;
height: var(--hd-border-width);
background-color: transparent;
border-top: var(--hd-border-width) dashed var(--hd-border);
margin: 0.75rem 0;
}
/* Custom Bouncy Toggle Switch */
.hd-toggle-group {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.hd-toggle-text h4 {
font-family: var(--hd-font-heading);
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.hd-toggle-text p {
font-size: 0.95rem;
color: var(--hd-text-muted);
font-weight: 600;
}
.hd-toggle {
position: relative;
display: inline-block;
width: 54px;
height: 30px;
flex-shrink: 0;
}
.hd-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.hd-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--hd-surface);
border: var(--hd-border-width) solid var(--hd-border);
border-radius: 34px;
transition: var(--hd-transition);
box-shadow: var(--hd-shadow-sm);
}
.hd-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: var(--hd-border);
border-radius: 50%;
transition: var(--hd-transition);
}
.hd-toggle input:checked + .hd-slider {
background-color: var(--hd-success);
}
.hd-toggle input:checked + .hd-slider:before {
background-color: var(--hd-surface);
transform: translateX(22px);
border: 2px solid var(--hd-border);
}
.hd-settings-actions {
display: flex;
justify-content: flex-end;
gap: 1.5rem;
margin-top: 1rem;
}
@media (max-width: 600px) {
.hd-form-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.hd-settings-actions {
flex-direction: column-reverse;
align-items: stretch;
}
.hd-settings-actions .hd-btn {
width: 100%;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Patrick+Hand&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--hd-bg: #FCFBF7; /* Soft notebook paper */
--hd-surface: #FFFFFF;
--hd-primary: #2B6CB0; /* Deep Ink Blue */
--hd-secondary: #FEFCBF; /* Highlighter Yellow */
--hd-accent: #F687B3; /* Eraser Pink */
--hd-success: #48BB78; /* Highlighter Green */
--hd-danger: #E53E3E; /* Red Marker */
--hd-text: #2D3748; /* Dark Graphite Pencil */
--hd-text-muted: #718096;
--hd-text-light: #A0AEC0;
--hd-border: #2D3748;
--hd-border-width: 2.5px;
/* Squiggly Hand-Drawn Radii */
--hd-radius-card: 255px 15px 225px 15px / 15px 225px 15px 255px;
--hd-radius-btn: 20px 5px 20px 5px / 5px 20px 5px 20px;
--hd-radius-circle: 50% 50% 50% 50% / 50% 50% 50% 50%;
--hd-font-heading: 'Architects Daughter', cursive;
--hd-font-body: 'Patrick Hand', cursive;
--hd-transition: all 0.2s ease;
--hd-shadow: 4px 5px 0px #2D3748;
--hd-shadow-lg: 6px 8px 0px #2D3748;
--hd-shadow-sm: 2px 3px 0px #2D3748;
--hd-shadow-press: 1px 1px 0px #2D3748;
}
body {
margin: 0;
font-family: var(--hd-font-body);
font-size: 1.15rem;
color: var(--hd-text);
background-color: var(--hd-bg);
-webkit-font-smoothing: antialiased;
}
/* Notebook Surface Container */
.hd-surface {
background-color: var(--hd-surface);
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-card);
padding: 2.5rem;
box-shadow: var(--hd-shadow);
position: relative;
transition: var(--hd-transition);
}
/* Global Logo */
.hd-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--hd-font-heading);
font-size: 1.35rem;
font-weight: 700;
color: var(--hd-text);
transition: var(--hd-transition);
}
.hd-logo:hover {
transform: rotate(-3deg) scale(1.05);
}
.hd-logo-icon {
width: 38px;
height: 38px;
border-radius: var(--hd-radius-circle);
background-color: var(--hd-secondary);
border: var(--hd-border-width) solid var(--hd-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--hd-font-heading);
font-size: 1.25rem;
font-weight: 700;
box-shadow: var(--hd-shadow-sm);
transform: rotate(4deg);
}
/* Global Buttons */
.hd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 2rem;
font-family: var(--hd-font-heading);
font-size: 1.05rem;
font-weight: 700;
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-btn);
cursor: pointer;
text-decoration: none;
box-shadow: var(--hd-shadow);
transition: var(--hd-transition);
gap: 0.5rem;
background-color: var(--hd-surface);
color: var(--hd-text);
}
.hd-btn:active {
transform: translate(3px, 4px);
box-shadow: var(--hd-shadow-press);
}
.hd-btn-primary {
background-color: var(--hd-secondary); /* Highlighter Yellow focus! */
}
.hd-btn-primary:hover {
background-color: #fef08a;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-outline {
background-color: var(--hd-surface);
}
.hd-btn-outline:hover {
background-color: #faf9f6;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-accent {
background-color: var(--hd-accent); /* Eraser pink */
}
.hd-btn-accent:hover {
background-color: #f472b6;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-ghost {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
.hd-btn-ghost:hover {
border-color: var(--hd-border);
background-color: rgba(254, 252, 191, 0.4);
box-shadow: var(--hd-shadow-sm);
transform: rotate(-1deg);
}
.hd-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: var(--hd-radius-circle) !important;
}
.hd-btn-block {
width: 100%;
}
/* Pencil Input Fields */
.hd-input {
width: 100%;
padding: 0.8rem 1.2rem;
border: var(--hd-border-width) dashed var(--hd-border);
border-radius: var(--hd-radius-btn);
font-family: var(--hd-font-body);
font-size: 1.15rem;
color: var(--hd-text);
background-color: var(--hd-surface);
outline: none;
transition: var(--hd-transition);
}
.hd-input::placeholder {
color: var(--hd-text-light);
}
.hd-input:focus {
border-style: solid;
background-color: #fffdec;
box-shadow: var(--hd-shadow-sm);
}
.hd-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: var(--hd-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--hd-font-heading);
margin: 0;
color: var(--hd-text);
line-height: 1.3;
}
p {
font-family: var(--hd-font-body);
line-height: 1.6;
margin: 0;
color: var(--hd-text-muted);
}
/* Helper Utilities */
.text-ink { color: var(--hd-primary) !important; }
.text-pink { color: var(--hd-accent) !important; }
.text-muted { color: var(--hd-text-muted) !important; }
.bg-paper { background-color: var(--hd-bg) !important; }
.bg-yellow { background-color: var(--hd-secondary) !important; }
.bg-pink { background-color: var(--hd-accent) !important; }
.bg-green { background-color: var(--hd-success) !important; }
.bg-red { background-color: var(--hd-danger) !important; }
.bg-blue { background-color: #bee3f8 !important; }
/* --- COMPONENT STYLES --- */
.hd-settings-card {
max-width: 600px;
margin: 2rem auto;
padding: 3.5rem 3rem !important;
}
.hd-settings-header {
margin-bottom: 2.5rem;
}
.hd-settings-header h3 {
font-size: 1.85rem;
margin-bottom: 0.5rem;
}
.hd-settings-subtitle {
font-size: 1rem;
color: var(--hd-text-muted);
font-weight: 600;
}
.hd-settings-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.hd-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.hd-textarea {
resize: vertical;
min-height: 100px;
line-height: 1.6;
}
.hd-divider-line {
border: 0;
height: var(--hd-border-width);
background-color: transparent;
border-top: var(--hd-border-width) dashed var(--hd-border);
margin: 0.75rem 0;
}
/* Custom Bouncy Toggle Switch */
.hd-toggle-group {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
.hd-toggle-text h4 {
font-family: var(--hd-font-heading);
font-size: 1.05rem;
font-weight: 700;
margin-bottom: 0.25rem;
}
.hd-toggle-text p {
font-size: 0.95rem;
color: var(--hd-text-muted);
font-weight: 600;
}
.hd-toggle {
position: relative;
display: inline-block;
width: 54px;
height: 30px;
flex-shrink: 0;
}
.hd-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.hd-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--hd-surface);
border: var(--hd-border-width) solid var(--hd-border);
border-radius: 34px;
transition: var(--hd-transition);
box-shadow: var(--hd-shadow-sm);
}
.hd-slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: var(--hd-border);
border-radius: 50%;
transition: var(--hd-transition);
}
.hd-toggle input:checked + .hd-slider {
background-color: var(--hd-success);
}
.hd-toggle input:checked + .hd-slider:before {
background-color: var(--hd-surface);
transform: translateX(22px);
border: 2px solid var(--hd-border);
}
.hd-settings-actions {
display: flex;
justify-content: flex-end;
gap: 1.5rem;
margin-top: 1rem;
}
@media (max-width: 600px) {
.hd-form-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.hd-settings-actions {
flex-direction: column-reverse;
align-items: stretch;
}
.hd-settings-actions .hd-btn {
width: 100%;
}
}
Cards
Sketchy Metrics Cards
HTML
<div class="hd-stats-grid">
<div class="hd-stat-card hd-surface" style="background-color: #f7fafc; transform: rotate(-1deg);">
<div class="hd-stat-header">
<span class="hd-stat-title text-ink">Active Drafts</span>
<div class="hd-stat-icon text-ink">
<svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"></path><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></path></svg>
</div>
</div>
<div class="hd-stat-value">1,120</div>
<div class="hd-stat-footer">
<span class="hd-trend-indicator text-ink">Active sketches</span>
</div>
</div>
<div class="hd-stat-card hd-surface" style="background-color: #fffdec; transform: rotate(1deg);">
<div class="hd-stat-header">
<span class="hd-stat-title text-pink">Pencil Load</span>
<div class="hd-stat-icon text-pink">
<svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>
</div>
</div>
<div class="hd-stat-value text-pink">48.2 L/s</div>
<div class="hd-stat-footer">
<span class="hd-trend-indicator text-pink">Ink flow velocity</span>
</div>
</div>
<div class="hd-stat-card hd-surface" style="background-color: #faf9f6; transform: rotate(-0.5deg);">
<div class="hd-stat-header">
<span class="hd-stat-title" style="color: #b7791f;">Workspace Uptime</span>
<div class="hd-stat-icon" style="color: #b7791f;">
<svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg>
</div>
</div>
<div class="hd-stat-value" style="color: #b7791f;">99.8%</div>
<div class="hd-stat-footer">
<span class="hd-trend-indicator" style="color: #b7791f;">Stable curation layers</span>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Sketchy Metrics Cards */
/* NOTE: This component requires base.css to be included in your page. */
.hd-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.hd-stat-card {
display: flex;
flex-direction: column;
padding: 2.25rem !important;
}
.hd-stat-card:hover {
transform: translate(-3px, -3px) rotate(0deg) !important;
box-shadow: 6px 7px 0px var(--hd-border) !important;
}
.hd-stat-card:active {
transform: translate(3px, 4px) !important;
box-shadow: var(--hd-shadow-press) !important;
}
.hd-stat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.hd-stat-title {
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 1.05rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.hd-stat-icon {
display: flex;
align-items: center;
justify-content: center;
}
.hd-stat-value {
font-family: var(--hd-font-heading);
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1;
}
.hd-stat-footer {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.95rem;
font-weight: 700;
}
.hd-trend-indicator {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Patrick+Hand&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--hd-bg: #FCFBF7; /* Soft notebook paper */
--hd-surface: #FFFFFF;
--hd-primary: #2B6CB0; /* Deep Ink Blue */
--hd-secondary: #FEFCBF; /* Highlighter Yellow */
--hd-accent: #F687B3; /* Eraser Pink */
--hd-success: #48BB78; /* Highlighter Green */
--hd-danger: #E53E3E; /* Red Marker */
--hd-text: #2D3748; /* Dark Graphite Pencil */
--hd-text-muted: #718096;
--hd-text-light: #A0AEC0;
--hd-border: #2D3748;
--hd-border-width: 2.5px;
/* Squiggly Hand-Drawn Radii */
--hd-radius-card: 255px 15px 225px 15px / 15px 225px 15px 255px;
--hd-radius-btn: 20px 5px 20px 5px / 5px 20px 5px 20px;
--hd-radius-circle: 50% 50% 50% 50% / 50% 50% 50% 50%;
--hd-font-heading: 'Architects Daughter', cursive;
--hd-font-body: 'Patrick Hand', cursive;
--hd-transition: all 0.2s ease;
--hd-shadow: 4px 5px 0px #2D3748;
--hd-shadow-lg: 6px 8px 0px #2D3748;
--hd-shadow-sm: 2px 3px 0px #2D3748;
--hd-shadow-press: 1px 1px 0px #2D3748;
}
body {
margin: 0;
font-family: var(--hd-font-body);
font-size: 1.15rem;
color: var(--hd-text);
background-color: var(--hd-bg);
-webkit-font-smoothing: antialiased;
}
/* Notebook Surface Container */
.hd-surface {
background-color: var(--hd-surface);
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-card);
padding: 2.5rem;
box-shadow: var(--hd-shadow);
position: relative;
transition: var(--hd-transition);
}
/* Global Logo */
.hd-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--hd-font-heading);
font-size: 1.35rem;
font-weight: 700;
color: var(--hd-text);
transition: var(--hd-transition);
}
.hd-logo:hover {
transform: rotate(-3deg) scale(1.05);
}
.hd-logo-icon {
width: 38px;
height: 38px;
border-radius: var(--hd-radius-circle);
background-color: var(--hd-secondary);
border: var(--hd-border-width) solid var(--hd-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--hd-font-heading);
font-size: 1.25rem;
font-weight: 700;
box-shadow: var(--hd-shadow-sm);
transform: rotate(4deg);
}
/* Global Buttons */
.hd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 2rem;
font-family: var(--hd-font-heading);
font-size: 1.05rem;
font-weight: 700;
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-btn);
cursor: pointer;
text-decoration: none;
box-shadow: var(--hd-shadow);
transition: var(--hd-transition);
gap: 0.5rem;
background-color: var(--hd-surface);
color: var(--hd-text);
}
.hd-btn:active {
transform: translate(3px, 4px);
box-shadow: var(--hd-shadow-press);
}
.hd-btn-primary {
background-color: var(--hd-secondary); /* Highlighter Yellow focus! */
}
.hd-btn-primary:hover {
background-color: #fef08a;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-outline {
background-color: var(--hd-surface);
}
.hd-btn-outline:hover {
background-color: #faf9f6;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-accent {
background-color: var(--hd-accent); /* Eraser pink */
}
.hd-btn-accent:hover {
background-color: #f472b6;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-ghost {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
.hd-btn-ghost:hover {
border-color: var(--hd-border);
background-color: rgba(254, 252, 191, 0.4);
box-shadow: var(--hd-shadow-sm);
transform: rotate(-1deg);
}
.hd-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: var(--hd-radius-circle) !important;
}
.hd-btn-block {
width: 100%;
}
/* Pencil Input Fields */
.hd-input {
width: 100%;
padding: 0.8rem 1.2rem;
border: var(--hd-border-width) dashed var(--hd-border);
border-radius: var(--hd-radius-btn);
font-family: var(--hd-font-body);
font-size: 1.15rem;
color: var(--hd-text);
background-color: var(--hd-surface);
outline: none;
transition: var(--hd-transition);
}
.hd-input::placeholder {
color: var(--hd-text-light);
}
.hd-input:focus {
border-style: solid;
background-color: #fffdec;
box-shadow: var(--hd-shadow-sm);
}
.hd-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: var(--hd-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--hd-font-heading);
margin: 0;
color: var(--hd-text);
line-height: 1.3;
}
p {
font-family: var(--hd-font-body);
line-height: 1.6;
margin: 0;
color: var(--hd-text-muted);
}
/* Helper Utilities */
.text-ink { color: var(--hd-primary) !important; }
.text-pink { color: var(--hd-accent) !important; }
.text-muted { color: var(--hd-text-muted) !important; }
.bg-paper { background-color: var(--hd-bg) !important; }
.bg-yellow { background-color: var(--hd-secondary) !important; }
.bg-pink { background-color: var(--hd-accent) !important; }
.bg-green { background-color: var(--hd-success) !important; }
.bg-red { background-color: var(--hd-danger) !important; }
.bg-blue { background-color: #bee3f8 !important; }
/* --- COMPONENT STYLES --- */
.hd-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.hd-stat-card {
display: flex;
flex-direction: column;
padding: 2.25rem !important;
}
.hd-stat-card:hover {
transform: translate(-3px, -3px) rotate(0deg) !important;
box-shadow: 6px 7px 0px var(--hd-border) !important;
}
.hd-stat-card:active {
transform: translate(3px, 4px) !important;
box-shadow: var(--hd-shadow-press) !important;
}
.hd-stat-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.hd-stat-title {
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 1.05rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.hd-stat-icon {
display: flex;
align-items: center;
justify-content: center;
}
.hd-stat-value {
font-family: var(--hd-font-heading);
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1;
}
.hd-stat-footer {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.95rem;
font-weight: 700;
}
.hd-trend-indicator {
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
Hand-Drawn Pricing Tier
HTML
<div class="hd-pricing-card hd-surface bg-paper">
<div class="hd-pricing-header">
<h3 class="hd-pricing-title">Ink Resident</h3>
<p class="hd-pricing-desc">Hyper-performance handdrawn curation assets built for professional designers.</p>
<div class="hd-pricing-price">
<span class="hd-currency">$</span>
<span class="hd-amount text-pink">49</span>
<span class="hd-period">/mo</span>
</div>
</div>
<div class="hd-pricing-features">
<ul>
<li>
<div class="hd-bullet bg-yellow">✓</div>
Unlimited Notebook Drafts
</li>
<li>
<div class="hd-bullet bg-yellow">✓</div>
Full Graphite Vector layers
</li>
<li>
<div class="hd-bullet bg-yellow">✓</div>
10 Shared Ink Subdomains
</li>
<li class="hd-feature-disabled">
<div class="hd-bullet" style="background-color: var(--hd-text-light); color: var(--hd-surface);">✕</div>
Personal Blueprint Director
</li>
</ul>
</div>
<div class="hd-pricing-footer">
<button class="hd-btn hd-btn-primary hd-btn-block">Deploy Sketchpad!</button>
</div>
</div>
CSS (Component Only)
/* Component: Hand-Drawn Pricing Tier */
/* NOTE: This component requires base.css to be included in your page. */
.hd-pricing-card {
max-width: 380px;
margin: 2rem auto;
padding: 3.5rem 2.5rem 2.5rem;
position: relative;
transform: rotate(1deg);
}
.hd-pricing-card:hover {
transform: translate(-3px, -3px) rotate(0deg);
box-shadow: var(--hd-shadow-lg);
}
.hd-pricing-header {
text-align: center;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: var(--hd-border-width) dashed var(--hd-border);
}
.hd-pricing-title {
font-size: 1.85rem;
margin-bottom: 0.5rem;
}
.hd-pricing-desc {
font-size: 0.95rem;
color: var(--hd-text-muted);
margin-bottom: 2rem;
line-height: 1.6;
font-weight: 600;
}
.hd-pricing-price {
display: flex;
align-items: flex-end;
justify-content: center;
color: var(--hd-text);
}
.hd-currency {
font-family: var(--hd-font-heading);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.4rem;
margin-right: 0.2rem;
color: var(--hd-primary);
}
.hd-amount {
font-family: var(--hd-font-heading);
font-size: 3.75rem;
font-weight: 700;
line-height: 1;
}
.hd-period {
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--hd-text-muted);
margin-bottom: 0.4rem;
margin-left: 0.2rem;
}
.hd-pricing-features ul {
list-style: none;
padding: 0;
margin: 0 0 2.5rem 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.hd-pricing-features li {
display: flex;
align-items: center;
gap: 0.85rem;
font-size: 1.05rem;
color: var(--hd-text);
font-weight: 700;
}
.hd-bullet {
width: 20px;
height: 20px;
border-radius: var(--hd-radius-circle);
border: 2px solid var(--hd-border);
flex-shrink: 0;
box-shadow: var(--hd-shadow-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 900;
transform: rotate(-5deg);
}
.hd-feature-disabled {
color: var(--hd-text-light) !important;
text-decoration: line-through;
opacity: 0.6;
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Patrick+Hand&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--hd-bg: #FCFBF7; /* Soft notebook paper */
--hd-surface: #FFFFFF;
--hd-primary: #2B6CB0; /* Deep Ink Blue */
--hd-secondary: #FEFCBF; /* Highlighter Yellow */
--hd-accent: #F687B3; /* Eraser Pink */
--hd-success: #48BB78; /* Highlighter Green */
--hd-danger: #E53E3E; /* Red Marker */
--hd-text: #2D3748; /* Dark Graphite Pencil */
--hd-text-muted: #718096;
--hd-text-light: #A0AEC0;
--hd-border: #2D3748;
--hd-border-width: 2.5px;
/* Squiggly Hand-Drawn Radii */
--hd-radius-card: 255px 15px 225px 15px / 15px 225px 15px 255px;
--hd-radius-btn: 20px 5px 20px 5px / 5px 20px 5px 20px;
--hd-radius-circle: 50% 50% 50% 50% / 50% 50% 50% 50%;
--hd-font-heading: 'Architects Daughter', cursive;
--hd-font-body: 'Patrick Hand', cursive;
--hd-transition: all 0.2s ease;
--hd-shadow: 4px 5px 0px #2D3748;
--hd-shadow-lg: 6px 8px 0px #2D3748;
--hd-shadow-sm: 2px 3px 0px #2D3748;
--hd-shadow-press: 1px 1px 0px #2D3748;
}
body {
margin: 0;
font-family: var(--hd-font-body);
font-size: 1.15rem;
color: var(--hd-text);
background-color: var(--hd-bg);
-webkit-font-smoothing: antialiased;
}
/* Notebook Surface Container */
.hd-surface {
background-color: var(--hd-surface);
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-card);
padding: 2.5rem;
box-shadow: var(--hd-shadow);
position: relative;
transition: var(--hd-transition);
}
/* Global Logo */
.hd-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--hd-font-heading);
font-size: 1.35rem;
font-weight: 700;
color: var(--hd-text);
transition: var(--hd-transition);
}
.hd-logo:hover {
transform: rotate(-3deg) scale(1.05);
}
.hd-logo-icon {
width: 38px;
height: 38px;
border-radius: var(--hd-radius-circle);
background-color: var(--hd-secondary);
border: var(--hd-border-width) solid var(--hd-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--hd-font-heading);
font-size: 1.25rem;
font-weight: 700;
box-shadow: var(--hd-shadow-sm);
transform: rotate(4deg);
}
/* Global Buttons */
.hd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 2rem;
font-family: var(--hd-font-heading);
font-size: 1.05rem;
font-weight: 700;
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-btn);
cursor: pointer;
text-decoration: none;
box-shadow: var(--hd-shadow);
transition: var(--hd-transition);
gap: 0.5rem;
background-color: var(--hd-surface);
color: var(--hd-text);
}
.hd-btn:active {
transform: translate(3px, 4px);
box-shadow: var(--hd-shadow-press);
}
.hd-btn-primary {
background-color: var(--hd-secondary); /* Highlighter Yellow focus! */
}
.hd-btn-primary:hover {
background-color: #fef08a;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-outline {
background-color: var(--hd-surface);
}
.hd-btn-outline:hover {
background-color: #faf9f6;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-accent {
background-color: var(--hd-accent); /* Eraser pink */
}
.hd-btn-accent:hover {
background-color: #f472b6;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-ghost {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
.hd-btn-ghost:hover {
border-color: var(--hd-border);
background-color: rgba(254, 252, 191, 0.4);
box-shadow: var(--hd-shadow-sm);
transform: rotate(-1deg);
}
.hd-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: var(--hd-radius-circle) !important;
}
.hd-btn-block {
width: 100%;
}
/* Pencil Input Fields */
.hd-input {
width: 100%;
padding: 0.8rem 1.2rem;
border: var(--hd-border-width) dashed var(--hd-border);
border-radius: var(--hd-radius-btn);
font-family: var(--hd-font-body);
font-size: 1.15rem;
color: var(--hd-text);
background-color: var(--hd-surface);
outline: none;
transition: var(--hd-transition);
}
.hd-input::placeholder {
color: var(--hd-text-light);
}
.hd-input:focus {
border-style: solid;
background-color: #fffdec;
box-shadow: var(--hd-shadow-sm);
}
.hd-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: var(--hd-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--hd-font-heading);
margin: 0;
color: var(--hd-text);
line-height: 1.3;
}
p {
font-family: var(--hd-font-body);
line-height: 1.6;
margin: 0;
color: var(--hd-text-muted);
}
/* Helper Utilities */
.text-ink { color: var(--hd-primary) !important; }
.text-pink { color: var(--hd-accent) !important; }
.text-muted { color: var(--hd-text-muted) !important; }
.bg-paper { background-color: var(--hd-bg) !important; }
.bg-yellow { background-color: var(--hd-secondary) !important; }
.bg-pink { background-color: var(--hd-accent) !important; }
.bg-green { background-color: var(--hd-success) !important; }
.bg-red { background-color: var(--hd-danger) !important; }
.bg-blue { background-color: #bee3f8 !important; }
/* --- COMPONENT STYLES --- */
.hd-pricing-card {
max-width: 380px;
margin: 2rem auto;
padding: 3.5rem 2.5rem 2.5rem;
position: relative;
transform: rotate(1deg);
}
.hd-pricing-card:hover {
transform: translate(-3px, -3px) rotate(0deg);
box-shadow: var(--hd-shadow-lg);
}
.hd-pricing-header {
text-align: center;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: var(--hd-border-width) dashed var(--hd-border);
}
.hd-pricing-title {
font-size: 1.85rem;
margin-bottom: 0.5rem;
}
.hd-pricing-desc {
font-size: 0.95rem;
color: var(--hd-text-muted);
margin-bottom: 2rem;
line-height: 1.6;
font-weight: 600;
}
.hd-pricing-price {
display: flex;
align-items: flex-end;
justify-content: center;
color: var(--hd-text);
}
.hd-currency {
font-family: var(--hd-font-heading);
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.4rem;
margin-right: 0.2rem;
color: var(--hd-primary);
}
.hd-amount {
font-family: var(--hd-font-heading);
font-size: 3.75rem;
font-weight: 700;
line-height: 1;
}
.hd-period {
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--hd-text-muted);
margin-bottom: 0.4rem;
margin-left: 0.2rem;
}
.hd-pricing-features ul {
list-style: none;
padding: 0;
margin: 0 0 2.5rem 0;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.hd-pricing-features li {
display: flex;
align-items: center;
gap: 0.85rem;
font-size: 1.05rem;
color: var(--hd-text);
font-weight: 700;
}
.hd-bullet {
width: 20px;
height: 20px;
border-radius: var(--hd-radius-circle);
border: 2px solid var(--hd-border);
flex-shrink: 0;
box-shadow: var(--hd-shadow-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
font-weight: 900;
transform: rotate(-5deg);
}
.hd-feature-disabled {
color: var(--hd-text-light) !important;
text-decoration: line-through;
opacity: 0.6;
}
Tables
Sketchy Notebook Table
HTML
<div class="hd-table-container hd-surface bg-paper">
<div class="hd-table-header">
<h3>Draft Ledger</h3>
<p>Record of drafted layer modules and stability index tags.</p>
</div>
<div class="hd-table-responsive">
<table class="hd-notebook-table">
<thead>
<tr>
<th>Layer Name</th>
<th>Artist</th>
<th>Fidelity</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-ink">~ / spline-matrix</td>
<td>Sarah J.</td>
<td>94.8%</td>
<td><span class="hd-pill bg-green">Active</span></td>
</tr>
<tr>
<td class="text-ink">~ / raster-brush</td>
<td>Alex M.</td>
<td>89.2%</td>
<td><span class="hd-pill bg-yellow">Drafting</span></td>
</tr>
<tr>
<td class="text-ink">~ / bezier-curves</td>
<td>Sarah J.</td>
<td>98.5%</td>
<td><span class="hd-pill bg-green">Active</span></td>
</tr>
<tr>
<td class="text-ink">~ / physics-crayons</td>
<td>Dave K.</td>
<td>--</td>
<td><span class="hd-pill bg-red">Pencil Cold</span></td>
</tr>
</tbody>
</table>
</div>
</div>
CSS (Component Only)
/* Component: Sketchy Notebook Table */
/* NOTE: This component requires base.css to be included in your page. */
.hd-table-container {
max-width: 800px;
margin: 2rem auto;
padding: 3rem 2.5rem !important;
}
.hd-table-header {
margin-bottom: 2rem;
}
.hd-table-header h3 {
font-size: 1.75rem;
margin-bottom: 0.5rem;
}
.hd-table-header p {
font-size: 0.95rem;
color: var(--hd-text-muted);
font-weight: 600;
}
.hd-table-responsive {
width: 100%;
overflow-x: auto;
border-radius: var(--hd-radius-btn);
}
.hd-notebook-table {
width: 100%;
border-collapse: collapse;
font-family: var(--hd-font-body);
font-size: 1.1rem;
text-align: left;
}
.hd-notebook-table th,
.hd-notebook-table td {
padding: 1rem 1.25rem;
}
.hd-notebook-table th {
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--hd-text);
border-bottom: var(--hd-border-width) solid var(--hd-border);
}
.hd-notebook-table tbody tr {
border-bottom: var(--hd-border-width) dashed var(--hd-border);
transition: var(--hd-transition);
}
.hd-notebook-table tbody tr:hover {
background-color: #fffdec;
}
.hd-pill {
display: inline-block;
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 0.8rem;
padding: 0.15rem 0.65rem;
border: 2px solid var(--hd-border);
border-radius: var(--hd-radius-btn);
box-shadow: var(--hd-shadow-sm);
transform: rotate(-1.5deg);
}
@media (max-width: 600px) {
.hd-notebook-table th,
.hd-notebook-table td {
padding: 0.75rem 0.85rem;
font-size: 1rem;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Patrick+Hand&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--hd-bg: #FCFBF7; /* Soft notebook paper */
--hd-surface: #FFFFFF;
--hd-primary: #2B6CB0; /* Deep Ink Blue */
--hd-secondary: #FEFCBF; /* Highlighter Yellow */
--hd-accent: #F687B3; /* Eraser Pink */
--hd-success: #48BB78; /* Highlighter Green */
--hd-danger: #E53E3E; /* Red Marker */
--hd-text: #2D3748; /* Dark Graphite Pencil */
--hd-text-muted: #718096;
--hd-text-light: #A0AEC0;
--hd-border: #2D3748;
--hd-border-width: 2.5px;
/* Squiggly Hand-Drawn Radii */
--hd-radius-card: 255px 15px 225px 15px / 15px 225px 15px 255px;
--hd-radius-btn: 20px 5px 20px 5px / 5px 20px 5px 20px;
--hd-radius-circle: 50% 50% 50% 50% / 50% 50% 50% 50%;
--hd-font-heading: 'Architects Daughter', cursive;
--hd-font-body: 'Patrick Hand', cursive;
--hd-transition: all 0.2s ease;
--hd-shadow: 4px 5px 0px #2D3748;
--hd-shadow-lg: 6px 8px 0px #2D3748;
--hd-shadow-sm: 2px 3px 0px #2D3748;
--hd-shadow-press: 1px 1px 0px #2D3748;
}
body {
margin: 0;
font-family: var(--hd-font-body);
font-size: 1.15rem;
color: var(--hd-text);
background-color: var(--hd-bg);
-webkit-font-smoothing: antialiased;
}
/* Notebook Surface Container */
.hd-surface {
background-color: var(--hd-surface);
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-card);
padding: 2.5rem;
box-shadow: var(--hd-shadow);
position: relative;
transition: var(--hd-transition);
}
/* Global Logo */
.hd-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--hd-font-heading);
font-size: 1.35rem;
font-weight: 700;
color: var(--hd-text);
transition: var(--hd-transition);
}
.hd-logo:hover {
transform: rotate(-3deg) scale(1.05);
}
.hd-logo-icon {
width: 38px;
height: 38px;
border-radius: var(--hd-radius-circle);
background-color: var(--hd-secondary);
border: var(--hd-border-width) solid var(--hd-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--hd-font-heading);
font-size: 1.25rem;
font-weight: 700;
box-shadow: var(--hd-shadow-sm);
transform: rotate(4deg);
}
/* Global Buttons */
.hd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 2rem;
font-family: var(--hd-font-heading);
font-size: 1.05rem;
font-weight: 700;
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-btn);
cursor: pointer;
text-decoration: none;
box-shadow: var(--hd-shadow);
transition: var(--hd-transition);
gap: 0.5rem;
background-color: var(--hd-surface);
color: var(--hd-text);
}
.hd-btn:active {
transform: translate(3px, 4px);
box-shadow: var(--hd-shadow-press);
}
.hd-btn-primary {
background-color: var(--hd-secondary); /* Highlighter Yellow focus! */
}
.hd-btn-primary:hover {
background-color: #fef08a;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-outline {
background-color: var(--hd-surface);
}
.hd-btn-outline:hover {
background-color: #faf9f6;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-accent {
background-color: var(--hd-accent); /* Eraser pink */
}
.hd-btn-accent:hover {
background-color: #f472b6;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-ghost {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
.hd-btn-ghost:hover {
border-color: var(--hd-border);
background-color: rgba(254, 252, 191, 0.4);
box-shadow: var(--hd-shadow-sm);
transform: rotate(-1deg);
}
.hd-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: var(--hd-radius-circle) !important;
}
.hd-btn-block {
width: 100%;
}
/* Pencil Input Fields */
.hd-input {
width: 100%;
padding: 0.8rem 1.2rem;
border: var(--hd-border-width) dashed var(--hd-border);
border-radius: var(--hd-radius-btn);
font-family: var(--hd-font-body);
font-size: 1.15rem;
color: var(--hd-text);
background-color: var(--hd-surface);
outline: none;
transition: var(--hd-transition);
}
.hd-input::placeholder {
color: var(--hd-text-light);
}
.hd-input:focus {
border-style: solid;
background-color: #fffdec;
box-shadow: var(--hd-shadow-sm);
}
.hd-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: var(--hd-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--hd-font-heading);
margin: 0;
color: var(--hd-text);
line-height: 1.3;
}
p {
font-family: var(--hd-font-body);
line-height: 1.6;
margin: 0;
color: var(--hd-text-muted);
}
/* Helper Utilities */
.text-ink { color: var(--hd-primary) !important; }
.text-pink { color: var(--hd-accent) !important; }
.text-muted { color: var(--hd-text-muted) !important; }
.bg-paper { background-color: var(--hd-bg) !important; }
.bg-yellow { background-color: var(--hd-secondary) !important; }
.bg-pink { background-color: var(--hd-accent) !important; }
.bg-green { background-color: var(--hd-success) !important; }
.bg-red { background-color: var(--hd-danger) !important; }
.bg-blue { background-color: #bee3f8 !important; }
/* --- COMPONENT STYLES --- */
.hd-table-container {
max-width: 800px;
margin: 2rem auto;
padding: 3rem 2.5rem !important;
}
.hd-table-header {
margin-bottom: 2rem;
}
.hd-table-header h3 {
font-size: 1.75rem;
margin-bottom: 0.5rem;
}
.hd-table-header p {
font-size: 0.95rem;
color: var(--hd-text-muted);
font-weight: 600;
}
.hd-table-responsive {
width: 100%;
overflow-x: auto;
border-radius: var(--hd-radius-btn);
}
.hd-notebook-table {
width: 100%;
border-collapse: collapse;
font-family: var(--hd-font-body);
font-size: 1.1rem;
text-align: left;
}
.hd-notebook-table th,
.hd-notebook-table td {
padding: 1rem 1.25rem;
}
.hd-notebook-table th {
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--hd-text);
border-bottom: var(--hd-border-width) solid var(--hd-border);
}
.hd-notebook-table tbody tr {
border-bottom: var(--hd-border-width) dashed var(--hd-border);
transition: var(--hd-transition);
}
.hd-notebook-table tbody tr:hover {
background-color: #fffdec;
}
.hd-pill {
display: inline-block;
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 0.8rem;
padding: 0.15rem 0.65rem;
border: 2px solid var(--hd-border);
border-radius: var(--hd-radius-btn);
box-shadow: var(--hd-shadow-sm);
transform: rotate(-1.5deg);
}
@media (max-width: 600px) {
.hd-notebook-table th,
.hd-notebook-table td {
padding: 0.75rem 0.85rem;
font-size: 1rem;
}
}
Lists
Sketchy Ledger List
HTML
<div class="hd-ledger-container hd-surface bg-paper">
<div class="hd-ledger-header">
<h3>Draft Ledger</h3>
<p>Interactive journal of artistic updates and layers activity.</p>
</div>
<div class="hd-ledger-items">
<div class="hd-ledger-item">
<div class="hd-ledger-marker bg-yellow">⭐</div>
<div class="hd-ledger-content">
<div class="hd-ledger-info">
<h4>Pencil Matrix Node</h4>
<span class="hd-ledger-time">10 mins ago</span>
</div>
<p>Successfully calibrated curvature fidelity indexes at 94.8% average.</p>
</div>
</div>
<div class="hd-ledger-item">
<div class="hd-ledger-marker bg-pink">✎</div>
<div class="hd-ledger-content">
<div class="hd-ledger-info">
<h4>New Layer Sketched</h4>
<span class="hd-ledger-time">2 hours ago</span>
</div>
<p>Sarah J. added 42 new organic vectors to <strong>~ / raster-brush</strong> canvas.</p>
</div>
</div>
<div class="hd-ledger-item">
<div class="hd-ledger-marker bg-blue">⚡</div>
<div class="hd-ledger-content">
<div class="hd-ledger-info">
<h4>Draft Synchronized</h4>
<span class="hd-ledger-time">Yesterday</span>
</div>
<p>System auto-archived old graphite modules into cold pencil vault storage.</p>
</div>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Sketchy Ledger List */
/* NOTE: This component requires base.css to be included in your page. */
.hd-ledger-container {
max-width: 650px;
margin: 2rem auto;
padding: 3rem 2.5rem !important;
}
.hd-ledger-header {
margin-bottom: 2.5rem;
}
.hd-ledger-header h3 {
font-size: 1.75rem;
margin-bottom: 0.5rem;
}
.hd-ledger-header p {
font-size: 0.95rem;
color: var(--hd-text-muted);
font-weight: 600;
}
.hd-ledger-items {
position: relative;
padding-left: 2rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
.hd-ledger-items:before {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
width: var(--hd-border-width);
border-left: var(--hd-border-width) dashed var(--hd-border);
}
.hd-ledger-item {
display: flex;
align-items: flex-start;
position: relative;
}
.hd-ledger-marker {
position: absolute;
left: -2rem;
top: 4px;
width: 28px;
height: 28px;
border-radius: var(--hd-radius-circle);
border: 2px solid var(--hd-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
font-weight: 900;
box-shadow: var(--hd-shadow-sm);
z-index: 2;
transform: rotate(6deg);
}
.hd-ledger-content {
flex: 1;
background-color: var(--hd-surface);
border: var(--hd-border-width) dashed var(--hd-border);
border-radius: var(--hd-radius-btn);
padding: 1.25rem 1.5rem;
transition: var(--hd-transition);
}
.hd-ledger-content:hover {
border-style: solid;
transform: rotate(-0.5deg) scale(1.01);
background-color: #fffdec;
box-shadow: var(--hd-shadow-sm);
}
.hd-ledger-info {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
flex-wrap: wrap;
gap: 0.5rem;
}
.hd-ledger-info h4 {
font-family: var(--hd-font-heading);
font-size: 1.1rem;
font-weight: 700;
}
.hd-ledger-time {
font-size: 0.85rem;
font-weight: 700;
color: var(--hd-text-muted);
}
.hd-ledger-content p {
font-size: 1rem;
margin: 0;
line-height: 1.5;
}
@media (max-width: 480px) {
.hd-ledger-info {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Patrick+Hand&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--hd-bg: #FCFBF7; /* Soft notebook paper */
--hd-surface: #FFFFFF;
--hd-primary: #2B6CB0; /* Deep Ink Blue */
--hd-secondary: #FEFCBF; /* Highlighter Yellow */
--hd-accent: #F687B3; /* Eraser Pink */
--hd-success: #48BB78; /* Highlighter Green */
--hd-danger: #E53E3E; /* Red Marker */
--hd-text: #2D3748; /* Dark Graphite Pencil */
--hd-text-muted: #718096;
--hd-text-light: #A0AEC0;
--hd-border: #2D3748;
--hd-border-width: 2.5px;
/* Squiggly Hand-Drawn Radii */
--hd-radius-card: 255px 15px 225px 15px / 15px 225px 15px 255px;
--hd-radius-btn: 20px 5px 20px 5px / 5px 20px 5px 20px;
--hd-radius-circle: 50% 50% 50% 50% / 50% 50% 50% 50%;
--hd-font-heading: 'Architects Daughter', cursive;
--hd-font-body: 'Patrick Hand', cursive;
--hd-transition: all 0.2s ease;
--hd-shadow: 4px 5px 0px #2D3748;
--hd-shadow-lg: 6px 8px 0px #2D3748;
--hd-shadow-sm: 2px 3px 0px #2D3748;
--hd-shadow-press: 1px 1px 0px #2D3748;
}
body {
margin: 0;
font-family: var(--hd-font-body);
font-size: 1.15rem;
color: var(--hd-text);
background-color: var(--hd-bg);
-webkit-font-smoothing: antialiased;
}
/* Notebook Surface Container */
.hd-surface {
background-color: var(--hd-surface);
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-card);
padding: 2.5rem;
box-shadow: var(--hd-shadow);
position: relative;
transition: var(--hd-transition);
}
/* Global Logo */
.hd-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--hd-font-heading);
font-size: 1.35rem;
font-weight: 700;
color: var(--hd-text);
transition: var(--hd-transition);
}
.hd-logo:hover {
transform: rotate(-3deg) scale(1.05);
}
.hd-logo-icon {
width: 38px;
height: 38px;
border-radius: var(--hd-radius-circle);
background-color: var(--hd-secondary);
border: var(--hd-border-width) solid var(--hd-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--hd-font-heading);
font-size: 1.25rem;
font-weight: 700;
box-shadow: var(--hd-shadow-sm);
transform: rotate(4deg);
}
/* Global Buttons */
.hd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 2rem;
font-family: var(--hd-font-heading);
font-size: 1.05rem;
font-weight: 700;
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-btn);
cursor: pointer;
text-decoration: none;
box-shadow: var(--hd-shadow);
transition: var(--hd-transition);
gap: 0.5rem;
background-color: var(--hd-surface);
color: var(--hd-text);
}
.hd-btn:active {
transform: translate(3px, 4px);
box-shadow: var(--hd-shadow-press);
}
.hd-btn-primary {
background-color: var(--hd-secondary); /* Highlighter Yellow focus! */
}
.hd-btn-primary:hover {
background-color: #fef08a;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-outline {
background-color: var(--hd-surface);
}
.hd-btn-outline:hover {
background-color: #faf9f6;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-accent {
background-color: var(--hd-accent); /* Eraser pink */
}
.hd-btn-accent:hover {
background-color: #f472b6;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-ghost {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
.hd-btn-ghost:hover {
border-color: var(--hd-border);
background-color: rgba(254, 252, 191, 0.4);
box-shadow: var(--hd-shadow-sm);
transform: rotate(-1deg);
}
.hd-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: var(--hd-radius-circle) !important;
}
.hd-btn-block {
width: 100%;
}
/* Pencil Input Fields */
.hd-input {
width: 100%;
padding: 0.8rem 1.2rem;
border: var(--hd-border-width) dashed var(--hd-border);
border-radius: var(--hd-radius-btn);
font-family: var(--hd-font-body);
font-size: 1.15rem;
color: var(--hd-text);
background-color: var(--hd-surface);
outline: none;
transition: var(--hd-transition);
}
.hd-input::placeholder {
color: var(--hd-text-light);
}
.hd-input:focus {
border-style: solid;
background-color: #fffdec;
box-shadow: var(--hd-shadow-sm);
}
.hd-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: var(--hd-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--hd-font-heading);
margin: 0;
color: var(--hd-text);
line-height: 1.3;
}
p {
font-family: var(--hd-font-body);
line-height: 1.6;
margin: 0;
color: var(--hd-text-muted);
}
/* Helper Utilities */
.text-ink { color: var(--hd-primary) !important; }
.text-pink { color: var(--hd-accent) !important; }
.text-muted { color: var(--hd-text-muted) !important; }
.bg-paper { background-color: var(--hd-bg) !important; }
.bg-yellow { background-color: var(--hd-secondary) !important; }
.bg-pink { background-color: var(--hd-accent) !important; }
.bg-green { background-color: var(--hd-success) !important; }
.bg-red { background-color: var(--hd-danger) !important; }
.bg-blue { background-color: #bee3f8 !important; }
/* --- COMPONENT STYLES --- */
.hd-ledger-container {
max-width: 650px;
margin: 2rem auto;
padding: 3rem 2.5rem !important;
}
.hd-ledger-header {
margin-bottom: 2.5rem;
}
.hd-ledger-header h3 {
font-size: 1.75rem;
margin-bottom: 0.5rem;
}
.hd-ledger-header p {
font-size: 0.95rem;
color: var(--hd-text-muted);
font-weight: 600;
}
.hd-ledger-items {
position: relative;
padding-left: 2rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
.hd-ledger-items:before {
content: "";
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
width: var(--hd-border-width);
border-left: var(--hd-border-width) dashed var(--hd-border);
}
.hd-ledger-item {
display: flex;
align-items: flex-start;
position: relative;
}
.hd-ledger-marker {
position: absolute;
left: -2rem;
top: 4px;
width: 28px;
height: 28px;
border-radius: var(--hd-radius-circle);
border: 2px solid var(--hd-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
font-weight: 900;
box-shadow: var(--hd-shadow-sm);
z-index: 2;
transform: rotate(6deg);
}
.hd-ledger-content {
flex: 1;
background-color: var(--hd-surface);
border: var(--hd-border-width) dashed var(--hd-border);
border-radius: var(--hd-radius-btn);
padding: 1.25rem 1.5rem;
transition: var(--hd-transition);
}
.hd-ledger-content:hover {
border-style: solid;
transform: rotate(-0.5deg) scale(1.01);
background-color: #fffdec;
box-shadow: var(--hd-shadow-sm);
}
.hd-ledger-info {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 0.5rem;
flex-wrap: wrap;
gap: 0.5rem;
}
.hd-ledger-info h4 {
font-family: var(--hd-font-heading);
font-size: 1.1rem;
font-weight: 700;
}
.hd-ledger-time {
font-size: 0.85rem;
font-weight: 700;
color: var(--hd-text-muted);
}
.hd-ledger-content p {
font-size: 1rem;
margin: 0;
line-height: 1.5;
}
@media (max-width: 480px) {
.hd-ledger-info {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
}
Modals
Sketchy Confirmation Modal
HTML
<div class="hd-modal-overlay">
<div class="hd-modal-card hd-surface bg-paper">
<div class="hd-modal-badge bg-pink">✕</div>
<div class="hd-modal-header">
<h3>Wipe Canvas?</h3>
<p>Are you sure you want to discard your draft? This action cannot be erased by graphite rubbers!</p>
</div>
<div class="hd-modal-actions">
<button class="hd-btn hd-btn-outline" onclick="alert('Canceled!')">Keep Draft</button>
<button class="hd-btn hd-btn-accent" onclick="alert('Discarded!')">Discard!</button>
</div>
</div>
</div>
CSS (Component Only)
/* Component: Sketchy Confirmation Modal */
/* NOTE: This component requires base.css to be included in your page. */
.hd-modal-overlay {
position: relative;
width: 100%;
min-height: 380px;
background-color: rgba(252, 251, 247, 0.85); /* Notebook paper alpha backdrop! */
border: var(--hd-border-width) dashed var(--hd-border);
border-radius: var(--hd-radius-card);
display: flex;
align-items: center;
justify-content: center;
padding: 2.5rem;
}
.hd-modal-card {
max-width: 420px;
width: 100%;
text-align: center;
padding: 3.5rem 2.5rem 2.5rem !important;
position: relative;
transform: rotate(-1deg);
}
.hd-modal-badge {
position: absolute;
top: -1.25rem;
left: 50%;
transform: translateX(-50%) rotate(5deg);
width: 44px;
height: 44px;
border-radius: var(--hd-radius-circle);
border: var(--hd-border-width) solid var(--hd-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--hd-font-heading);
font-size: 1.35rem;
font-weight: 900;
color: var(--hd-text);
box-shadow: var(--hd-shadow);
}
.hd-modal-header {
margin-bottom: 2.5rem;
}
.hd-modal-header h3 {
font-size: 1.85rem;
margin-bottom: 0.75rem;
}
.hd-modal-header p {
font-size: 1rem;
color: var(--hd-text-muted);
font-weight: 600;
line-height: 1.5;
}
.hd-modal-actions {
display: flex;
gap: 1.25rem;
justify-content: center;
}
.hd-modal-actions .hd-btn {
flex: 1;
}
@media (max-width: 480px) {
.hd-modal-actions {
flex-direction: column-reverse;
gap: 1rem;
}
}
Combined CSS (Includes Base)
/*
COMBINED CSS
Includes base resets/variables + component styles.
Use this if you haven't included base.css elsewhere.
*/
/* --- BASE STYLES --- */
@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Patrick+Hand&display=swap');
/* Reset & Root variables */
*, *::before, *::after {
box-sizing: border-box;
}
:root {
--hd-bg: #FCFBF7; /* Soft notebook paper */
--hd-surface: #FFFFFF;
--hd-primary: #2B6CB0; /* Deep Ink Blue */
--hd-secondary: #FEFCBF; /* Highlighter Yellow */
--hd-accent: #F687B3; /* Eraser Pink */
--hd-success: #48BB78; /* Highlighter Green */
--hd-danger: #E53E3E; /* Red Marker */
--hd-text: #2D3748; /* Dark Graphite Pencil */
--hd-text-muted: #718096;
--hd-text-light: #A0AEC0;
--hd-border: #2D3748;
--hd-border-width: 2.5px;
/* Squiggly Hand-Drawn Radii */
--hd-radius-card: 255px 15px 225px 15px / 15px 225px 15px 255px;
--hd-radius-btn: 20px 5px 20px 5px / 5px 20px 5px 20px;
--hd-radius-circle: 50% 50% 50% 50% / 50% 50% 50% 50%;
--hd-font-heading: 'Architects Daughter', cursive;
--hd-font-body: 'Patrick Hand', cursive;
--hd-transition: all 0.2s ease;
--hd-shadow: 4px 5px 0px #2D3748;
--hd-shadow-lg: 6px 8px 0px #2D3748;
--hd-shadow-sm: 2px 3px 0px #2D3748;
--hd-shadow-press: 1px 1px 0px #2D3748;
}
body {
margin: 0;
font-family: var(--hd-font-body);
font-size: 1.15rem;
color: var(--hd-text);
background-color: var(--hd-bg);
-webkit-font-smoothing: antialiased;
}
/* Notebook Surface Container */
.hd-surface {
background-color: var(--hd-surface);
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-card);
padding: 2.5rem;
box-shadow: var(--hd-shadow);
position: relative;
transition: var(--hd-transition);
}
/* Global Logo */
.hd-logo {
display: inline-flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
font-family: var(--hd-font-heading);
font-size: 1.35rem;
font-weight: 700;
color: var(--hd-text);
transition: var(--hd-transition);
}
.hd-logo:hover {
transform: rotate(-3deg) scale(1.05);
}
.hd-logo-icon {
width: 38px;
height: 38px;
border-radius: var(--hd-radius-circle);
background-color: var(--hd-secondary);
border: var(--hd-border-width) solid var(--hd-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--hd-font-heading);
font-size: 1.25rem;
font-weight: 700;
box-shadow: var(--hd-shadow-sm);
transform: rotate(4deg);
}
/* Global Buttons */
.hd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 2rem;
font-family: var(--hd-font-heading);
font-size: 1.05rem;
font-weight: 700;
border: var(--hd-border-width) solid var(--hd-border);
border-radius: var(--hd-radius-btn);
cursor: pointer;
text-decoration: none;
box-shadow: var(--hd-shadow);
transition: var(--hd-transition);
gap: 0.5rem;
background-color: var(--hd-surface);
color: var(--hd-text);
}
.hd-btn:active {
transform: translate(3px, 4px);
box-shadow: var(--hd-shadow-press);
}
.hd-btn-primary {
background-color: var(--hd-secondary); /* Highlighter Yellow focus! */
}
.hd-btn-primary:hover {
background-color: #fef08a;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-outline {
background-color: var(--hd-surface);
}
.hd-btn-outline:hover {
background-color: #faf9f6;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-accent {
background-color: var(--hd-accent); /* Eraser pink */
}
.hd-btn-accent:hover {
background-color: #f472b6;
transform: translate(-1px, -1px);
box-shadow: 5px 6px 0px var(--hd-border);
}
.hd-btn-ghost {
background-color: transparent;
border-color: transparent;
box-shadow: none;
}
.hd-btn-ghost:hover {
border-color: var(--hd-border);
background-color: rgba(254, 252, 191, 0.4);
box-shadow: var(--hd-shadow-sm);
transform: rotate(-1deg);
}
.hd-btn-circle {
width: 44px;
height: 44px;
padding: 0;
border-radius: var(--hd-radius-circle) !important;
}
.hd-btn-block {
width: 100%;
}
/* Pencil Input Fields */
.hd-input {
width: 100%;
padding: 0.8rem 1.2rem;
border: var(--hd-border-width) dashed var(--hd-border);
border-radius: var(--hd-radius-btn);
font-family: var(--hd-font-body);
font-size: 1.15rem;
color: var(--hd-text);
background-color: var(--hd-surface);
outline: none;
transition: var(--hd-transition);
}
.hd-input::placeholder {
color: var(--hd-text-light);
}
.hd-input:focus {
border-style: solid;
background-color: #fffdec;
box-shadow: var(--hd-shadow-sm);
}
.hd-label {
display: block;
margin-bottom: 0.4rem;
font-family: var(--hd-font-heading);
font-weight: 700;
font-size: 1.05rem;
color: var(--hd-text);
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--hd-font-heading);
margin: 0;
color: var(--hd-text);
line-height: 1.3;
}
p {
font-family: var(--hd-font-body);
line-height: 1.6;
margin: 0;
color: var(--hd-text-muted);
}
/* Helper Utilities */
.text-ink { color: var(--hd-primary) !important; }
.text-pink { color: var(--hd-accent) !important; }
.text-muted { color: var(--hd-text-muted) !important; }
.bg-paper { background-color: var(--hd-bg) !important; }
.bg-yellow { background-color: var(--hd-secondary) !important; }
.bg-pink { background-color: var(--hd-accent) !important; }
.bg-green { background-color: var(--hd-success) !important; }
.bg-red { background-color: var(--hd-danger) !important; }
.bg-blue { background-color: #bee3f8 !important; }
/* --- COMPONENT STYLES --- */
.hd-modal-overlay {
position: relative;
width: 100%;
min-height: 380px;
background-color: rgba(252, 251, 247, 0.85); /* Notebook paper alpha backdrop! */
border: var(--hd-border-width) dashed var(--hd-border);
border-radius: var(--hd-radius-card);
display: flex;
align-items: center;
justify-content: center;
padding: 2.5rem;
}
.hd-modal-card {
max-width: 420px;
width: 100%;
text-align: center;
padding: 3.5rem 2.5rem 2.5rem !important;
position: relative;
transform: rotate(-1deg);
}
.hd-modal-badge {
position: absolute;
top: -1.25rem;
left: 50%;
transform: translateX(-50%) rotate(5deg);
width: 44px;
height: 44px;
border-radius: var(--hd-radius-circle);
border: var(--hd-border-width) solid var(--hd-border);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--hd-font-heading);
font-size: 1.35rem;
font-weight: 900;
color: var(--hd-text);
box-shadow: var(--hd-shadow);
}
.hd-modal-header {
margin-bottom: 2.5rem;
}
.hd-modal-header h3 {
font-size: 1.85rem;
margin-bottom: 0.75rem;
}
.hd-modal-header p {
font-size: 1rem;
color: var(--hd-text-muted);
font-weight: 600;
line-height: 1.5;
}
.hd-modal-actions {
display: flex;
gap: 1.25rem;
justify-content: center;
}
.hd-modal-actions .hd-btn {
flex: 1;
}
@media (max-width: 480px) {
.hd-modal-actions {
flex-direction: column-reverse;
gap: 1rem;
}
}