Ciketo design system — Next.js
Content-free building blocks of the Ciketo 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, 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 |
| 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 |
| providers | MotionProvider |
reduced motion |
| utils | CurrentYear |
the copyright year |
Page sections (the hero, the testimonials, the quote form…) live in src/components/sections/.
New component: put it in the right group, export it from index.ts, add it to /style-guide and to this table.