TEMPLATE GUIDE
How this template is put together.
この雛形の仕組みと、公開前に差し替えるもの。
STILLFORM is built so that a small number of decisions carry the whole site. Change the seven colours and every surface follows. Change the type styles and every page follows. The project marks are drawn, not photographed, and you pick them from a list.
01 / COLOUR
Seven colours, and the site follows.
Every fill, rule and piece of type on this site points at one of these. Each carries its own dark-mode value, so editing the light value is safe.
Paper
The page.
rgb(244, 244, 241)
rgb(23, 23, 26)
Ink
All type, and the dark panels.
rgb(23, 23, 23)
rgb(237, 236, 232)
Muted
Labels and secondary lines.
rgb(107, 107, 103)
rgb(147, 147, 141)
Line
Every hairline rule.
rgba(23, 23, 23, .18)
rgba(237, 236, 232, .2)
Paper Raised
Cards lifted off the page.
rgb(251, 251, 250)
rgb(33, 33, 36)
Paper Sunken
Drawing plates and tinted bands.
rgb(236, 236, 234)
rgb(16, 16, 18)
Draft Line
The construction scaffold.
rgb(176, 175, 171)
rgb(87, 87, 79)
02 / TYPE
One scale, eight steps.
Sizes are listed desktop first, then tablet, then phone. Editing a style here moves every piece of text that uses it, on every page.
Display
96 / 56 / 44 / 40
Hero and footer wordmark.
Heading
66 / 42 / 34 / 30
Section titles.
Lead
35 / 26 / 24 / 22
Standfirsts and pull quotes.
Subheading
28 / 24
Card and case titles.
Body
15
Running text.
Detail
13
Captions and small print.
Micro Label
10 / 11
Eyebrows, indices, meta.
Article / Heading 1-6
32 / 24 / 19 / 16 / 14 / 11
Headings typed into a CMS rich text field.
03 / MARKS
Sixteen shapes on one grid.
図版は16種から選ぶだけ。
Each project mark is drawn live on a 200 unit grid, so it stays sharp at any size and weighs nothing. Set the Shape field on a case study to one of these names. If you would rather draw your own, put SVG path data in Custom Mark.
Corner
Dome
Lobe
Orbit
Ring
Scoop
Step
Vault
Square
Disc
Capsule
Half
Quarter
Lens
Keystone
Bar
04 / THE CMS
One collection, nine fields.
Work is the only collection. Adding a case study means adding an item; the card, the register row and the case page all read from the same nine fields.
Name
The project title, used on the card, the case page and the register.
No
The sheet number in the plate corner. Two digits.
Type
The discipline line under the title.
Line
One sentence describing the project. Also the case page’s meta description.
Year
Shown in the register.
Role
What the studio did, comma separated.
Shape
Pick the mark from the sixteen above. This is the only field that draws.
Custom Mark
Optional. SVG path data on the 200x200 grid if you want a shape of your own. Overrides Shape.
Body
The case study itself. Headings, paragraphs and lists are all styled.
05 / BEFORE YOU PUBLISH
Eleven things to change.
Work down this list and nothing of ours is left on your site.
01
Replace the brand name. It appears in the header, the footer wordmark, the copyright line, the About and Studio paragraphs, the pull-quote attribution, the four page titles, and the Construction Drawing component’s caption.
02
Replace the email address. It is in the Studio block, the Contact block, the footer, the two enquiry buttons, and the form’s own delivery settings.
03
Point the Instagram and LinkedIn links at your own accounts, or delete them.
04
Open the contact form and set where submissions are delivered. Framer does this per form, not per field.
05
The site language is already set to English in Site Settings, which is what puts the lang attribute on every page. Change it there if your site is not in English.
06
Replace the eight case studies. Each one needs a Name, No, Type, Line, Year, Role, Shape and Body.
07
Rewrite the page titles and descriptions in each page’s settings. The demo descriptions describe a studio, not your studio.
08
Replace the favicon and the social sharing image. Both live in Site Settings under Custom Code, next to a skip link you can leave as it is.
09
Delete the Japanese lines if you do not want them. There is one per section, plus three on the case pages.
10
Replace the year. It is typed into the Selected Work eyebrow, the copyright line in the footer, and the Year field of all eight case studies.
11
Delete this page.