# How fastino.ai is designed ## Overview fastino.ai presents a predominantly dark surface treatment in the captured pages. The system is anchored by `#000000`, `#0c0608`, and `#f2ece9`, with typography led by **System**, **Stk Bureau Sans**, **Customv 2 Stk Bureau Sans**, **Applesystem**, and **Times**. The guide below names reusable design roles only where the captured evidence supports them. The reference set uses representative captured pages. It is a design reference, not a claim about the site's private source code or a complete responsive specification. ## Design tokens The token names are practical labels for the recorded values. They are not claims about the source site's variable names. ### Colors | token | value | observed use | | --- | --- | --- | | color.text | `#000000` | text on page content | | color.surface | `#0c0608` | surface on page content | | color.surface | `#f2ece9` | surface on page content | | color.text | `#ffffff` | text on page content | | color.surface | `#161012` | surface on page content | | color.text | `#0000ee` | text on page content | | color.text | `#5c5658` | text on page content | | color.surface | `#ede6e3` | surface on page content | | color.surface | `#2d2729` | surface on page content | | color.surface | `#191315` | surface on page content | ### Typography | token | font family | size | weight | line height | letter spacing | observed use | | --- | --- | --- | --- | --- | --- | --- | | type.utility-12px | **System** | 12px | 400 | normal | normal | `

`, ``, ``, ``, and `` and `

` | | type.display-40px | Stk Bureau Sans | 40px | 400 | 40px | -0.95px | `

` and `` | | type.display-64px | Stk Bureau Sans | 64px | 300 | 60px | -2.3px | `` and `
` | | type.body-14px | Applesystem | 14px | 400 | normal | normal | `
` | | type.body-16px | Times | 16px | 400 | normal | normal | `` | | type.body-14px | Stk Bureau Sans | 14px | 300 | 20px | -0.15px | `
`, ``, and `` | | type.utility-12px | Stk Bureau Sans | 12px | 300 | 20px | -0.15px | `
` | | type.utility-11px | Stk Bureau Sans | 11px | 300 | 20px | 1.7px | `
` | | type.body-14px | Customv 2 Stk Bureau Sans | 14px | 400 | 20px | -0.15px | `
` and `` | | type.body-14px | Stk Bureau Sans | 14px | 300 | 20px | -0.14px | `
` | | type.body-16px | Stk Bureau Sans | 16px | 300 | 24px | -0.15px | `
` | | type.display-36px | Stk Bureau Sans | 36px | 300 | 60px | -2.3px | `
` | | type.body-16px | Stk Bureau Sans | 16px | 300 | 24px | -0.16px | `
` | | type.body-14px | Stk Bureau Sans | 14px | 300 | 16px | -0.15px | `
` | | type.body-16px | Customv 2 Stk Bureau Sans | 16px | 400 | 24px | -0.15px | `
` | | type.body-28px | Stk Bureau Sans | 28px | 300 | 24px | -0.15px | `
` | | type.utility-13px | Stk Bureau Sans | 13px | 400 | 15.6px | -0.13px | `
` | | type.utility-13px | Stk Bureau Sans | 13px | 300 | 17px | normal | `
` | | type.utility-13px | Stk Bureau Sans | 13px | 300 | 16px | -0.15px | `
` | ### Spacing | value | property | observed element | | --- | --- | --- | | `20px` | padding-right | page content | | `20px` | padding-left | page content | | `0px 20px` | padding | page content | | `10px` | gap | page content | | `10px` | row-gap | page content | | `10px` | column-gap | page content | | `20px` | padding-bottom | page content | | `4px` | gap | page content | ### Shape and depth The captured pages use `0px none 20px`, `0px none 6px`, `0px none 12px`, `0px none 30px`, `0px none 32px`, and `0px none 100px` border treatments. Recorded gradients include `linear-gradient(rgba(242, 236, 233, 0) 0%, rgb(242, 236, 233) 100%)` and `linear-gradient(rgba(12, 6, 8, 0) 0%, rgba(12, 6, 8, 0.88) 50.9424%, rgb(12, 6, 8) 78.9314%)`. ## Colors The visual system is predominantly dark surface treatment. Surface colors include `#0c0608`, `#f2ece9`, and `#161012`. Text colors include `#000000`, `#ffffff`, and `#0000ee`. Keep image-derived colors separate from interface colors. ## Typography The captured type system uses System, Customv 2 Stk Bureau Sans, Stk Bureau Sans, Applesystem, and Times. The table records measured size, weight, leading, and tracking where available; it does not establish licensing or a complete fallback stack. ## Layout The captured pages use values such as `20px`, `20px`, `0px 20px`, `10px`, and `10px` for padding and margin. These are measured usages, not a resolved scale. The available evidence does not establish container widths, grid rules, or breakpoints. ## Visual language The captured visual language is predominantly dark surface treatment. Surface treatment centers on `#0c0608`, `#f2ece9`, `#161012`, and `#ede6e3`. Depth is supported by the returned gradients. ## Components and states The captured pages include repeated styling on `
`, ``, ``, `
`, ``, ``, `
`, and `` elements. The evidence does not identify reusable component boundaries or interaction states. Treat loading, focus, hover, pressed, error, and disabled states as implementation work to validate rather than as captured facts. ## Responsive behavior The captured token set does not establish breakpoint values or mobile behavior. Validate stacking, navigation changes, image treatment, and type scaling against the representative captures before implementing a responsive adaptation. ## Practical implementation guidance - Preserve the dark surface relationship and the measured type hierarchy before adding decorative treatment. - Start from the returned typography, spacing, color, and border values; name any new scale or semantic role as an adaptation rather than as a source fact. - Keep the captured font families separate from licensing decisions. - Use screenshots to validate component anatomy, responsive behavior, focus treatment, and motion before shipping. - Avoid introducing gradients or shadows beyond the captured treatment; the returned evidence includes those treatments. ## Scope note The guide uses representative captured pages. The evidence supports the values and observations above; it does not establish component semantics, interaction states, motion timing, breakpoint rules, font licensing, or a complete source stylesheet.