Artode Skills & Vibe Log

This document tracks the UI decisions, aesthetic principles, and technical practices maintained across the Artode codebase. It serves as the source of truth for the "Vibe Coded" aesthetic.

Table of Contents

01 Design Philosophy02 Typography03 Color System04 UI Patterns & Interactions05 Pure Particle Philosophy06 Component Catalog

#Design Philosophy

  • Aesthetic: Enterprise-grade, "Notion-like" editorial layout.
  • Core Concept: "Narrow Reader View" — content is constrained to a central column (max-width 900px) rather than sprawling full-width, promoting focus and readability.
  • Tone: Premium, bespoke, intellectual, slightly avant-garde.

#Typography

Playfair Display

Primary Serif (Headings)

Used for emotional weight and "Royal" aesthetic. We mix Bold 700 weights with Italics to create editorial contrast.

Inter

Primary Sans (Body)

Used for clarity, utility, and modern interface elements like navigation, paragraphs, button labels, and tags.

#Color System

brand-red
Brand Deep Red
Selection, Hover, Accents
#1c1917
Stone 900
Primary Text

#UI Patterns

  • Selection State: Custom ::selection styling (Red bg, White text) to reinforce branding.
  • Catalog Cards: Minimal 1px borders. Micro-interaction on hover darkens the border and fills the icon container with brand red.
  • Canvas Integration: Particle simulations are treated as first-class UI citizens, embedded seamlessly within the React layout without iframe boxing.

#Pure Particle Philosophy

Strict Rules

  • 01.No Lines: Avoid lineTo. Flow and structure should be implied by particle density.
  • 02.No Solids: Shapes must be constructed from aggregations of individual particles.
  • 03.Physics Driven: Interactions must feel organic (drag, ease, gravity) rather than linear.

#Component Catalog

NameDescription
BurstButtonA particle button that explodes/disperses on click and self-heals back to shape.
RepelTextA "Sand" simulation where text is rendered as particles that scatter on mouse proximity and elastically return.
FluidTextParticles form text and react to mouse velocity with fluid-like physics (diffusion, viscosity).
MagneticTypeText particles with magnetic attraction - pulled toward cursor with spring physics.
WarpTextOptical lens/fisheye distortion effect that magnifies text particles near cursor.
CursorTrailA "Comet" emitter that sheds discrete particles on mouse movement, which then decay and fade.
DataCloudFlow field with sinusoidal particle currents and trailing effect.