Ciketo design system (Astro)
Content-free building blocks of the Ciketo 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. See them
all together at /style-guide.
Tokens
Section titled “Tokens”| File | Holds |
|---|---|
theme.css |
Colours (ink, soft, grey, orange, background), breakpoints (md 810, lg 1200), the font variable, the ticker keyframes |
tokens/text.ts |
Text styles: display, h1–h6, paragraph, small, button, menu, label (Inter) |
tokens/motion.ts |
spring (no bounce, 0.4 s), springSoft (bounce 0.2), springMenu (0.5 s), the Home hero appear values |
Translucent colours use opacity modifiers: Black 70 = ink/70, Black 50 = ink/50, Black 20 = ink/20, White 10 =
white/10.
Components
Section titled “Components”| Group | Component | Framer |
|---|---|---|
| actions | Button (primary, secondary, small × white, black) |
Button/Primary (Primary, Secondary, Small) |
| actions | MenuLink |
Button/Menu (Default, Active) |
| brand | Logo |
Misc/Logo (Black, White) |
| icons | Icon, PlusMinus |
Phosphor icons, Button/Plus Min |
| media | FillImage |
image fill (resized WebP files from src/assets/images) |
| motion | TextAppear, Appear |
the Home hero text and layer appear effects |
| navigation | Navigation, Hamburger |
Section/Header parts, Button/Hamburger |
| layout | Section, SectionLabel, SectionTitle |
Section, Misc/Label, Title Section |
| cards | PostCard |
Card/Post |
| data | Clock, FactList |
Time & Date code component, Fact Number |
| patterns | ServiceAccordion |
Part/Service with Card/Sevice/Accordion |
| patterns | Accordion |
Card/Question (FAQ) |
| patterns | StepSelector |
Part/Step with Card/Step |
| patterns | Ticker |
the client logo ticker |
| patterns | RichText |
CMS rich text |
| forms | Form, FormField, FieldControl, SubmitButton |
Form, inputs, select, Submit |
| utils | CurrentYear |
the copyright year |
Page sections (the hero, the testimonials, the quote form…) live in src/components/sections/.
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); helpers that take arguments have other names (setToggled,
setHamburger). Animations respect reduced motion.
| Script | Does |
|---|---|
scripts/hover.ts |
Hover states: data-hover on the hoverable element, data-motion (rest and hover states) on what changes, data-transition for the spring |
scripts/appear.ts |
The Home hero appear effects: data-appear="text" or "block", 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/service-accordion.ts, faq.ts, steps.ts |
The services accordion, the FAQ and the “How it works” steps |
scripts/testimonials.ts |
The testimonials: a portrait click makes it the large one |
scripts/ticker.ts |
The client logo ticker |
scripts/hamburger.ts |
The hamburger lines (the header opens the phone menu with it) |
scripts/load-more.ts |
The blog list: the next six posts when the spinner scrolls into view |
scripts/form.ts |
Sending forms and showing their state on the Submit button |
scripts/clock.ts, current-year.ts |
The header clock, the copyright year |
New component: put it in the right group, add it to /style-guide and to this table.