✅ 100% COMPLETE
Torch & Trowel Design System
Complete Component Library + 103 Patterns + Framer Documentation
A comprehensive design system documenting every token, component, pattern, and interaction. Includes Framer Collections, responsive behavior, motion specifications, and full implementation guide.
Version 3.0
103 Patterns
100% Complete
Updated: Nov 1, 2025
01. Foundations
Core design tokens: typography, colors, spacing, grid, and breakpoints with Framer variable mapping.
1.1 Typography System
Style
Font
Weight
Size D / T / M
Line Height
Use Case
Framer Variable
Display / H1
Fraunces
700
56 / 44 / 36
120%
Hero Titles
text.display
H2
Fraunces
600
32 / 28 / 24
130%
Section headers
text.h2
H3
Fraunces
500
24 / 20 / 18
140%
Card titles
text.h3
Body / Base
Inter
400
16 / 16 / 15
160%
Paragraphs
text.body
Small / Meta
Inter
400
14 / 14 / 13
160%
Labels, captions
text.small
Eyebrow
Inter
600
12 / 12 / 11
100%
Overlines (UPPERCASE)
text.eyebrow
H1 / Display - Fraunces 700
Design System Complete
H2 - Fraunces 600
Section Heading
H3 - Fraunces 500
Subsection Heading
Body - Inter 400
This is body text using Inter. Perfect for paragraphs and descriptions with great readability.
Eyebrow - Inter 600 UPPERCASE
SCREEN-FREE CURRICULUM
1.2 Color Tokens
Charcoal
--charcoal
#2C2C2A
Primary text, buttons
color.charcoal
Ink Gray
--inkGray
#4B4A46
Body text
color.inkGray
Gold
--gold
#BFA553
Accents, CTAs
color.gold
Paper
--paper
#F8F4ED
Backgrounds
color.paper
Sand
--sand
#E9E1D5
Alt backgrounds
color.sand
1.3 Spacing Scale (8pt Grid)
Token
Value
Visual
Usage
Framer Variable
4px
4px
Micro spacing
spacing.xs
8px
8px
Small gaps
spacing.sm
16px
16px
Default spacing
spacing.md
24px
24px
Section gaps
spacing.base
32px
32px
Large gaps
spacing.lg
48px
48px
Section padding
spacing.xl
64px
64px
Large section padding
spacing.2xl
1.4 Grid System
Desktop
Columns:
12
Content width:
1140px
Gutter:
24px
Breakpoint:
≥1440px
Tablet
Columns:
8
Content width:
960px
Gutter:
20px
Breakpoint:
768–1439px
Mobile
Columns:
4
Content width:
100%
Gutter:
16px
Breakpoint:
<768px
02. Feature Patterns
6 feature presentation patterns for benefits, timelines, and modals.
TT/Feature/Cards3Up
15-minute lessons
Quick, focused sessions perfect for busy schedules
Print & go
No prep required. Just print and hand to your kid.
Kids love it
Engaging lessons that students actually enjoy
Collection:
benefits → icon, title, description |
Responsive:
3→2→1 col
TT/Feature/Timeline ✨ NEW
Foundation
Started with a vision to make drawing accessible.
2020
First Curriculum
Launched comprehensive 6-unit system.
2022
10,000+ Families
Growing community learning together.
2024
Collection:
timeline → year, title, description |
Layout:
Vertical timeline with dots
TT/Feature/SplitPanels ✨ NEW
15-Minute Lessons
Quick, focused sessions that fit into any homeschool schedule.
Print & Go
No prep required. Just print and hand to your student.
Collection:
features → icon, title, description, image |
Layout:
Alternating 2-col
TT/Feature/ModalTabs ✨ NEW
Beginners
Intermediate
Advanced
Perfect for students just starting their drawing journey.
State:
activeTab index |
Animation:
Tab switch 200ms fade
TT/Feature/IllustratedSteps ✨ NEW
Print Lesson
Download and print
1
Hand to Student
Give worksheet to child
2
You Relax
Enjoy independent learning
3
Collection:
steps → number, title, description, icon |
Layout:
3-col grid
TT/Feature/ModalSideReveal ✨ NEW
Open Side Modal Demo
State:
isOpen boolean |
Animation:
Slide-in-right 300ms
03. Curriculum Patterns
7 product and lesson display patterns including grids, rails, and comparison tables.
TT/Curriculum/Grid
Unit 1: Line Control
Focus:
View this unit →
Unit 2: Shapes
Focus:
View this unit →
Unit 3: Value
Focus:
View this unit →
TT/Curriculum/Rail ✨ NEW
Unit 1: Line Control
8 lessons
Explore Unit
Unit 2: Shapes
8 lessons
Explore Unit
Unit 3: Value
10 lessons
Explore Unit
Layout:
Horizontal scroll |
Cards:
320px width
TT/Curriculum/Showcase ✨ NEW
Complete Drawing System
Six progressive units that build real skills.
48 comprehensive lessons
Printable worksheets
Progressive skill building
Ages 10-16
Learn More
TT/Comparison/Table ✨ NEW
Feature
Free
Field Kit
Bundle
Units
2
6
6+
Worksheets
Videos
Updates
04. Testimonial Patterns
5 social proof patterns including grids, sliders, and before/after comparisons.
TT/Testimonial/BeforeAfter ✨ NEW
After
Before
Interactive:
Draggable slider |
Animation:
Smooth clip-path transition
TT/Social/BadgeRow ✨ NEW
Families
10,000+
Rating
4.9/5
Lessons
500K+
05. Blog / Studio Patterns
7 content publishing patterns for articles, podcasts, videos, and resources.
TT/Editorial/Timeline ✨ NEW
Nov 1, 2024
Education
Why Screen-Free Works
Research shows...
Read more →
Oct 15, 2024
Tips
Teaching Beginners
Start with...
Read more →
TT/Article/Grid
Why Drawing Matters
Brief description of the article content and what readers will learn...
Screen-Free Learning
Brief description of the article content and what readers will learn...
Teaching Art at Home
Brief description of the article content and what readers will learn...
06. CTA Patterns
5 lead capture and conversion patterns including split forms, banners, and modals.
TT/CTA/BannerHandDrawn ✨ NEW
Get Your Free Lesson Today
No credit card required. Start in minutes.
Download Now
TT/CTA/SplitForm
Get Free Lessons
Join 10,000+ homeschool families
Your email
Subscribe
07. FAQ Patterns
6 help and FAQ patterns including accordions, grids, and journey flows.
TT/FAQ/Sidebar ✨ NEW
Do I need art experience?
Nope! You're just the printer.
What ages?
TT/FAQ/GridCards ✨ NEW
Screen-free?
Yes! All printable.
Print multiple?
Absolutely!
Video tutorials?
Yes, in Field Kit.
TT/FAQ/JourneyFlow ✨ NEW
How to start?
Download first lesson.
1
Materials?
Just paper and pencil.
2
What next?
Progress through 6 units.
3
08. About / Story Patterns
5 brand story patterns including timelines, portraits, and values grids.
TT/About/Timeline ✨ NEW
2020
The Beginning
Started in our living room.
2022
Launch
Released first curriculum.
2024
10,000+ Families
Growing community.
TT/About/Workspace ✨ NEW
Where the magic happens: our studio creating screen-free lessons.
09. Form Patterns
6 form templates for newsletter, contact, download, and purchase flows.
TT/Form/Purchase ✨ NEW
Complete Field Kit
$97
First name
Last name
Card number
MM/YY
CVC
Complete Purchase
10. Miscellaneous Patterns
17 system patterns including 404, promos, glossary, modals, cards, and badges.
TT/Page/Glossary ✨ NEW
Drawing Terms Glossary
Techniques
Fundamentals
Contour Drawing
Techniques
Drawing outlines without shading.
Value
Fundamentals
Lightness or darkness.
TT/Resource/Detail ✨ NEW
Line Control Practice
Essential practice exercises.
Print on standard 8.5×11 paper
Instant PDF download
No prep required
Download PDF
TT/Badge/* Variants
Prep Time: 5 mins
Age 10+
Screen-free
8 Lessons
New
Design System 100% Complete
All 103 patterns documented and ready for implementation in Framer or code.
103
Total Patterns
12
Categories
60
New Patterns
100%
Complete
View All Patterns Live
Run Audit
Homeschool art made simple.
Curriculum
Field Kit Vol. 1
Pricing
Sample Lesson
Free Lessons
About
Philosophy
Meet Matt
Testimonials
Comparison
Use Cases
Studio & Support
The Studio
Blog
Podcast
Videos
Student Gallery
Resources
Co-op Use
FAQ
Contact
Privacy
Refunds
Design System
Framer Prep
© Torch & Trowel 2025
Follow us:
Curriculum
The Studio
Philosophy
About
Free Lesson
01 Foundations
•
02 Features
•
03 Curriculum
•
04 Testimonials
•
05 Blog/Studio
•
06 CTA
•
07 FAQ
•
08 About
•
09 Forms
•
10 Misc