llms.txt

Littio Brand Identity

A complete profile of Littio's visual system — colors, typography, components, and personality.

Quick Facts

Field Value
Primary #76829A
Accent #FAFCFD
Body Font Satoshi Medium
Heading Font Satoshi Bold

Color Palette

Typography

Visual Assets

UI Components

Brand Personality

Tone: professional · Energy: medium · Audience: individuals seeking US bank accounts

Littio Brand in the Wild

Real-world brand assets — ads, campaigns, marketing materials.

Working with these fonts

  1. Open the company's homepage in a browser with DevTools open.
  2. In the Network tab, filter by "Font" (or by extension: woff2, woff, ttf, otf).
  3. Hard-reload the page and click around (pricing, blog, careers) — some weights only load on specific routes.
  4. For each captured font URL: right-click → Save As to download the file locally.
  5. View the page's CSS (DevTools → Sources, or curl the stylesheet URLs) and copy out the matching @font-face declarations. Rewrite each src: url(...) to point to your local file path.

Machine-Readable Profile

{
 "colorScheme": "dark",
 "fonts": [
  {
   "family": "Satoshi Bold",
   "role": "heading"
  },
  {
   "family": "Satoshi Medium",
   "role": "body"
  },
  {
   "family": "Klein ExtraBold",
   "role": "display"
  }
 ],
 "colors": {
  "primary": "#76829A",
  "secondary": "#0000EE",
  "accent": "#FAFCFD",
  "background": "#B7B9BD",
  "textPrimary": "#0E1523",
  "link": "#0E1523"
 },
 "typography": {
  "fontFamilies": {
   "primary": "Satoshi Medium",
   "heading": "Satoshi Bold"
  },
  "fontStacks": {
   "heading": [
    "Klein ExtraBold",
    "sans-serif"
   ],
   "body": [
    "sans-serif"
   ],
   "paragraph": [
    "Satoshi Bold",
    "sans-serif"
   ]
  },
  "fontSizes": {
   "h1": "64px",
   "h2": "54px",
   "body": "16px"
  }
 },
 "spacing": {
  "baseUnit": 4,
  "borderRadius": "24px"
 },
 "components": {
  "buttonPrimary": {
   "background": "#FAFCFD",
   "textColor": "#0000EE",
   "borderRadius": "60px",
   "borderRadiusCorners": {
    "topLeft": "60px",
    "topRight": "60px",
    "bottomRight": "60px",
    "bottomLeft": "60px"
   },
   "shadow": "none"
  },
  "buttonSecondary": {
   "background": "#FFFFFF",
   "textColor": "#0000EE",
   "borderRadius": "60px",
   "borderRadiusCorners": {
    "topLeft": "60px",
    "topRight": "60px",
    "bottomRight": "60px",
    "bottomLeft": "60px"
   },
   "shadow": "none"
  }
 },
 "images": {
  "logo": "data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20style%3D%22width%3A100%25%3Bheight%3A100%25%3B%22%20viewBox%3D%220%200%2054%2020%22%20preserveAspectRatio%3D%22none%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20data-fc-idx%3D%220%22%3E%3Csvg%20width%3D%2254%22%20height%3D%2220%22%20fill%3D%22none%22%20id%3D%22svg-1088708935_2353%22%20style%3D%22fill%3A%20rgb(14%2C%2021%2C%2035)%20!important%3B%22%3E%3Cpath%20d%3D%22M21.625%2017.108c.122%200%20.22.097.22.219v2.42c0%20.116-.09.21-.205.216-.46.026-1.598.075-2.434-.012-.628-.037-1.23-.251-1.785-.547-.997-.593-1.44-1.518-1.551-2.629-.037-.444-.037-.888-.037-1.333V8.736h-1.795a.22.22%200%200%201-.22-.22v-2.64a.22.22%200%200%201%20.22-.219h1.795V1.32a.22.22%200%200%201%20.22-.22h2.736a.22.22%200%200%201%20.22.22v4.337h2.836a.22.22%200%200%201%20.22.22v2.64a.22.22%200%200%201-.22.219h-2.836v6.891c0%20.223%200%20.482.074.704.074.444.406.777.887.777h1.655Zm32.129-4.371c0%201.703-.406%203.258-1.477%204.628-.813%201.037-1.847%201.74-3.102%202.147-1.515.482-3.029.555-4.543.111-1.994-.555-3.435-1.74-4.284-3.59-.554-1.223-.702-2.518-.665-3.85.074-1.334.406-2.555%201.145-3.666%201.145-1.666%202.807-2.591%204.801-2.888%201.699-.222%203.361.037%204.838.926%201.404.814%202.364%202.036%202.844%203.59.332.852.443%201.704.443%202.592ZM42.822%2012.7c.074.519.111%201%20.222%201.518.406%201.851%201.81%202.925%203.73%202.888%201.625-.037%202.844-.815%203.435-2.258.37-.963.443-1.926.332-2.962-.11-.852-.37-1.629-.886-2.295-.702-.852-1.662-1.222-2.733-1.26-1.404-.036-2.585.408-3.361%201.667-.554.851-.702%201.777-.739%202.702Zm-37.03%204.408a.22.22%200%200%201%20.22.22v2.418c0%20.115-.09.21-.205.217-.46.026-1.598.074-2.434-.012-.628-.037-1.23-.251-1.785-.548-.997-.592-1.44-1.517-1.551-2.628A16.056%2016.056%200%200%201%200%2015.442V.22A.22.22%200%200%201%20.22%200h2.736c.122%200%20.22.097.22.218v15.409c0%20.222%200%20.481.074.704.074.444.406.777.886.777h1.656Zm25.288%200c.12%200%20.219.097.219.219v2.42c0%20.116-.09.21-.205.216-.459.026-1.598.075-2.434-.012-.628-.037-1.23-.251-1.785-.547-.997-.593-1.44-1.518-1.55-2.629-.038-.444-.038-.888-.038-1.333V8.736h-1.795a.22.22%200%200%201-.22-.22v-2.64a.22.22%200%200%201%20.22-.219h1.795V1.32a.22.22%200%200%201%20.22-.22h2.736a.22.22%200%200%201%20.22.22v4.337H31.3a.22.22%200%200%201%20.22.22v2.64a.22.22%200%200%201-.22.219h-2.836v6.891c0%20.223%200%20.482.074.704.074.444.407.777.887.777h1.655ZM8.383%206.83a.22.22%200%200%201%20.22-.221h2.7a.22.22%200%200%201%20.219.22v12.929a.22.22%200%200%201-.22.22h-2.7a.22.22%200%200%201-.22-.22V6.829Zm29.038%2012.928a.22.22%200%200%201-.22.22h-2.699a.22.22%200%200%201-.22-.22V6.829a.22.22%200%200%201%20.22-.22h2.7a.22.22%200%200%201%20.22.22v12.929ZM11.969%202.864c0%201.11-.776%202-1.994%202-1.33%200-2.032-.963-2.032-2%200-1.073.739-1.962%202.032-1.962%201.181-.037%201.994.814%201.994%201.962Zm25.858.038c0%201.074-.776%201.962-1.995%201.962-1.33%200-2.068-.962-2.03-2.036.036-1.073.775-1.925%202.03-1.962%201.182%200%202.032.889%201.995%202.036Z%22%20fill%3D%22%230E1523%22%2F%3E%3C%2Fsvg%3E%3C%2Fsvg%3E",
 "favicon": "https://framerusercontent.com/images/mqmwc7ucueZ7kZOWhBS56Wb0vo.png",
 "ogImage": "https://framerusercontent.com/images/JOHpOaYVsLRLWHx0wWxYK4Kg5o.png",
 "logoHref": "./"
 },
 "__llm_logo_reasoning": {
 "selectedIndex": 0,
 "reasoning": "Selected #0 because it is located in the header, is visible, and links to the homepage, which are strong indicators of the main brand logo.",
 "confidence": 0.9,
 "source": "llm"
 },
 "__llm_button_reasoning": {
 "primary": {
 "index": 0,
 "text": "Open your account",
 "reasoning": "Button #0, 'Open your account', is the primary CTA due to its action-oriented text and prominent placement. It uses a distinct blue color, making it stand out as the main action button."
 },
 "secondary": {
 "index": 4,
 "text": "Find out more",
 "reasoning": "Button #4, 'Find out more', is selected as secondary due to its different background color (#FFFFFF) and supportive action text, which complements the primary CTA."
 },
 "confidence": 0.95
 },
 "personality": {
 "tone": "professional",
 "energy": "medium",
 "targetAudience": "individuals seeking US bank accounts"
 },
 "designSystem": {
 "framework": "custom",
 "componentLibrary": ""
 },
 "confidence": {
 "buttons": 0.95,
 "colors": 0.9,
 "overall": 0.925
 },
 "__llm_metadata": {
 "logoSelection": {
 "llmCalled": true,
 "llmSucceeded": true,
 "finalSource": "llm",
 "rawLogoSelection": {
 "selectedLogoIndex": 0,
 "selectedLogoReasoning": "Selected #0 because it is located in the header, is visible, and links to the homepage, which are strong indicators of the main brand logo.",
 "confidence": 0.9
 }
 },
 "buttonClassification": {
 "llmCalled": true,
 "llmSucceeded": true
 }
 }
}