Tustel design system — Next.js
Content-free building blocks of the Tustel template, mirrored from the Framer components. Import everything from
@/design-system; components never import @/content — sections pass data in through props. See them all together
at /style-guide.
Tokens
Section titled “Tokens”| File | Holds |
|---|---|
theme.css |
Colours (ink, soft, orange, background), breakpoints (md 810, lg 1200), the font variable, the ticker and spinner keyframes |
tokens/text.ts |
Text styles: display, h1–h6 (Inter Display: Inter’s optical size 32), paragraph, small, menu, button, label, tiny (Inter, optical size 14) |
tokens/motion.ts |
spring (no bounce, 0.5 s), springQuick (0.4 s), springSoft (bounce 0.2, 0.4 s), slideSpring (the slideshows), the appear ease, distances and staggers |
Translucent colours use opacity modifiers: Black 60 = ink/60, Black 30 = ink/30, Black 10 = ink/10.
Components
Section titled “Components”| Group | Component | Framer |
|---|---|---|
| actions | Button (black, white, secondary-black, secondary-white) |
Button/Primary (Black, White, Secondary/Black, Secondary/White) |
| actions | TextLink, MenuLink |
Button/Menu (Secondary/Black and /White; Black and White) |
| brand | Logo |
Misc/Logo (Black, White) |
| icons | Icon |
Phosphor (ArrowRight) |
| motion | TextAppear (letters, words, lines), Reveal, HeroBlock |
text effects, appear and scroll-in effects |
| navigation | Hamburger |
the phone menu button of Section/Header |
| layout | Section, SectionLabel, SectionTitle |
Section, Label text style, Title Section |
| cards | ProjectCard |
Portfoilo (sic) |
| cards | PostCard |
Post |
| media | Slideshow |
Slideshow/Hero Background, Slideshow/Testimonial |
| data | Counter, FactList |
Number Counter code component, Misc/Stats |
| patterns | Ticker |
the client logos and the specialities |
| patterns | SpecialtiesCard |
Card/Point List |
| patterns | PagedList |
collection lists with load on scroll and the Spinner |
| patterns | RichText |
CMS rich text |
| forms | Form, FormField, FieldControl, SubmitButton |
Form, inputs, selects, Submit |
| providers | MotionProvider |
reduced motion |
| utils | CurrentYear |
the copyright year |
Page sections (the hero, the portfolio, the services…) live in src/components/sections/; the header and footer in
src/components/site/.
New component: put it in the right group, export it from index.ts, add it to /style-guide and to this table.