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

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