Basic level
Basic Drawing Techniques
You’ll start by learning essential drawing skills, including pencil control, line work, and how to sketch basic shapes and forms.
Course Craft
An online illustration course: a warm off-white page that keeps falling into deep maroon, one bright red for every accent, Sentient for every heading down to 20px and DM Sans for everything else.
- Variables
--cc-*- Defined in
app/demo/course-craft/craft.css- Values
- Read live from that file, so this page always matches it.
Colour
The whole palette, grouped by the job each colour does. Components only paint with these.
Ink
--cc-inkHeadings, strong text, the primary button
--cc-ink-softBody copy, badges, the primary button's hover
--cc-placeholderField placeholders
Surfaces
--cc-surfaceThe page, the anchor rail, the light price card
--cc-surface-2Form fields, the secondary button
--cc-surface-3The secondary button's hover
--cc-chapterThe chapter list on the course page
--cc-lightThe white button, the white badge, back to top
--cc-light-hoverThe white button's hover
Darks
--cc-darkThe navbar, the hero, the student wall, pricing, the footer
--cc-darkerThe closing band
--cc-bannerThe promo bar
--cc-panelThe footer's call-to-action panel
--cc-panel-lineIts hairline
Blush
--cc-blushThe courses band, lesson cards, the form's thank-you
--cc-blush-deepThe course card
Brand
--cc-brandEvery accent: the hero title, feature ticks, checks, the nav underline
--cc-brand-hoverThe brand button's hover
--cc-brand-deepThe closing band's title
--cc-on-brandText on the brand button
On dark
--cc-on-darkHeadings and labels on the darks and on the ink
--cc-on-dark-softCopy on the darks
Lines
--cc-lineHairlines, the anchor rail, the outline button
--cc-line-hoverField border on hover
Typography
The ramp, largest first. Each class sets its own face, size, leading, weight and tracking, and the display sizes step down at the breakpoints.
Display
.cc-6xlMaster the Art of 2D Landscape Illustration
Display 5xl
.cc-5xl$199
Display 4xl
.cc-4xlHave any doubt?
Heading 3xl
.cc-3xlIllustration Academy From Basics to Brilliance
Heading 2xl
.cc-2xlLearn the essentials of 2D illustration.
Heading xl
.cc-xlBasic Drawing Techniques
Lead
.cc-lgDiscover courses tailored for all levels.
Body
.cc-baseLearn at your own pace with lifetime access to all lessons.
Corners
Every radius in the template. Nothing rounds on a value of its own.
--cc-radiusEvery picture, card and panel
--cc-radius-thumbThe course thumbnail, back to top
--cc-radius-tileBadges, form fields, lesson and student pictures
--cc-radius-buttonEvery button
--cc-radius-courseThe course card
Spacing
The page rhythm. These step down at the breakpoints, so the readings follow the window. Each bar is drawn at its real length.
--cc-sectionTop and bottom of a band
--cc-gapBetween a section's heading and its content
--cc-gutterPage edge
--cc-containerThe widest a column gets
Motion
How long things take and how they ease. Hover a row to run it: durations on the house ease, easings on one duration long enough to show the curve.
Durations
--cc-dur-fastThe nav underline, the footer icons
--cc-durFields, the logo, back to top
--cc-dur-slowButtons, the course thumbnail swap
Easings
--cc-easeButtons, the thumbnail, the nav underline, back to top
--cc-ease-expoFields and the logo
Breakpoints
Where the layout changes. A media query cannot read a variable, so these are the one set of numbers written straight into the stylesheet and the components.
max-width: 991pxTablet: the rhythm and the two largest display sizes step down, grids go to one or two columns, the course page drops its buy card.
max-width: 767pxLarge phone: the nav links hide, the gutter tightens, the display sizes and the rhythm step down again.
max-width: 479pxPhone: the navbar buttons and the hero calls to action go full width.
Components
The template's building blocks, live. Hover them: this is how they behave on the pages.
ButtonsCraftButton. Primary for the one action a light band wants, the rest for everything beside it.
Buttons on a dark bandWhite for the call to action on maroon; outline and ghost are the navbar's pair.
BadgesBadge. Outlined for levels, counts and section labels; white over a picture or a dark band.
Course Highlights12 ChaptersCreative Highlights
Section headingSectionHeading and HeadingText. A badge, a display title and a lead, centred and balanced; align left for the FAQ and the testimonial.
Choose Your Path
Explore Our Courses
Discover a variety of courses designed to help you develop specific illustration skills and techniques, tailored for all levels.
FeatureFeature, on the brand tick that is the template's only bullet. On the page and on the darks.
Self-Paced Learning
Move through the lessons at your own speed, with lifetime access to course materials so you can learn whenever it suits you best.
Expert Instructors
Get step-by-step guidance from industry professionals who will help you develop your unique artistic style.
Lesson cardLessonCard. The home's lesson grid: a picture with its level, then the title and a line of copy.
Basic level
Understand Color Theory
Explore the principles of color, how to combine hues and apply them effectively in both traditional and digital media.
Course cardCourseCard. Hover the picture: it swaps to a second illustration on the slow duration.
12 Chapters89 Minutes
Illustration Academy From Basics to Brilliance
Master essential techniques and unleash your creativityto bring your illustrations to life.
Basic Level
Explore courseMaster Essential Techniques
Gain a deep understanding of both traditional and digital illustration methods, from basic sketches to advanced art techniques.
Create Polished Illustrations
Learn to take your illustrations from rough drafts to fully finished, professional-level artwork.
Price cardPriceCard. Light on the home's dark band; inverted to the ink on the course page's light one.
Join today
Access the complete course with a one-time payment and enjoy lifetime access to all materials.
$199
one-time payment
Learn everything from the basics to advanced illustration techniques.
Receive step-by-step instruction from industry professionals.
Learn at your own pace with lifetime access to all lessons.
Build a portfolio with hands-on assignments and projects.
Join today
Access the complete course with a one-time payment and enjoy lifetime access to all materials.
$199
one-time payment
Learn everything from the basics to advanced illustration techniques.
Receive step-by-step instruction from industry professionals.
Learn at your own pace with lifetime access to all lessons.
Build a portfolio with hands-on assignments and projects.
Contact formContactForm. A field warms its border on hover and takes the ink on focus; sending swaps in the thank-you panel.
Anchor railAnchorRail. The sticky row of section links under a page's hero; hover a link for the brand underline.
