Titen design system (Astro)
Content-free building blocks of the Titen template, mirrored from the Framer components and from the Next.js edition
(same names, props and classes). Components never read src/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, springPop, springSlide, the appear springs |
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 | FillImage, LoopVideo |
Image fill, 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, FieldControl, SubmitButton, NewsletterForm |
Form, inputs, Submit |
| text | InlineText |
bold runs and links in copy |
| utils | CurrentYear |
the copyright year |
Interactivity
Section titled “Interactivity”Plain TypeScript and Motion, no framework. Each script exports an init…() function that the component’s <script>
calls (the HTML edition bundles the same functions):
| Script | Does |
|---|---|
scripts/hover.ts |
Hover states: data-hover on the hoverable element, data-motion (rest and hover states) on what changes |
scripts/appear.ts |
Appear effects: data-appear="block", "word", "line" or "late", start state written inline |
scripts/toggle.ts |
Two-state parts: data-toggle, with data-on / data-off class lists on the elements that change |
scripts/accordion.ts, service-list.ts, team-card.ts |
The accordion, the service list and the team bio, built on toggle.ts |
scripts/slideshow.ts |
The slideshow: autoplay, arrows, endless loop |
scripts/search.ts |
The search panel (opened by any data-search-open button) |
scripts/form.ts |
Sending forms and showing their state on the Submit button |
scripts/loop-video.ts, current-year.ts |
Background videos (poster only with reduced motion), the copyright year |
New component: put it in the right group, add it to /style-guide and to this table.