name: lime-charcoal-design
version: alpha
description: >
  A moody, nocturnal charcoal-sketchbook canvas: layered dark greys
  (#2C2C2C page, #383838 surface, #1A1A1A secondary) with soft off-white ink
  (#E0E0E0) and one electric lime-chartreuse voltage (#DFFF00) that glows. The
  system is token-driven (--k-* CSS variables) with a Bitter slab-serif heading
  + Cabin body pairing, small radii (2/4/8/12px) and chunky soft black offset
  shadows (up to 12px 12px). Wabi-sabi imperfection is the theme — slightly
  rotated cards, hand-drawn underline scribbles, crosshatch and carbon-fibre
  textures, torn-paper clip-paths and marching-ant borders.
colors:
  # Brand
  primary: '#DFFF00'           # lime/chartreuse — CTAs, highlights, glow
  primary-hover: '#EFFF33'
  on-primary: '#000000'        # black text on lime
  accent: '#DFFF00'            # same as primary (single voltage)
  # Surface
  surface: '#2C2C2C'           # page background (--k-color-bg-page)
  surface-card: '#383838'      # cards (--k-color-bg-surface)
  surface-card-hover: '#444444'
  surface-secondary: '#1A1A1A' # sidebar, dark sections, footer
  # Text
  on-surface: '#E0E0E0'        # primary off-white ink
  on-surface-secondary: '#A0A0A0'
  on-surface-muted: '#666666'
  # Hairlines
  border: '#444444'
  border-hover: '#555555'
  # Semantic
  success: '#4ADE80'
  warning: '#FACC15'
  error: '#F87171'
typography:
  heading:
    fontFamily: '"Bitter", serif'
    fontSize: 72px              # hero h1 (text-7xl)
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.01em
    effect: 'glow-text: text-shadow 0 0 15px rgba(223,255,0,0.3)'
  heading-section:
    fontFamily: '"Bitter", serif'
    fontSize: 48px             # --k-font-size-5xl
    fontWeight: 700
  body:
    fontFamily: '"Cabin", sans-serif'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-lg:
    fontFamily: '"Cabin", sans-serif'
    fontSize: 20px
    fontWeight: 500
  label:
    fontFamily: '"Cabin", sans-serif'
    fontSize: 12px             # --k-font-size-xs
    fontWeight: 700
    letterSpacing: 0.1em       # uppercase tags, tracking-widest
rounded:
  sm: 2px                      # --k-radius-sm
  md: 4px                      # --k-radius-md (default)
  lg: 8px                      # --k-radius-lg
  xl: 12px                     # --k-radius-xl
  full: 9999px                 # pills, avatars, footer dock
  wabi: '40px 10px 45px 12px / 15px 40px 10px 45px'  # organic testimonial bubble
spacing:
  # --k-spacing scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 28px
  xxl: 32px
  xxxl: 48px
shadows:
  sm: '2px 2px 0px rgba(0,0,0,0.4)'   # --k-shadow-sm
  md: '6px 6px 0px rgba(0,0,0,0.5)'   # --k-shadow-md
  lg: '12px 12px 0px rgba(0,0,0,0.6)' # --k-shadow-lg (cards)
components:
  card-feature:
    background: '{colors.surface-card}'
    border: '1px solid rgba(255,255,255,0.1)'
    boxShadow: '{shadows.lg}'
    rotate: '-1deg to 1.5deg'          # wabi-sabi tilt, hover → rotate-0 + scale
  button-primary:
    background: '{colors.surface-card}'
    border: '1px solid rgba(255,255,255,0.2)'
    textColor: '{colors.primary}'
    rounded: '{rounded.sm}'
    style: 'neomorph-cutout-dark inset shadow'
    hover: 'translateY(-6px)'
  button-marching:
    border: 'animated dashed {colors.on-surface} (ants 10s linear)'
    fill: '{colors.primary} sweeps up on hover; text → black'
  highlight-mark:
    background: '{colors.primary}'
    textColor: '{colors.on-primary}'
    rotate: '-1deg'                    # "the shadows?" marker
  morph-blob:
    background: '{colors.primary}'
    animation: 'morph 6s ease-in-out alternate (organic border-radius)'
  footer-dock:
    background: '#111111'
    rounded: '{rounded.full}'
    boxShadow: '0 20px 50px rgba(0,0,0,0.8)'
motion:
  signatures: 'morph 6s (blob), ants 10s (marching border), animate-bounce/pulse'
  duration-card: 300-500ms
  note: 'source globally disables transitions; durations are nominal'
icons:
  library: tabler-icons-webfont + openmoji   # ti-pencil-code, ti-moon-stars, artist emojis
  style: line / outline (tabler), color emoji (openmoji)
  colorRule: 'lime for active/brand glyphs; on-surface otherwise; emojis grayscaled'

Lime Charcoal — "WanderSketch Charcoal"

Design spec — version alpha. Source: static HTML (lime-charcoal.html); tokens read from the --k-* CSS variables and component CSS. Fictional nocturnal sketching app; described factually.

Overview

A moody, nocturnal charcoal sketchbook. The canvas is a layered dark grey — {colors.surface} #2C2C2C page, {colors.surface-card} #383838 cards, {colors.surface-secondary} #1A1A1A sidebar/footer — inked in soft off-white {colors.on-surface} #E0E0E0. The single brand voltage is an electric lime-chartreuse {colors.primary} #DFFF00 that literally glows (text-shadow, drop-shadow) and is reserved for CTAs, highlights and active states. The design is token-driven via --k-* variables and leans into wabi-sabi imperfection: cards sit at slight rotations and straighten on hover, headings carry hand-drawn underline scribbles, and surfaces wear crosshatch, carbon-fibre, torn-paper and marching-ant textures. Type pairs a Bitter slab-serif (headings) with Cabin (body). Radii are small (2/4/8/12px) and shadows are chunky soft-black offsets (up to 12px 12px 0).

Colors

Brand. Lime {colors.primary} #DFFF00 (hover #EFFF33) is the only saturated color — it glows on headings, fills the morph-blob nav indicator, sweeps up inside the marching-ant button, and highlights key words on black text ({colors.on-primary}). Discipline: lime is scarce against the grey, always signalling "active/brand."

Surfaces. Three greys ladder from page → card → secondary, with {colors.surface-card-hover} #444444 on hover; {colors.border} #444 hairlines (hover #555).

Text. {colors.on-surface} #E0E0E0 primary, {colors.on-surface-secondary} #A0A0A0, {colors.on-surface-muted} #666. Semantic success/warning/error are defined as #4ADE80/#FACC15/#F87171 for status.

Typography

Bitter slab-serif for headings (700, with a lime glow on the hero); Cabin sans for body and uppercase labels.

Token	Family	Size	Weight	Usage
heading	Bitter	72px	700	Hero h1 (glow)
heading-section	Bitter	48px	700	Section h2
body	Cabin	16px	400	Body prose
body-lg	Cabin	20px	500	Lead/testimonial
label	Cabin	12px	700	Uppercase tags (tracking-wide)

Layout

--k-spacing scale (4/8/16/24/28/32/48). A fixed 80px icon sidebar (with a morphing lime blob marking the active item) sits beside a main column: a hero with a torn-paper panel floating over scattered, rotated photo cards; a 3-up feature card grid (each card tilted, straightening on hover); alternating wabi-border testimonial bubbles; a centered CTA; and a floating rounded footer dock.

Elevation & Depth

Chunky soft-black offset shadows define the brutalist-but-soft depth: {shadows.sm} 2px2px, {shadows.md} 6px6px, {shadows.lg} 12px12px on feature cards. Buttons use an inset "neomorph cutout" shadow. The footer dock floats with a large ambient 0 20px 50px rgba(0,0,0,0.8).

Shapes

Small radii — {rounded.sm} 2px, {rounded.md} 4px (default), {rounded.lg} 8px, {rounded.xl} 12px, plus {rounded.full} for pills/avatars/dock and an organic wabi radius (40px 10px 45px 12px / …) for testimonial bubbles. The morph-blob animates its border-radius continuously.

Components

• card-feature — #383838 surface, white/10 hairline, 12px offset shadow, tilted ±1–1.5° (hover → straight + scale 1.02).
• button-primary — neomorph inset cutout on card surface, lime text, lifts on hover.
• button-marching — animated dashed white border; lime fills upward on hover, text turns black.
• highlight-mark — lime block behind black words, slightly rotated.
• morph-blob — lime organic shape marking the active nav icon.
• footer-dock — rounded-full #111 pill with brand + nav + version.

Motion

Signatures: the morph blob (6s ease-in-out alternate), marching ants (ants 10s linear), animate-bounce/pulse accents, and hover tilt-straightening on cards. (Transitions are globally disabled in the capture source, so durations are the authored intent.)

Iconography

Tabler line icons (ti-pencil-code, ti-moon-stars, ti-home-2) — lime for brand/active, on-surface otherwise — plus grayscaled OpenMoji color emoji (artist, moon, star) as illustrative accents.

Do's and Don'ts

• Do keep the layered charcoal greys with soft off-white ink.
• Do reserve glowing lime for CTAs, highlights and the active nav blob.
• Do embrace wabi-sabi: slight card rotations, scribble underlines, torn/crosshatch textures.
• Do use the --k-* tokens and chunky soft-black offset shadows.
• Don't brighten the canvas — this is a dark, nocturnal theme.
• Don't overuse lime; its scarcity against grey is the point.
• Don't use large/perfect radii on cards; keep small radii + organic wabi shapes for bubbles.

Known Gaps

• Values read from the implementation's --k-* design tokens. Some photo sources are local (/api/local/images/...). Copy/imagery are sample content; the source disables transitions globally.