Findit Design System — Next.js
Reusable tokens and components for every page of the Findit template. The published Framer template is the reference
for look and behavior; component names follow the Framer components so designers and developers talk about the same
thing. Import everything from @/design-system; components never import site content — pages map content to props in
src/lib/to-ui.ts. Every component is shown on /style-guide.
Tokens
Section titled “Tokens”| File | Holds |
|---|---|
theme.css |
Colours (ink, body, grey, surface, cultured, star, danger), breakpoints md 810 / lg 1200, the ticker animation |
tokens/text.ts |
Text styles: display, h1–h6, bigParagraph, paragraph, smallParagraph, menu, button, label, smallButton, tiny |
tokens/motion.ts |
springSoft (bounce 0, 0.4 s), springButton (bounce 0.2, 0.4 s), reveal (height), hoverVariants |
Framer’s translucent colours are opacity modifiers: Black 50/10/05/03 → ink/50, ink/10, ink/5, ink/3;
White 80/10 → white/80, white/10. Font: Manrope (next/font).
Components
Section titled “Components”| Group | Component | Framer |
|---|---|---|
| actions | Button (primary, secondary, white, shadow) |
Button/Primary |
| actions | TabButton (button or link) |
Button/Tab |
| brand | Logo |
Misc/Logo |
| cards | PropertyCard (complete, simple), Chip |
Card/Property |
| cards | CityCard |
Card/City |
| cards | PostCard |
Card/Post (Simple) |
| cards | TestimonialCard |
Card/Testimonials |
| cards | BenefitItem, HighlightChip |
Card/Benefit, Misc/Icon Text |
| cards | ProcessStep |
Card/Step |
| cards | FactList (dark, light) |
Fact Number |
| cards | TeamCard |
Card/Team |
| cards | AgentCard |
Card/Agent |
| forms | Form, FormField / FieldControl, RadioGroup, SubmitButton |
Form |
| forms | NewsletterForm, honeypotField, FormState |
Form (footer) |
| icons | Icon (Phosphor paths in paths.ts) |
Phosphor |
| layout | Section, SectionLabel, SectionTitle (split, center, stack), Divider |
Title Section, Misc/Label |
| media | HeroVideo |
Card/Hero Video |
| media | YouTubeEmbed |
YouTube |
| data | DetailList |
Property details / utility list |
| data | ContactList |
Contact (Single Agent) |
| navigation | Navigation (row, stack), Hamburger |
Button/Menu, Button/Hamburger |
| navigation | Breadcrumbs |
Breadcrumbs |
| patterns | Ticker, Carousel |
Ticker, Carousel |
| patterns | Timeline |
Card/Timeline |
| patterns | AccordionItem |
Card/Accordions |
| patterns | PropertyFilter |
Misc/Property Nav |
| text | InlineText (**bold**, [links](/path), line breaks from content) |
— |
| patterns | RichText (paragraphs, headings, lists; Framer spacing for long texts) |
Rich text |
| providers, utils | MotionProvider, CurrentYear |
— |
Conventions
Section titled “Conventions”- Text that Framer puts in its own element (a chip label, a stat, a button label) gets its own
<span>here too, so the layout check (tools/qa/layout-diff) measures the same boxes. - Borders Framer draws inside an element (buttons, the hero label) use an
after:border, neverborder, so sizes stay Framer’s. - Hover effects use Motion variants with
hoverVariantson the parent; reduced motion is honoured byMotionProvider(transforms) andmotion-reduce:classes (the ticker).