page sections built from the components. each one is live, full width, and uses the same stylesheet. stack them in the orders on the templates page.
site header
three versions of the top of a page: plain, with a red bar, and inverse. the wordmark sits left, the links right, and the one call to action is a dark button.
the current page is yellow.aria-current does it. no underline, no bold change.
three to five links.the sixth becomes a menu or moves to the footer.
the header wraps, it does not collapse.on a phone the links drop under the wordmark. there is no hamburger until there are more than five links.
hero
the first screen. split: text beside a panel of shapes. type: a headline alone on ink. band: a yellow strip with the headline and the button on one line.
<section class="ws-hero">
<div class="ws-hero__text">
<h2>learn to see in circles, squares and triangles</h2>
<p>one short exercise a day in color, form and type.</p>
<div class="row">
<a class="ws-btn ws-btn--primary" href="/app">get the app</a>
<a class="ws-btn" href="/lessons">see the lessons</a>
</div>
</div>
<div class="ws-hero__art"><svg aria-hidden="true">…</svg></div>
</section>
one red button.the second button, if any, is white.
the headline is a sentence in lowercase.twelve words or fewer, no full stop unless it is the slogan.
the art panel is shapes, never a photo of a screen.the product is shown further down, at real size.
feature grid
three to six features, each with one shape, a title and two lines. the grid's rules come from a 3 px gap over an ink background, so the cells stay joined.
color studio
mix, match and name colors on a living wheel.
form lab
draw with a ruler and a compass. build a chair from nothing but shapes.
type room
set a headline in lowercase and learn weight, tracking and the grid.
the notebook
everything you answer, kept in order and searchable.
daily exercise
five minutes a day. the streak counts the days you did.
the library
every object, taken apart into the shapes it is made of.
<section class="ws-features">
<div>
<svg aria-hidden="true">…</svg>
<h3>color studio</h3>
<p>mix, match and name colors on a living wheel.</p>
</div>
…
</section>
one shape per feature, in one or two colors.not an illustration, not a photo.
titles are nouns, descriptions are one sentence.if the sentence needs a second, the feature needs a page.
stats band
numbers on yellow. the number is display size, the label is small, and the cells are joined by rules.
14years, three cities
3shapes in everything
5minutes a day
120objects in the library
<section class="ws-stats">
<div><b>14</b><span>years, three cities</span></div>
<div><b>3</b><span>shapes in everything</span></div>
</section>
three or four numbers.two is a comparison and belongs in prose; five is a table.
no plus signs, no percent signs if avoidable.the label carries the unit.
quote
a testimonial or a line from the school, on blue. the text is the biggest thing in the block and the attribution is small.
"the exercises are so small that i did them every day, and after a month i could see the grid in everything."
akanna k., architecture student, first-month review
<section class="ws-quote">
<p>"after a month i could see the grid in everything."</p>
<div class="who"><span class="ws-avatar ws-avatar--yellow" aria-hidden="true">ak</span><span>anna k., architecture student</span></div>
</section>
blue for quotes from people, ink for quotes from the school.the two never share a page.
one quote per page.a wall of testimonials is a list, and goes in a list.
pricing
two or three plans in joined cells. the recommended plan is yellow, and every plan has exactly one button.
the recommended plan is yellow and gets the red button.the others get white or ink.
red squares as bullets.not ticks; a tick implies a comparison table, which is a different pattern.
prices are placeholders here.the brackets are deliberate; replace them before shipping.
faq
the accordion from the controls page, used as a page section with a heading beside it.
questions
the ones people ask before the first lesson. for everything else, write to us.
how long is an exercise?
about five minutes. some take two.
do i need to know anything first?
no. the first week assumes nothing.
is there a web version?
the color studio runs in a browser. the form lab needs the app.
can i export my notebook?
on the studio plan, as a pdf or as svg files.
<section class="faq">
<div><h2>questions</h2><p>the ones people ask before the first lesson.</p></div>
<div class="ws-acc">
<details><summary>how long is an exercise?</summary><div class="body"><p>about five minutes.</p></div></details>
</div>
</section>
four to eight questions.more than that needs a search box and its own page.
questions in the person's words.how long is an exercise, not exercise duration.
call to action band
a red band near the end of a page with one sentence and one button. it is the only red section a page may have.
captions are one word or a name.the long description lives on the object's page.
three, four or six across.five leaves a hole.
article layout
a reading column beside a yellow aside. the column is 66 characters wide and the aside holds what is related.
the triadic figure
oskar schlemmer's triadic ballet premiered in stuttgart in 1922. the dancers wore costumes built from cones, discs and spheres, and moved the way the costumes allowed.
the body became geometry. a skirt was a disc, an arm a cylinder, a head a sphere, and the stage a grid the figures crossed on straight paths.
<section class="ws-404">
<div class="num">404</div>
<div>
<h3>nothing at this address</h3>
<p>the page moved or never existed.</p>
<a class="ws-btn ws-btn--primary" href="/library">go to the library</a>
</div>
</section>
no apology, no joke.what happened and where to go.
the red button goes to the most useful place, not to home.home is the white button.