Skills.
Skills give Framer’s AI Agent a playbook for working with your template. Dossier includes three for building pages, adding projects, and checking quality. Open the Agent panel in Framer and find them under Skills, then reference a skill by name in your prompt.
Design system
Create polished, responsive pages using Dossier’s components, typography, layouts, and imagery.
Example prompt.
Use /design-system to create a journal page for my studio with featured stories, categories, and a newsletter signup. Add imagery and check all breakpoints.
Add project
Add or edit portfolio case studies through a guided CMS workflow, without overwriting existing content.
Example prompt.
Use /add-project to help me add a branding project. Organize my images and services, then draft the challenge, approach, and impact from my notes.
Quality check
Audit content, design, links, SEO, accessibility, and responsiveness before publishing.
Example prompt.
Use /quality-check to audit my website before launch. Flag missing content, broken links, SEO issues, and mobile problems without publishing.
At a glance
Typography
Clash Grotesk / Poppins
Breakpoints
Desktop 1200+ · tablet 810–1199 · phone <810
Layout
Main template · full-width sections
CMS
Projects + services
Spacing
8 / 16 / 24 / 32 / 48 / 64 / 96 / 192
Corners
60px editorial sections and panels. pill-shaped buttons and form controls.
Motion
Appear: spring · 0.4s · bounce 0.2 · delays 0 / 0.3 / 0.5s
Imagery
3:4 portrait ratio for primary project visuals
Headings
Clash Grotesk display · keep large titles to 1–2 short words
Colors
Existing color tokens only.
Night
White
Grey 100 / background
Grey 200 / surface
Grey 300 / border
Grey 400 / secondary text
Error / validation
Typography
10 core responsive styles. preset values and examples below.
Heading XXL uses a paired responsive system. The Heading XXL preset handles larger breakpoints, while Heading XXL Phone provides an additional small-screen treatment. Always use the existing Heading XXL component for oversized display headings rather than the standalone text preset. Keep headlines short, in sentence case, and end prominent display headings with a period.
Clash Grotesk · 600 weight · 0.7em line height
Default: 310px · medium: 230px · small: 190px
XXL phone.
Clash Grotesk · 600 weight · 0.8em line height
Default: 85px · medium: 74px · small: 58px
XL.
Clash Grotesk · 600 weight · 0.7em line height
Default: 180px · medium: 130px · small: 90px
Heading l
Poppins · 400 weight · 1.1em line height
Default: 50px · medium: 50px · small: 36px
Heading m
Inter · 400 weight · 1.3em line height
Default: 30px · medium: 28px · small: 20px
Heading sm
Poppins · 600 weight · 1.3em line height
Default: 22px · medium: 22px · small: 18px
Quote
Inter · 400 weight · 1.3em line height
Default: 32px · medium: 28px · small: 28px
Body
Poppins · 400 weight · 1.5em line height
Default: inherited · medium: 16px · small: 16px
Label
Poppins · 500 weight · 1.5em line height
Default: 16px
Note
Poppins · 400 weight · 1.5em line height
Default: 14px
Corners
Editorial containers: 60px. buttons and form fields retain their existing pill-shaped styles.
Spacing
Spacing: Use the 8px scale for internal relationships; separate major new page sections with 196px. Hero Text and Hero Image Reel already include horizontal internal padding; keep hero section padding 0 to avoid doubled gutters. Apply outer padding only where the reference section needs it. Standard content gutters: 48px desktop, 32px tablet, 24px phone; image-led sections may use 8px. Grouped cards must have equal height set to Fill (1fr).
8px
Tight label-to-value spacing and small inline elements.
16px
Between closely related text or controls; compact card interior gaps.
24px
Default gaps between cards in a grid; standard card internal padding.
32px
Between supporting heading and paragraph groups; comfortable section subgroups.
48px
Between section introduction and its primary content.
64px
Between major content groups and dense editorial blocks.
96px
Typical generous section top/bottom padding, matching Dossier’s spacious pacing.
192px
Large hero or transition spacing; use only when the composition warrants it.
Layout
Full-width section
Default for expansive compositions, galleries and image-led sections. Let the section span the available page width; follow existing section gutters (project detail image rows use 8px). Do not cap every section at 1200px.
Constrained content
For text-heavy editorial sections or focused content, use a centered max-width of 1000px, as shown by Content Block 1 on the Projects CMS detail page. Keep outer full-width sections and constrain an inner wrapper where appropriate. Let the width shrink on tablet and phone.
Two-column editorial split
Pair dominant imagery or oversized heading with narrower supporting copy. stack vertically on phone.
Portfolio grid
Use existing project card / image card / project reel card patterns; 3:4 portrait imagery is the recommended starting ratio for primary project visuals.
Case-study flow
Use projects CMS detail structure; alternate imagery, descriptions, and outcomes.
Hero composition
Reuse hero text, animated heading, hero image reel, and existing motion-led hero variants. keep expressive display headings short, ideally one or two words.
Shared chrome
Apply main layout template for navigation/footer. avoid duplicating structural chrome in page sections.
Elements
Button
Image Card
Image Reel Card
Project Card
Testimonial Card
Stat Card
Profile Card
Counter
Cursor
Dash
Icon
Label
Label
Link
Tab
Category
Forms
Input Checkbox
Input Select
Input Radio
Input Text
Input Text Area
Form Contact
Sections
Animated Heading
Animated section heading with existing motion. Reuse its variants and reduced-motion behavior.
Contact
Use for the full contact page or overlay. Preserve its existing structure and interactions.
Contact Details
Use for reusable contact information inside contact sections.
Footer
Use the shared footer from the main layout. Do not add a second page-level footer.
Heading XXL
Required for oversized display text. Use the component to combine desktop–tablet and phone treatments for the additional responsive breakpoint. Use anytime for Heading XXL, that page H1 heading.
Hero Image Reel
Use for image-led hero sections. Preserve reel behavior and responsive layout.
Hero Text
Use for text-led hero sections with short sentence-case display headings ending in a period.
Hero Text Image Stomp Motion Animation
Use for the complete animated hero composition. Keep the existing animation and reduced-motion behavior.
Item List
Nested list used inside animated sections. Reuse its parent section rather than rebuilding it alone.
Number Text Block
Use for numbered editorial text within a larger section.
Navigation
Use the existing responsive navigation in the main layout. Do not duplicate it.
Projects Ticker
Use for moving project previews; retain ticker animation and reduced-motion behavior.
Social Links
Use for grouped social links in shared sections.
Scroll Highlight
Use for scroll-triggered text emphasis. Preserve the existing reveal behavior.
Text Block
Use for reusable editorial text groupings and existing hierarchy.
Do and Don't
Create using Home, About, Services and the installed design-system skill. Hero Text or Hero Image Reel only. Their horizontal padding is built in; do not double-pad the hero section. Reuse the Label component for labels. Set grouped cards to Fill height and Grey 200. Use 196px between major new page sections, offer robust choices for vague requests, and avoid automatic Contact components.
Do
Reuse existing color tokens and text-style presets.
Start from Dossier components and existing page sections.
Follow the 8px spacing rhythm and 60px editorial corners.
Use short, expressive headlines and art-directed project imagery.
Respect reduced motion and test desktop, tablet, and phone.
Use the main layout and existing projects / services CMS.
Don’t
Add arbitrary colors, fonts, radii or spacing values.
Rebuild components that already exist.
Apply 60px rounded corners to buttons or documentation ui.
Stretch oversized display headings into long sentences.
Add decorative motion to every element or ignore reduced motion.
Replace CMS bindings or shared structures without a clear reason.
Do not use all-caps text or automatic uppercase styling. Use sentence case for headings, labels, buttons, and body copy. Prominent display headings end with a period.
Agent quality checklist
Before building, read the installed design-system skill and inspect the live page references. Hero Text and Hero Image Reel already contain their own left/right padding: set hero section padding to 0, and set outer gutters on section wrappers only, without double padding. For grouped cards use height Fill (1fr), equal heights, and existing Grey 200 token. Use the Label component for all labels, not independently styled text. New page sections have 196px separation; no generic Contact component CTA. Review desktop/tablet/phone and visually inspect before completion. Composition rule: Reuse the established design system, not entire section layouts indiscriminately. When existing sections do not fit the content, create original, polished section compositions with Dossier typography, tokens, spacing and components. Design for the actual content amount; use fit-content/auto heights for text-heavy sections and responsive card groups, never fixed heights that clip content. Inspect desktop, tablet and phone after editing. Visual storytelling: Mix text with relevant project imagery. On substantive new pages include an image-led section or the existing Image Reel Card component where suitable as a visual break, and prefer an intentional full-width image composition to consecutive text-only sections. Use real project/user imagery, descriptive alt text, responsive cropping, and reduced-motion behavior. Never add unrelated imagery or force a reel when no suitable assets exist.