fastino.ai DESIGN.md

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	<div>, <body>, <a>, <img>, and <svg>
type.display-64px	Customv 2 Stk Bureau Sans	64px	400	68px	-2.3px	<span> and <h1>
type.display-40px	Stk Bureau Sans	40px	400	40px	-0.95px	<h1> and <span>
type.display-64px	Stk Bureau Sans	64px	300	60px	-2.3px	<span> and <h1>
type.body-14px	Applesystem	14px	400	normal	normal	<div>
type.body-16px	Times	16px	400	normal	normal	<html>
type.body-14px	Stk Bureau Sans	14px	300	20px	-0.15px	<p>, <span>, and <a>
type.utility-12px	Stk Bureau Sans	12px	300	20px	-0.15px	<p>
type.utility-11px	Stk Bureau Sans	11px	300	20px	1.7px	<h1>
type.body-14px	Customv 2 Stk Bureau Sans	14px	400	20px	-0.15px	<p> and <span>
type.body-14px	Stk Bureau Sans	14px	300	20px	-0.14px	<p>
type.body-16px	Stk Bureau Sans	16px	300	24px	-0.15px	<h1>
type.display-36px	Stk Bureau Sans	36px	300	60px	-2.3px	<h1>
type.body-16px	Stk Bureau Sans	16px	300	24px	-0.16px	<p>
type.body-14px	Stk Bureau Sans	14px	300	16px	-0.15px	<h1>
type.body-16px	Customv 2 Stk Bureau Sans	16px	400	24px	-0.15px	<h1>
type.body-28px	Stk Bureau Sans	28px	300	24px	-0.15px	<h1>
type.utility-13px	Stk Bureau Sans	13px	400	15.6px	-0.13px	<p>
type.utility-13px	Stk Bureau Sans	13px	300	17px	normal	<p>
type.utility-13px	Stk Bureau Sans	13px	300	16px	-0.15px	<p>

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 <div>, <html>, <body>, <p>, <a>, <img>, <h1>, and <span> 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.