# pencil.dev — Design System

## 1. Visual Theme & Atmosphere
Pencil is a developer product with a design system that is polished, systematic, and warm. The CSS custom properties reveal a fully considered token architecture: named surfaces, semantic state colours, two brand fonts, and a complete radius/shadow scale. The palette is light and neutral with a single orange accent (`#ff8400`) and a violet secondary (`#6682ff`). DM Sans handles display moments; Rubik carries body text. The result is approachable developer tooling — not cold enterprise software, not playful startup — something in between.

## 2. Color Palette & Roles
| Token | Value | Role |
|-------|-------|------|
| Background | `#fff` | Canvas |
| Foreground | `#171717` | Primary text |
| Surface | `#fafafa` | Subtle section fill |
| Input | `#e6e6e6` | Form input background |
| Muted | `#666` / `#939399` | Secondary/tertiary text |
| Accent orange | `#ff8400` | Brand energy, CTAs |
| Accent violet | `#6682ff` | Secondary interactive, links |
| Success | `#16a34a` | Confirmation states |
| Error | `#dc2626` | Destructive/error states |
| Warning | `#d97706` | Alert states |

Complete semantic state system. No gaps in the token coverage.

## 3. Typography Rules
- **Display**: DM Sans — 600 weight at 112px for hero, 80px for h2. Tight tracking (-2.24px hero). Modern, clean, slightly casual.
- **Body**: Rubik — a rounded humanist sans. Warmer and more approachable than DM Sans. Used for body copy and secondary UI.
- The DM Sans + Rubik pairing separates energy (display) from warmth (body).
- Font tokens: `--font-heading: "DM Sans"` and `--font-body: "Rubik"`.
- No serif. No monospace in the primary system.

## 4. Component Stylings
- **Radius scale**: 0px (none) → 8px (xs) → 16px (sm) → 20px (md) → 24px (lg) → 9999px (full). Well-defined and semantic.
- **Shadows**: Two-level scale: `elevation-1` (hairline) → `elevation-2` (card). Plus inset highlight for buttons.
- **Button primary**: Near-black `#242424` fill, hover `#2f2f2f`.
- **States**: Full green/red/yellow system for success/error/warning with matching backgrounds.

## 5. Layout Principles
- Next.js / Tailwind-powered. Token-driven spacing.
- DM Sans hero at 112px creates an immediate scale contrast with 16px body.
- Input components at `#e6e6e6` background — distinct surface from page.
- Component-level tokens (button, shadow, radius) baked in.

## 6. Depth & Elevation
Two shadow elevations: `elevation-1: 0 1px 2px -1px rgba(0,0,0,0.08)` (hairline), `elevation-2: 0 4px 20px -1px rgba(0,0,0,0.08)` (card). Inset highlight on buttons. A clean, three-level depth model.

## 7. Do's and Don'ts
**Do:**
- Use DM Sans only for headings; Rubik for all body copy
- Apply the defined radius scale (`--rounded-xs` through `--rounded-full`) — never arbitrary values
- Use semantic state colours for system feedback, not the brand accent

**Don't:**
- Mix DM Sans and Rubik in the same text block
- Use `#ff8400` for error or warning states — those have dedicated tokens
- Add a third display font or serif

## 8. Responsive Behavior
112px hero headline needs responsive scaling — likely viewport-relative or clamp(). The rounded-full radius (9999px) on buttons holds at all sizes. Complete state system ensures accessibility across all screen sizes.

## 9. Agent Prompt Guide
> Reproduce pencil.dev style: white canvas, near-black `#171717` text, DM Sans 600 for display (112px hero, tight tracking), Rubik for body. Orange `#ff8400` brand, violet `#6682ff` secondary. Radius scale 8→24→9999px. Two shadow elevations. Full semantic state system (success/error/warning).

*Generated by Sparkbites — extracted from live CSS analysis*