Style guide
for this template.

How Soundoff is put together: the colours, the type, the components and the collections that feed them.

How Soundoff is put together: the colours, the type, the components and the collections that feed them.

For whoever edits this site

Setup

Change the name and email

Change the name and email

Edit the Navigation and Footer in the Site layout, then the Closing component. The email also appears on the Contact page.

Edit the Navigation and Footer in the Site layout, then the Closing component. The email also appears on the Contact page.

Swap the work

Swap the work

Work feeds the case pages and the Selected work section. Ads feeds the hero wall and the tiles on each case page: keep three ads in each category.

Work feeds the case pages and the Selected work section. Ads feeds the hero wall and the tiles on each case page: keep three ads in each category.

Point the form somewhere

Point the form somewhere

Select the form on the Contact page and choose where entries go: an email address, a webhook or a tool you already use.

Select the form on the Contact page and choose where entries go: an email address, a webhook or a tool you already use.

Replace the legal copy

Replace the legal copy

Privacy policy and Terms of service live in the Legal collection. They are placeholders: have them rewritten for where you work.

Privacy policy and Terms of service live in the Legal collection. They are placeholders: have them rewritten for where you work.

Rename and publish

Rename and publish

Rename the project in Framer, connect your domain, then publish.

Rename the project in Framer, connect your domain, then publish.

Colours

Page

#0A0A0C

Surface

#141418

Raised

#1C1C22

Ink

#F3F1EC

Body

#C9C7CE

Muted

#8C8A92

Faint

#4A4950

Line

#26262C

Accent

#7C6CFF

Accent text

#A99FFF

On accent

#FFFFFF

Photo / Text

#FFFFFF

Photo / Muted

#FFFFFF at 70%

Photo / Line

#FFFFFF at 24%

Light / Page

#F3F1EC

Light / Surface

#E9E6DF

Light / Raised

#E1DDD5

Light / Ink

#111114

Light / Body

#3A3940

Light / Muted

#6E6C73

Light / Faint

#B9B5AE

Light / Line

#D8D4CB

Light / Accent text

#5B4BE0

Veil

#0A0A0C at 82%

Light / Veil

#F3F1EC at 84%

Alternate palettes

Copy these values into the colour styles of the same names. Paper is a light theme: also switch Photo / Text to the page colour where photos sit under text.

Paper

A light version

Page #F4F1EA

Surface #ECE8DF

Ink #16161A

Body #3A3A40

Muted #6E6B66

Line #DDD8CE

Accent #4B3CFF

Studio blue

Cooler, with a blue accent

Page #0B0E14

Surface #131824

Ink #EEF1F6

Body #C3C9D4

Muted #8A93A3

Line #222837

Accent #3D7BFF

Clay

Warm, with a terracotta accent

Page #120E0C

Surface #1B1613

Ink #F4EDE6

Body #D4C9BF

Muted #9A8F86

Line #2C2420

Accent #E0673C

Type

One family, Epilogue, at regular weight. Sizes read desktop / tablet / phone. Headings are two-tone: a second line in Muted instead of italics.

Display

72 / 56 / 40 · page titles, h1

Video ads for whatever you sell.

Display, second line

72 / 56 / 40

The muted second line of a heading.

The muted second line of a heading.

Section

56 / 44 / 34

Selected work

Selected work

Figure

64 / 52 / 40

4.6×

4.6×

Aside

30 / 26 / 22

Twelve hooks for every brief.

Twelve hooks for every brief.

Menu

34 / 34 / 30

Work

Work

Article heading

28 / 24 / 22

What we made

What we made

Title

24 / 22 / 20

Scripts and hooks

Scripts and hooks

Lead

20 / 18 / 17

A fourteen-day test that puts the budget behind the winner.

A fourteen-day test that puts the budget behind the winner.

Article

19 / 18 / 17

Every hook was cut in three placements, with captions set for sound off.

Every hook was cut in three placements, with captions set for sound off.

Body

16 / 16 / 15

Cast from a roster of three hundred creators.

Cast from a roster of three hundred creators.

Nav

15

Services

Services

Small

14

Days 1 to 3

Days 1 to 3

Button

14

Book a call

Book a call

Label

13

Lowtide Skin · face oil test

Lowtide Skin · face oil test

Wordmark

20 / 20 / 19

Soundoff

Soundoff

Hero line

15 / 15 / 14

Spare small line

Spare small line

Components

Category Wall Ad (Wall.tsx)

Category Wall Ad (Wall.tsx)

