--- version: "alpha" name: "Ciketo" description: "Logistics and shipping company website: a warm light grey page, white cards, black type, dark photo covers and a single Orange accent." colors: ink: "#000000" soft: "#4B4A4A" grey: "#E5E5E5" orange: "#E2652A" background: "#F4F0F0" white: "#FFFFFF" ink-70: "rgba(0, 0, 0, 0.7)" ink-50: "rgba(0, 0, 0, 0.5)" ink-20: "rgba(0, 0, 0, 0.2)" white-10: "rgba(255, 255, 255, 0.1)" danger: "#FF2244" primary: "{colors.orange}" on-primary: "{colors.white}" secondary: "{colors.ink}" on-secondary: "{colors.white}" neutral: "{colors.background}" surface: "{colors.white}" on-surface: "{colors.ink}" on-surface-variant: "{colors.soft}" outline: "{colors.grey}" error: "{colors.danger}" typography: display: fontFamily: "Inter" fontSize: "64px" fontWeight: 500 lineHeight: 1.1 letterSpacing: "-0.03em" h1: fontFamily: "Inter" fontSize: "52px" fontWeight: 500 lineHeight: 1.1 letterSpacing: "-0.03em" h2: fontFamily: "Inter" fontSize: "42px" fontWeight: 500 lineHeight: 1.2 letterSpacing: "-0.03em" h3: fontFamily: "Inter" fontSize: "32px" fontWeight: 500 lineHeight: 1.2 letterSpacing: "-0.03em" h4: fontFamily: "Inter" fontSize: "28px" fontWeight: 500 lineHeight: 1.2 letterSpacing: "-0.03em" h5: fontFamily: "Inter" fontSize: "24px" fontWeight: 500 lineHeight: 1.2 letterSpacing: "-0.03em" h6: fontFamily: "Inter" fontSize: "20px" fontWeight: 500 lineHeight: 1.2 letterSpacing: "-0.03em" paragraph: fontFamily: "Inter" fontSize: "16px" fontWeight: 400 lineHeight: 1.4 letterSpacing: "-0.02em" small: fontFamily: "Inter" fontSize: "14px" fontWeight: 400 lineHeight: 1.4 letterSpacing: "-0.02em" button: fontFamily: "Inter" fontSize: "16px" fontWeight: 500 lineHeight: 1.2 letterSpacing: "-0.02em" menu: fontFamily: "Inter" fontSize: "14px" fontWeight: 500 lineHeight: 1.2 letterSpacing: "-0.02em" label: fontFamily: "Inter" fontSize: "12px" fontWeight: 400 lineHeight: 1.2 letterSpacing: "-0.02em" rounded: corner: "2px" spacing: section-padding: "100px" section-padding-phone: "60px" section-padding-tablet: "80px" gutter: "40px" gutter-phone: "15px" gutter-tablet: "20px" content-max: "1600px" header-height: "81px" header-height-phone: "58px" components: button-primary-white: backgroundColor: "{colors.white}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.corner}" padding: "15px 37px" height: "49px" button-primary-black: backgroundColor: "{colors.ink}" textColor: "{colors.white}" typography: "{typography.button}" rounded: "{rounded.corner}" padding: "15px 37px" height: "49px" button-primary-hover: backgroundColor: "{colors.orange}" textColor: "{colors.white}" button-small-white: backgroundColor: "{colors.white}" textColor: "{colors.ink}" typography: "{typography.menu}" rounded: "{rounded.corner}" padding: "12px 16px" height: "41px" button-small-black: backgroundColor: "{colors.ink}" textColor: "{colors.white}" typography: "{typography.menu}" rounded: "{rounded.corner}" padding: "12px 16px" height: "41px" button-small-hover: backgroundColor: "{colors.orange}" textColor: "{colors.white}" menu-link: textColor: "{colors.ink}" typography: "{typography.menu}" rounded: "{rounded.corner}" padding: "6px 8px" height: "29px" menu-link-hover: backgroundColor: "{colors.grey}" menu-link-active: backgroundColor: "{colors.orange}" textColor: "{colors.white}" section-label: backgroundColor: "{colors.orange}" size: "8px" service-card: backgroundColor: "{colors.white}" textColor: "{colors.ink}" rounded: "{rounded.corner}" padding: "20px" service-card-open: backgroundColor: "{colors.ink}" textColor: "{colors.white}" step-card: backgroundColor: "{colors.white}" textColor: "{colors.ink}" rounded: "{rounded.corner}" padding: "20px" input-field: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.corner}" padding: "12px" height: "43px" checkbox: backgroundColor: "{colors.background}" rounded: "{rounded.corner}" size: "16px" submit-button: backgroundColor: "{colors.ink}" textColor: "{colors.white}" typography: "{typography.button}" rounded: "{rounded.corner}" padding: "15px 37px" height: "49px" submit-button-hover: backgroundColor: "{colors.orange}" submit-button-pressed: backgroundColor: "{colors.soft}" --- # Ciketo Design System > The design tokens and style rules of **Ciketo**, a website template by Framebrick (live Framer site: https://ciketo.framer.website). Read it before you build or change a page so new work matches the template. The front matter holds the exact values; the sections below say where and how to use them. Format: [DESIGN.md](https://github.com/google-labs-code/design.md), spec version `alpha`. ## Overview Ciketo is a website template for logistics and shipping companies: services with their trade lanes, a quote form, industries, client testimonials, a blog, legal pages, and about and contact pages. It should feel dependable and efficient: straight lines, tight corners and clear figures, with wide sections and compact cards inside them. The look is built from very few parts. The page is a warm light grey Background (#F4F0F0); content sits on White cards and photos with 2px corners; type is Black, with Soft Black for anything secondary. Buttons are White or Black at rest, and one accent, Orange (#E2652A), carries every small marker (the square before a section label, step numbers, stars, the current menu item) and every button hover. Black open cards, the Black footer and photos under a Black 70 or Black 50 cover give the contrast. Everything is set in Inter: headings, buttons and the menu at weight 500 with -0.03em (headings) or -0.02em letter spacing, paragraphs and labels at 400. Section labels are small uppercase text after an Orange square. Motion is quick and firm: springs of 0.4 s with no bounce, an Orange fill that sweeps across a button on hover, and only the Home hero appears on load. ## Colors - **Black (#000000)** — `ink`, `secondary`, `on-surface`. Headings and text, black buttons, open service cards, the footer. - **Soft Black (#4B4A4A)** — `soft`, `on-surface-variant`. Body text, leads, meta, form labels, the plus/minus in the FAQ. - **Grey (#E5E5E5)** — `grey`, `outline`. Labels on dark, form field borders, divider lines in cards and forms, the menu-link hover. - **Orange (#E2652A)** — `orange`, `primary`. Label squares, the current page in the menu, step numbers, button hover fills, stars, the focused field border. - **Background (#F4F0F0)** — `background`, `neutral`. The page, the header once scrolled, form fields, the lane chip. - **White (#FFFFFF)** — `white`, `on-primary`, `on-secondary`, `surface`. Cards, white buttons, the header boxes, text on dark. - **Black 70% (rgba(0, 0, 0, 0.7))** — `ink-70`. The cover over the Home, Contact and 404 photos; the select chevron. - **Black 50% (rgba(0, 0, 0, 0.5))** — `ink-50`. The cover over the call-to-action photo. - **Black 20% (rgba(0, 0, 0, 0.2))** — `ink-20`. Divider lines in the fact list and the services list, field placeholders, the post-card meta square, the quote mark. - **White 10% (rgba(255, 255, 255, 0.1))** — `white-10`. The footer line, the hero status pill. - **Danger (#FF2244)** — `danger`, `error`. Form error text; its fill is the same red at 15%. Semantic names in the front matter point at these colours: `primary` → `orange`, `on-primary` → `white`, `secondary` → `ink`, `on-secondary` → `white`, `neutral` → `background`, `surface` → `white`, `on-surface` → `ink`, `on-surface-variant` → `soft`, `outline` → `grey`, `error` → `danger`. ## Typography **Inter, sans-serif.** Google Fonts; weights 400, 500 and 600 (600 for bold runs in rich text and the form result labels). Tabular figures for the header clock. Font sizes change at the breakpoints (phone / tablet from 810px / desktop from 1200px); the front matter gives the desktop size. Line height is a multiple of the font size. | Token | Size (phone / tablet / desktop) | Line height | Weight | Letter spacing | Use | |---|---|---|---|---|---| | `display` | 44px / 54px / 64px | 1.2 / 1.2 / 1.1 | 500 | -0.03em | Display 1 — the Home and Contact hero titles, "404" | | `h1` | 36px / 44px / 52px | 1.1 | 500 | -0.03em | Heading 1 — page titles | | `h2` | 30px / 36px / 42px | 1.2 | 500 | -0.03em | Heading 2 — section titles, testimonial titles, service fact values, headings in rich text | | `h3` | 24px / 28px / 32px | 1.2 | 500 | -0.03em | Heading 3 — level-3 headings in rich text | | `h4` | 24px / 26px / 28px | 1.2 | 500 | -0.03em | Heading 4 — fact values, the hero stat numbers | | `h5` | 20px / 22px / 24px | 1.2 | 500 | -0.03em | Heading 5 — service numbers and titles, step numbers, testimonial names | | `h6` | 18px / 19px / 20px | 1.2 | 500 | -0.03em | Heading 6 — card titles, FAQ questions, the clients line, quotes in cards | | `paragraph` | 16px | 1.4 | 400 | -0.02em | Paragraph 16 — leads, descriptions, rich text | | `small` | 14px | 1.4 | 400 | -0.02em | Paragraph 14 — card meta, fact descriptions, form labels, footer links, the clock | | `button` | 16px | 1.2 | 500 | -0.02em | Button 16 — primary and secondary button labels, the submit button | | `menu` | 14px | 1.2 | 500 | -0.02em | Menu 14 — menu links, small button labels | | `label` | 12px | 1.2 | 400 | -0.02em | Label 12 — section labels (uppercase), meta, captions, the consent text | ## Layout Three layouts: phone below 810px, tablet from 810px, desktop from 1200px. Spacing tokens without a suffix are the desktop values; `-tablet` and `-phone` give the smaller screens where they differ. | Token | Phone / tablet / desktop | Use | |---|---|---| | `section-padding` | 60px / 80px / 100px | Vertical padding of a section | | `gutter` | 15px / 20px / 40px | Side padding of a section, the header and the footer | | `content-max` | 1600px | Maximum content width (inside the gutters); the legal pages use 800 | | `header-height` | 58px / 81px / 81px | The fixed header; pages without a dark cover start this far down | Every section is centred, at most `content-max` wide inside the `gutter` on each side, and padded top and bottom by `section-padding` unless the section sets its own; the legal pages are at most 800 wide. A section opens with its label and heading 20 apart and the lead 30 below; on desktops a Split title puts the lead to the right of a 670-wide heading block. Cards in a list or a row (the services accordion, the FAQ, the steps) are 10 apart. In the quote form, groups, columns and rows are all 20 apart, two columns on tablets and desktops and one on phones. ## Elevation & Depth Ciketo is flat: there are no shadows anywhere. Depth comes from fills: White cards on the Background page, a Black card for the open service and the Black footer for emphasis, and photos under a Black 70 cover (`ink-70`, the Home, Contact and 404 heroes) or a Black 50 cover (`ink-50`, the call to action) wherever White text sits on them. On dark, a White 10 fill (`white-10`) draws the hero status pill and the footer line; on light, Black 20 (`ink-20`) and Grey lines divide lists and form groups. ## Shapes Every box has the same small 2px corners; nothing is round or pill-shaped. - **`corner` (2px):** Every box: buttons, cards, photos, fields, the header boxes, chips. ## Motion Reduced motion: the Home hero keeps only its fades (nothing rises), the client ticker stands still and the loading ring does not turn. - **`spring`** — spring (duration 0.4 s, bounce 0). Buttons (sweep, merge, arrow), the header colours and the phone menu, the services accordion, the steps, the testimonials, the FAQ cards. - **`spring-soft`** — spring (duration 0.4 s, bounce 0.2). The plus/minus icon, the hamburger lines, the post-card photo zoom. - **`spring-menu`** — spring (duration 0.5 s, bounce 0). Menu links: the Grey background on hover. - **`appear-text`** — spring (duration 0.4 s, bounce 0). Home hero on load: each word of the title (from 0.3 s) or each line of the lead and the booking note as it wraps on screen (from 0.4 s) rises 10px and fades in, 0.075 s after the one before. - **`appear-block`** — spring (stiffness 400, damping 58, mass 1). Home hero on load: the buttons, the stats card and the lane card (0.65 s) and the status pill (0.35 s) rise 7px into place and fade in. - **`ease-form`** — `cubic-bezier(0.44, 0, 0.56, 1)`. Submit-button colours (0.2 s) and the blog loader fade (0.3 s). - **`spin`** — type tween, duration 1, ease linear, repeat infinite. The 20px loading spinners turn once a second. - **`ticker`** — speed 20px/s, gap 60px. Client logos scroll left forever; they stand still with reduced motion. ## Components Component tokens below use the exact values of the template. Variants with a suffix (`-hover`, `-pressed`, `-focus`, `-open`) only list what changes. - **`button-primary-white`** (Button (Primary / Secondary / Small × White / Black)). "Get a Quote" in heroes and the call to action. A label box and, 2px to its right, a 40-wide arrow box of the same colour with the 16px `arrow-up-right` icon (padding 12). - **`button-primary-black`** (Button (Primary / Secondary / Small × White / Black)). "More About Us", "Ask Question". The Secondary Black button ("Our Services", "Call Customer Service") is the label box alone. - **`button-primary-hover`** (Button (Primary / Secondary / Small × White / Black)). Hover (and focus): an Orange fill sweeps across the label box from the left and the label turns White; the 2px gap closes so label and arrow box become one block, and the arrow turns 45° but keeps its colour (`spring`). - **`button-small-white`** (Button (Primary / Secondary / Small × White / Black)). One box: the label and a 14px arrow 10 apart. In the open services card and in the header over a dark cover. - **`button-small-black`** (Button (Primary / Secondary / Small × White / Black)). The header's button and the services list. - **`button-small-hover`** (Button (Primary / Secondary / Small × White / Black)). Hover: the whole box turns Orange, label and arrow White, the arrow turns 45° (no sweep). - **`menu-link`** (Menu link (Default / Active)). No fill at rest. - **`menu-link-hover`** (Menu link (Default / Active)). Hover fills the box Grey (`spring-menu`, 0.5 s). - **`menu-link-active`** (Menu link (Default / Active)). The link of the current page, exact match only; no hover change. - **`section-label`** (Section label). An 8px Orange square, then the label in `label`, uppercase, 10 to its right: Black on light, White on dark. - **`service-card`** (Services accordion). A closed service: the number and title in `h5`, the plus at the right; padding 30 on desktops. FAQ cards and steps use the same White card with padding 20. - **`service-card-open`** (Services accordion). The open service turns Black with White text and shows the description, a Small White button and a photo (`spring`). - **`step-card`** (Step selector). One of four steps, one open at a time: the number in `h5` Orange, then "/" and the total ("04", `paragraph`, Soft Black), 5 apart; closed steps sit at 60% opacity with a Soft Black number. - **`input-field`** (Form field). A 1px Grey border inside, 16px Inter at line height 1.2, a Black 20 placeholder; the label (`small`, Soft Black) sits 10 above. Focus turns the border Orange, with no outline ring. A text area is at least 100 tall. - **`checkbox`** (Checkbox). A 1px Grey border; checked, it fills Orange with a White check; focused, a Black 70 border. Its text (`label`, Soft Black) sits 10 to the right. - **`submit-button`** (Submit button). "Request My Quote". While sending, a White 20px ring turns in place of the label; after a send it reads "Thank you", after a failed send "Something went wrong" in Danger red on a 15% fill of the same red. - **`submit-button-hover`** (Submit button). Hover: an Orange fill, the label stays White (0.2 s, `ease-form`). - **`submit-button-pressed`** (Submit button). Pressed: a Soft Black fill. Other components of the template, described in its spec: Text link, Logo (Black / White), Icon, Hamburger (Default / Close), Clock, Section, Title section, Appear on load (Home hero only), Post card, Fact list, Plus/minus, FAQ accordion, Ticker, Rich text, Loader, Quote form. ## Do's and Don'ts - Do use Orange only as the accent: the section-label square, step numbers, stars, the current menu item, button hovers and the focused field border. - Do make buttons White or Black at rest and turn them Orange with a White label on hover. - Do give every box (buttons, cards, photos, fields, chips, the checkbox) 2px corners. - Do set headings, buttons and the menu at weight 500, and paragraphs, labels and form text at 400. - Do start a section with an 8px Orange square and an uppercase `label`, then the heading 20 below. - Do use Soft Black for leads, descriptions, meta and form labels on light surfaces, and Black for titles. - Do put White text on photos only under a Black 70 or Black 50 cover. - Do animate hovers and open/close states with `spring` (0.4 s, no bounce); only the Home hero appears on load. - Don't add shadows, gradients or new colours; the palette above is the whole palette. - Don't round anything beyond 2px or use pill shapes. - Don't fill a button Orange at rest; Orange is its hover. - Don't use Danger red for anything but a failed form send. - Don't make sections rise or fade into view on scroll. - Don't mix fonts: Inter is the only family. ## Source Every value here was measured from the published Ciketo template (https://ciketo.framer.website); when this file and the live site disagree, the site is right. Demo photos (Unsplash) are placeholders and not part of the design system; the template has no videos.