00
Design System
Type /design-system in the Agent panel with your prompt to create your first page based on this design system.
Recommended model: GPT 5.6 Sol or above.
01
Typography
Heading 1
Anton
128px / 96px / 64px
Built to be seen.
Heading 2
Anton
72px / 48px
Built to be seen.
Heading 3
Arial
40px / 32px
Built to be seen.
Heading 4
Anton
48px / 32px
Built to be seen.
Heading 5
Anton
24px / 19px
Built to be seen.
Heading 6
Anton
18px / 14px
Built to be seen.
Body
Arial
16px / 13px
Built to be seen.
Label
VT323
14 px
Built to be seen.
02
Colors
Neutrals
surface primary
#F2F3F4
Surface secondary
#DBDBDB
Border
#B6B6B7
Text Placeholder
#A6A6A6
Typography
Text Secondary
#4D4D4D
Text Primary
#303030
Surface Dark
#000000
Accent
accent primary
#FF0800
accent secondary
#FFCC33
03
Components
A complete reference of the reusable interface components available across the Sift website.
Hero Video
Component containing 3 videos that are switching between each other every 4 seconds.
For optimization, I use mp4 URL instead of uploading a video. You can upload video or change the URL, it won't affect the component performance.
CTA Button
For the main call-to-action. One primary CTA per section.
Main
Secondary
Success
Nav Button
For the navigation. Make sure the main variant is white (#FFFFFF). Has blending Difference.
Navigation
Desktop
Used for the desktop and tablet sizes.
Make sure the nav buttons are white (#FFFFFF). The parent component has blending Difference.
Logo Nav
Desktop and mobile variants. Used for phone size 810>390px
This component has the Text and Image logo options. Can be switched with toggle. You can upload the logo image after activating the image option.
Text Cutout
Code component that allows the frame to have a cutout in the form of the chosen text.
Added background blur affects the visibility of the layer below.
Work Card
Card containing illustration of a work done by agency, as a video. The Variant 1 has an Inverted look, that changes to regular look in Variant 2. Used as a scroll variant transformation on home page, triggered on layer in view.
Variant 1
Variant 2
Trust Section Components
Clients Video
This video card recreates the video preview grid of a video editing app fitting the sections overall aesthetic.
Clients Card
A CMS-connected card that displays client logos as images, visually recreating a video editing app’s timeline.
Tab
For filtering case studies by category.
Default
Category
Active
Category
Divider
Titling the sections.
Default
COMMERCIAL FILM & CREATIVE PRODUCTION
Fish Eye Lens
A code component imitating the fisheye lens. Can upload a video or an image. Used in 404 page.
Default
Glass Cursor
A code component used for cursor. Placed on the template, absolute position. Used to replace the web cursor. Changes to pointing finger on clickable items.
* Make sure to put FOLLOW CURSOR ON. Hide Native - ON.
Default
Footer
Desktop
Mobile
Form
Default