The home hero. One instance per Ads item. About half the wall starts in colour and the cursor reveals the rest; scroll sorts the ads into categories, the others go quiet and each category’s winner stays lit with its result. Controls: colour before sorting, quiet when sorted, columns, spacing, reveal style.

Case File (CaseFiles.tsx)

Case File (CaseFiles.tsx)

Selected work on the home page. One per Work item; scroll steps through the list and the picture brightens.

Selected work on the home page. One per Work item; scroll steps through the list and the picture brightens.

Standings Row (Standings.tsx)

Standings Row (Standings.tsx)

The test. One per Tests item, sorted by day 1 return; scroll runs fourteen days and re-ranks the rows.

The test. One per Tests item, sorted by day 1 return; scroll runs fourteen days and re-ranks the rows.

Quote Caption (Quotes.tsx)

Quote Caption (Quotes.tsx)

Quotes on the home page. One per Testimonials item; each quote lights up word by word, then moves on.

Quotes on the home page. One per Testimonials item; each quote lights up word by word, then moves on.

Plan Builder (PlanBuilder.tsx)

Plan Builder (PlanBuilder.tsx)

Build your month. Prices, the most hooks and creators, the button and six tile photos are controls on the instance.

Build your month. Prices, the most hooks and creators, the button and six tile photos are controls on the instance.

Question Row (Questions.tsx)

Question Row (Questions.tsx)

Questions. One per FAQs item; the chosen answer sits on the right, or opens under its question on phones.

Questions. One per FAQs item; the chosen answer sits on the right, or opens under its question on phones.

Service Line (ServiceLine.tsx)

Service Line (ServiceLine.tsx)

The Services page list. One per Services item; the line nearest the middle of the window comes into focus.

The Services page list. One per Services item; the line nearest the middle of the window comes into focus.

Photo (Photo.tsx)

Photo (Photo.tsx)

Every photo outside the hero. Loads one file sized to its frame, shortly before it scrolls in. Drift adds a gentle parallax; Load first is for the first photo on a page.

Every photo outside the hero. Loads one file sized to its frame, shortly before it scrolls in. Drift adds a gentle parallax; Load first is for the first photo on a page.

Navigation, Button, Text link

Navigation, Button, Text link

Canvas components. The navigation has Desktop, Tablet, Phone and Phone open variants. Buttons fade on hover.

Canvas components. The navigation has Desktop, Tablet, Phone and Phone open variants. Buttons fade on hover.

Closing

Closing

The last block on most pages, with Desktop, Tablet and Phone variants. Edit it once and every page changes.

The last block on most pages, with Desktop, Tablet and Phone variants. Edit it once and every page changes.

Submit button

Submit button

The contact form’s button, with Pending, Success and Failed variants.

The contact form’s button, with Pending, Success and Failed variants.

Overrides (Site.tsx)

Overrides (Site.tsx)

Pinned scenes (withTakeTrack, withTakePin), the sideways strip (withSidewaysTrack, withSideways), alternating rows, hover fades and the navigation backdrop.

Pinned scenes (withTakeTrack, withTakePin), the sideways strip (withSidewaysTrack, withSideways), alternating rows, hover fades and the navigation backdrop.

Light stretch (withLightTrack, withLightStretch)

Light stretch (withLightTrack, withLightStretch)

On the home page, while The test or What we make covers the middle of the window, the whole page fades to the Light colour styles in 0.7 s, then back. Change the Light colour styles to change the look; remove the override from both sections to keep the page dark.

On the home page, while The test or What we make covers the middle of the window, the whole page fades to the Light colour styles in 0.7 s, then back. Change the Light colour styles to change the look; remove the override from both sections to keep the page dark.

Collections

Ads

Ads

The hero wall (three per category, the first two show once sorted) and the tiles on each case page. Tick Winner on one ad per category and fill Result and Result Label.

Work

Work

Selected work, the Work page and case pages

Selected work, the Work page and case pages

Tests

Tests

The test table on the home page

The test table on the home page

Services

Services

Home service rows, the Services page and service pages

Home service rows, the Services page and service pages

Testimonials

Testimonials

Quotes on the home page

Quotes on the home page

FAQs

FAQs

Questions on the home and Services pages

Questions on the home and Services pages

Journal

Journal

The home journal rows, the Journal page and articles. Featured picks the large story

The home journal rows, the Journal page and articles. Featured picks the large story

Team

Team

The people on the Studio page

The people on the Studio page

Legal

Legal

Privacy policy and Terms of service

Privacy policy and Terms of service

Create a free website with Framer, the website builder loved by startups, designers and agencies.