START HERE
Make Vellum
your own.
A concise guide to the native Framer pages, shared components, original assets, and launch settings.
Ink
#172821
Muted
#62695F
Paper
#FFFFFF
Citron
#E3F28A
01 / Brand and type
Edit the color tokens and text styles in Assets → Brand styles. Geist is the primary typeface; Geist Mono is used for compact labels. Replace the wordmark and vector mark in the Navigation component, footer, and site favicon.
02 / Shared structure
Vellum site shell is the shared layout template. Edit navigation and footer there once. Its Desktop, Tablet, and Phone breakpoints distribute the changes across all website pages.
03 / Reusable components
Button exposes a label and link. FAQ item exposes a question and answer with Closed and Open variants. Product explorer has Cards, Expenses, and Bills states. Plan comparison has Monthly and Annual states. Edit source variants before adjusting their instances.
04 / Responsive pages
Each route has 1200px Desktop, 810px Tablet, and 390px Phone breakpoints. Keep shared changes on Desktop. Use smaller breakpoint overrides for spacing and stacking. Preview between breakpoints as well as at preset widths.
05 / Form delivery
The walkthrough form is a small React 18 compatible Framer code component with editable controls. Preview mode validates fields and shows a local confirmation without sending or storing data. For real delivery, configure your own HTTPS endpoint that accepts JSON and allows CORS; turn Preview mode off only after verifying successful delivery, error handling, privacy copy, and spam protection. You can also replace it with your preferred native Framer form integration.
06 / Content and legal notices
Vellum is fictional. Replace illustrative prices, financial figures, features, and workflow examples with verified product information. Add genuine customer proof only with permission. Replace the demo privacy and terms pages, and any required financial disclosures, before a real business launch.
07 / Assets and motion
Page layouts, navigation, buttons, FAQs, and product tabs are editable native layers. Original card artwork uses WebP. VellumFinanceMotion includes Overview, Cards, Expenses, Spend, Bills, and Flow. VellumFeatureStudio includes Convergence, Policy, Global, and Connections. Select an instance to edit its scene, colors, motion, and options such as the starting stage, policy limit, team, or tool labels. Animations pause offscreen and respect reduced motion. Policy, currency, and connection examples use local demo data.
08 / SEO and publication
Review every page’s title and description, social preview image, and favicon. Connect your domain and analytics if needed. Keep this utility guide out of indexing. Publish a preview, test all routes and form delivery, then create the remix URL and accurate listing screenshots before selling the template.
09 / Source and originality
Ramp informed the spacious layout rhythm, restrained surfaces, strong product storytelling, and purposeful interactions. No Ramp text, logos, testimonials, product statistics, source code, or visual assets are included. This template has its own brand, copy, artwork, and component system.