Live preview
Skillo homepage: a warm off-white page framed by thin rules with small terracotta squares on its corners, the spaced capitals Applied AI, taught properly. above the word Skillo drawn as a large terracotta outline, then the line Short taught programmes built with people who ship AI systems for a living. Eleven weeks, one real project. beside a black Start for free button
23 / ASTRO THEME

Skillo

For a school whose name is the first thing it teaches.

  • Education
  • Courses and bootcamps
  • AI and data

The twenty-third Quaeris Design release. An applied-AI school carrying a programme catalogue with a page per track, a method page, two published plans, an application page and a journal with authors and categories — twenty-nine routes, with the whole demo live and open to inspection.

MEASURED FROM THE DEMO
5.2 KB
JavaScript
29
Indexable routes
0
Blocking stylesheets
3
Font families
WebP
Images
Astro 7.3
Built with

Every figure came from astro-design-skillo.pages.dev. Open it and check.

One published website. VAT included; the studio licence covers client work. 14 days to withdraw, until the first download.

THE BRIEF

What it is for, and who it suits.

A visual direction for a school that teaches applied AI in short cohorts. Warm paper, near-black ink and one terracotta, Instrument Serif for the headlines, Schibsted Grotesk for reading and JetBrains Mono in small spaced capitals for every label. The one decision is the opening: the home page has no headline sentence, only the school’s name tracing itself along its own outline in terracotta, in a loop — and below it the palette holds to three hues, with photographs turned into a terracotta duotone so they join it instead of fighting it.

  • Training providers and short-course schools
  • Bootcamps and cohort-based programmes
  • Universities and academies presenting a technical curriculum
  • Instructors and studios selling a course with an application step
THE PAGE SET

Routes you get, and where they come from.

Every route below is generated at build and served as a static file.

Pages

Written once, edited in place.
  • Home
  • Programmes
  • Features
  • Method
  • Pricing
  • Journal
  • About
  • Contact
  • Apply
  • Legal notice
  • Privacy
  • Site map

Collections

One Markdown file becomes a route, an index entry and a listing.
  • Programme × 4
  • Article × 3
  • Author × 3
  • Category × 5

System

Generated, never hand-maintained.
  • 404
  • sitemap.xml
  • robots.txt
DESIGN NOTES

The decisions behind the look.

01

The name draws itself.

The home page opens on the school’s name traced along its own outline, in a terracotta gradient, and redrawn in a loop. The outline is measured once in the browser, with the glyph shown finished while it is; without JavaScript or under reduced motion it simply stays drawn. The hidden heading behind it is the page’s only h1, and the component can be reused on any page.

02

Three hues, no more.

Paper, ink and terracotta are the whole palette; every other shade is a transparency of the first two. The terracotta is never decorative: it marks the labels, the small squares on the section corners, button hovers and the selection colour. Photographs go through a grayscale and luminosity blend over terracotta, so they read as part of the page.

03

Motion runs on springs.

One IntersectionObserver handles the scroll reveals, the word-by-word headlines — read whole by screen readers — and the animated figures. Curves are springs written with linear() instead of CSS keywords. Reduced motion shows everything at once, and a fallback timer reveals the page if the observer never fires.

04

Nothing third-party by default.

Identity, contact form, analytics and newsletter each live in one file under src/config. Out of the box the theme ships no third-party script, sets no cookie and needs no account: the form uses mailto, analytics and the newsletter are off. A provider chosen without its key falls back with a warning in the build instead of shipping broken.

PALETTE
  • Paper #f4f1ea Page ground, and text on ink
  • Linen #ebe6da Tinted sections
  • Card #f9f7f2 Cards and raised surfaces
  • Ink #17150f Text, buttons and the inverted sections
  • Terracotta #b4462a The only accent: labels, corners, the traced name
  • Fired clay #8e3520 The end of the trace gradient
TYPEFACES
Display
Instrument Serif 400 and its italic, headlines on a five-step scale
Body
Schibsted Grotesk variable weight, running text and the interface
Labels
JetBrains Mono 500 only, 11px spaced capitals
WHAT SHIPS WITH IT

Know what you’re getting.

A good-looking screenshot is the beginning. The details help you choose.

01 / THE PAGES

A view of the whole site.

Every release lists its page set, from the homepage to the article, author and category templates your project actually needs.

Page list with each release
02 / THE EXPERIENCE

Every screen matters.

Desktop and mobile layouts, navigation, focus states and interactions, checked at the widths people actually use rather than the one the screenshot was taken at.

How customisation works ↗
03 / THE HANDOVER

The details, before you buy.

Source files, installation requirements, licence and support terms are published on the theme page so you can decide before you spend anything.

Exact package with each release
PRICING

A clear price. A clear package.

Pick the design that fits your project. One licence covers one published website; building for clients is the studio licence.

INDIVIDUAL THEMES ON SALE

Find your fit.

€59 a theme

One licence, one published website. Work you deliver to clients is the studio licence: €399 for the whole collection, and a year of everything released after it.

A theme licence
One published project
Client work
Studio licence
Updates & support
Stated per theme
THIS THEME

Everything above, in one download.

Skillo, as the complete Astro source. Change anything, deploy it anywhere static, and keep it.

One published website. VAT included; the studio licence covers client work. 14 days to withdraw, until the first download.

ELSEWHERE IN THE COLLECTION

Three more directions.