00
Design System
This is are rules, components and reusable items for this template.
01
Typography
Inter
72px
Bold
heading 1
Inter
40px
Bold
heading 2
Inter
26px
Bold
Heading 3
Splash
32px
Regular
Heading 4
Inter
24px
Medium
Heading 5
Inter
16px
Bold
Heading 6
Inter
14px
Medium
Body
Inter
10px
Bold
Label
02
Colors
Typography Blending
#FFFFFF
Typography Secondary
#3A3A3C
Background Primary
#CFCFCF
Background Secondary
#F5F5F5
Background Dark
#111111
Accent Main
#E10600
03
Imagery
04
Components
A complete reference of the reusable interface components available across the Sift website.
> Code components
Ink bleed
A text component that makes type look like wet ink soaking into paper. Letters start as blurred, spread-out ink and then settle into crisp print when they scroll into view. Each letter bleeds at a slightly different strength, so the effect looks natural and not mechanical.
Ink bleed hover
A text component that makes type look like wet ink soaking into paper on hover. Each letter bleeds at a slightly different strength, so the effect looks natural and not mechanical.
Ink bleed image
An image component that makes a photo look like it’s printed with wet, spreading ink. The photo starts as a blotchy, blurred ink stain and gradually sharpens into the clean image, as if the ink were soaking into paper.
hand writing Text
A text component that writes itself out left to right, word by word, as if someone were writing it by hand. Longer words take longer to write, so the pace feels natural.
Marker highlight
A component that fills its frame with a rough, translucent highlighter stroke, like a real marker. It has wobbly edges, soft horizontal streaks, and slightly uneven ends. Put it behind text to highlight a word or line.
> Components
cta button
For the main call-to-action. One primary CTA per section.
Footer button
Redirecting link buttons for footer.
Logo button
For accessing home page through the nav.
Navigation
Used for all sizes.
work card
Landscape
label
title
Portrait
label
title
Category Label
Nested in a Work Card, connected to category reference in CMS.
label
Service
Single numbered service, can be modified from outside.
Default
01
editorial
Marked
01
editorial
Services Container
Variants change on scroll. Used in Services section of home page.
Editorial
1
editorial
2
Portraiture
3
Campaigns
4
Art & Culture
5
Personal Projects
Portrait
1
editorial
2
Portraiture
3
Campaigns
4
Art & Culture
5
Personal Projects
Campaign
1
editorial
2
Portraiture
3
Campaigns
4
Art & Culture
5
Personal Projects
Art
1
editorial
2
Portraiture
3
Campaigns
4
Art & Culture
5
Personal Projects
Personal
1
editorial
2
Portraiture
3
Campaigns
4
Art & Culture
5
Personal Projects
Order
1
editorial
2
Portraiture
3
Campaigns
4
Art & Culture
5
Personal Projects
Services Photos
Variants change on scroll. Used in Services section of home page.
Editorial
Portrait
Mid 1
Camp
Mid 2
Art
Mid 3
Personal
End
Order
Heading Text
What it is: a headline component of up to five words. Each word is its own InkBleed text layer, so words fade in as wet ink one after another, with a 0.2s stagger and a 0.4s starting delay. How to use it: drop in the variant that matches your word count, then fill in the word fields (named 1 to 5) and the Color field. Words land in a staggered, stepped layout rather than one straight line.
H1 | 5 Words
H1 | 4 Words
H1 | 3 Words
H1 | 3 Words / 2
H1 | 2 Words
H2 | 5 Words
H2 | 4 Words
H2 | 3 Words
H2 | 3 Words / 2
H2 | 2 Words
H2 | 2 Words /2
5 Words Phone
4 Words Phone
3 Words Phone
Body Text
What it is: a body component of up to six words. Each word is its own body text layer. How to use it: drop in the variant that matches your word count, then fill in the word fields (named 1 to 5) and the Color field. Words land in a staggered, stepped layout rather than one straight line.
6 Words
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
5 Words
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
4 Words
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
4 Words / 2
body
body
body
body
body
body
body
body
body
body
body
body
3 Words
body
body
body
body
body
body
3 Words / 2
body
body
body
body
body
body
3 Words / 3
body
body
body
body
body
body
body
body
body
2 Words
body
body
body
body
2 Words / 2
body
body
body
body
6 Words Label
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
5 Words Label
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
4 Words Label
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
body
4 Words / 2 Label
body
body
body
body
body
body
body
body
body
body
body
body
3 Words Label
body
body
body
body
body
body
3 Words / 2 Label
body
body
body
body
body
body
3 Words / 3 Label
body
body
body
body
body
body
body
body
body
2 Words Label
body
body
body
body
2 Words /2 Label
body
body
body
body
Section Title
Titling the sections.
label 1
Tab
For filtering case studies by category.
Default
Category
Active
Category
background image
footer
Mobile