Kalme Design System — Next.js
Reusable tokens and components for every page of the Kalme 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, grey, line, background, red, danger), breakpoints md 810 / lg 1200, the ticker animation |
tokens/text.ts |
Text styles: display, h1–h6, number, bigParagraph, paragraph, smallParagraph, menu, button, subtitle |
tokens/motion.ts |
springSoft (bounce 0, 0.4 s), springButton (bounce 0.2, 0.4 s), hoverVariants |
Framer’s translucent colours are opacity modifiers: Black 20 → ink/20, Black 05 → ink/5. Font: Inter (next/font),
letter spacing −0.03em on every style (−0.02em on button labels).
Components
Section titled “Components”| Group | Component | Framer |
|---|---|---|
| actions | Button (primary, secondary) |
Button/Primary |
| actions | ArrowLink (with or without icon), ArrowFlip |
Button/Secondary |
| actions | TextLink, MotionLink |
Button/Text Link |
| brand | Logo (black, white) |
Misc/Logo |
| cards | FactCard |
Fact Number |
| cards | ProjectCard |
Card/Project/Primary |
| cards | PostCard |
Card/Post |
| cards | TestimonialCard (dark, light × simple, full) |
Card/Testimonial |
| cards | ValueCard, TeamCard |
Card/Value, Card/Team |
| cards | ServiceRow, ServiceCard |
Card/Service/Secondary, Card/Service/Simple |
| data | CheckList, HighlightList, PricingCard (weekly / monthly switch) |
lists in Services, CMS rich text, Card/Pricing + Misc/Switch |
| forms | Form, FormField / FieldControl, RadioGroup, SubmitButton, honeypotField |
Form |
| icons | Icon (Phosphor paths in paths.ts) |
Phosphor |
| layout | Section, SectionLabel, SectionTitle (split, center), PageTitle, Divider |
Title Section, page Title, Misc/Subtitle |
| media | LoopVideo, ScrollVideo, Showreel |
Video, Page Video, Showreel |
| navigation | Navigation, Hamburger |
Button/Menu, Button/Hamburger |
| patterns | ServiceAccordion |
Services, Card/Service/List |
| patterns | Ticker, RichText |
Ticker, CMS rich text |
| providers, utils | MotionProvider, CurrentYear, InlineText |
— |