Titen design system — Next.js
Content-free building blocks of the Titen template, mirrored from the Framer components. Import everything from
@/design-system; components never import @/content — sections pass data in through props. The spec of each
component is in ../../../spec/components.md; see them together at /style-guide.
Tokens
Section titled “Tokens”| File | Holds |
|---|---|
theme.css |
Colours (ink, background, sand, accent, orange), breakpoints (md 810, lg 1200), the font variable |
tokens/text.ts |
Text styles: display, h1–h6, paragraph, small, tiny, menu, button (Plus Jakarta Sans) |
tokens/motion.ts |
spring, springButton, springSlide, the appear springs, hoverVariants |
Translucent colours use opacity modifiers: Black 80 = ink/80, White 10 = white/10.
Components
Section titled “Components”| Group | Component | Framer |
|---|---|---|
| actions | Button |
Button/Primary (Black, White, Accent - Black, Accent - White) |
| actions | ArrowButton |
Button/Secondary |
| actions | MenuLink |
Button/Menu (Default, Active, With Icon) |
| actions | LineLink |
Button/Text Line |
| brand | Logo |
Misc/Logo |
| icons | Icon |
Phosphor icons |
| motion | Reveal, WordsAppear, Appear |
Appear effects and text effects |
| navigation | Navigation, Hamburger, SearchDialog |
Section/Header parts, Button/Hamburger, Search |
| layout | Section, SectionTitle, PageTitle, SectionDivider |
Section, Title, Divider |
| cards | ProjectCard, FeaturedProjectCard |
Card/Project 01, Card/Project 02 |
| cards | PostCard, TestimonialCard, TeamCard |
Card/Post, Card/Testimonial, Card/Team |
| data | Fact, ValueItem, CheckList |
Fact Number, Misc/Value, Misc/Icon Text |
| media | LoopVideo |
Video |
| patterns | Accordion |
Misc/Accordions in Misc/Service Value |
| patterns | ServiceList |
Section/Service List |
| patterns | Slideshow |
Slideshow (autoplay or arrows) |
| patterns | RichText |
CMS rich text |
| forms | Form, FormField, SubmitButton, NewsletterForm |
Form, inputs, Submit |
| providers | MotionProvider |
reduced motion |
| utils | CurrentYear |
the copyright year |
New component: put it in the right group, export it from index.ts, add it to /style-guide and to this table.