Style guide
Bisect, a Framer template by Ajoy
Make it yours. Most of Bisect is edited by typing text, swapping photos and changing CMS items.
Setup
About an afternoon
Name and photo
Select Bisect hero on Home. Type your name (it fits its tile at any length), swap the photo, then move Focus across and Focus down until your face sits in the narrow photo tile.
Work
Edit the Projects collection. Tick Featured on the project the hero shows. Every cover, gallery picture has a Dark version for the dark theme; leave it empty and add the same picture if your work has no dark mode.
Experience
The Experience collection feeds the hero’s Now and Experience tiles, the table on Home and About. Order sets the order; the first item is Now.
Colours
Edit the eight colour styles. Each has a light and a dark value; the navigation switch moves between them and remembers the visitor’s choice. The site opens light.
Navigation and footer
Both live in the Main layout template. Links point at pages, so renaming a page keeps them working.
CV
Select Bisect hero and add your PDF to CV file. Until then the CV row links to CV link.
Contact form
Open the form on Contact and set where messages go in Framer’s Form panel. Nothing is sent until a destination is set.
Colour styles
Light / dark
Page
#F2F2EF / #0E0E0D
Tile
#FFFFFF / #191917
Ink
#121211 / #F2F1EC
Muted
#6F6F69 / #8F8E88
Line
#E6E6E2 / #2A2A27
Accent
#2F5BFF / #7D96FF
On photo
#FFFFFF / #FFFFFF
Line on photo
white 55% / white 45%
Other palettes
Copy the values into the colour styles
Graphite and lime
Light: Page #EDEEEA, Tile #FFFFFF, Ink #151614, Muted #6C6E68, Line #E0E2DC, Accent #4F7A00. Dark: Page #0F100E, Tile #1A1B18, Ink #EEF0EA, Muted #8E918A, Line #2B2D28, Accent #B6E35A.
Clay
Light: Page #F1ECE7, Tile #FFFFFF, Ink #1C1611, Muted #74685E, Line #E6DED6, Accent #B4532A. Dark: Page #120E0B, Tile #1C1713, Ink #F3ECE4, Muted #9A8D82, Line #2E2621, Accent #E08A5E.
Ink blue
Light: Page #ECEFF3, Tile #FFFFFF, Ink #0F1724, Muted #65707F, Line #DCE2EA, Accent #1F4FD8. Dark: Page #0B0F16, Tile #141A24, Ink #E9EEF6, Muted #8994A4, Line #253041, Accent #7FA2FF.
Text styles
Hubot Sans for headings, Switzer for text
Product designer who builds
Have a product that needs both?
Most days sit between a Figma file and a pull request.
Ostra booking
What we built
Rebuilt clinic booking from five screens to three.
Long reading text in notes, case studies and legal pages.
Summaries, answers and short descriptions.
Buttons, table values, links
Tile headers, dates, small notes
Work About Notes
Components
Where to edit
Bisect hero
The split hero on Home. Photo, name, lines and links are its controls. Scroll length sets how long the cuts take; Canvas preview shows any point of the scroll on the canvas. Heading font and Body font set its type.
Bisect row, Bisect work
Small feeds hidden in Hero feed on Home. They pass Experience and the Featured project to the hero. Edit the CMS, not these.
Work index, Index item
Selected work on Home: pointing at a row wipes its cover in. Index item feeds sit in Hero feed and read the Projects collection. Heading font and Body font set its type.
Sweep
How I work on Home: three pictures and a cut line that sweeps between them as you scroll. Pictures and words are controls. Heading font and Body font set its type.
Theme switch
In the navigation and footer. Opens light, remembers the visitor’s choice.
Navigation
Desktop, Phone and Phone open variants. The phone menu fills the visible screen.
Button, Submit button
Primary and Secondary, with hover fades. Submit button has Sending, Sent and Try again states for the form.
Overrides
withWave on the Toolkit grid, withRail on Kind words, withCopyEmail on the contact email, withScreenDrawer on the phone menu.
Collections
What each one feeds
Projects
Hero work tile (Featured), Selected work on Home, the Work page and each case study.
Experience
Hero Now and Experience tiles, the Experience table on Home and About.
Services
Ways to work together on Home and Services, and each service page.
Testimonials
Kind words on Home.
Notes
Notes on Home (Featured note plus the latest three), the Notes page and each note.
FAQs
Questions on Services.
Toolkit
The skills grid on Home and About.
Legal
Privacy and Terms pages. The copy is placeholder text; replace it.