Meherun Mridha

Generated Oct 18, 2026

DESIGN.md for taito.ai

taito.ai8 colors5 componentsSuisse Intl

Remix

2 screenshots captured· taito.ai

1 / 2 · Taito.ai — Run people ops on autopilot · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Taito
description: |
  Taito.ai's design system embodies a refined, minimalist aesthetic grounded in
  a carefully curated neutral palette accented by deep ink blacks. The visual
  personality is professional yet approachable, prioritizing clarity and
  operational efficiency. The system employs generous whitespace, subtle
  micro-interactions, and a hierarchy built on typographic weight rather than
  color saturation. This creates an atmosphere of control and
  sophistication—perfect for a platform managing complex people operations. The
  brand feels contemporary and trustworthy, avoiding visual clutter in favor of
  purposeful, intentional design.
source:
  url: "https://taito.ai/"
  pagesAnalyzed: 1
  extractedAt: 2026-10-18
  tokensMeasured: true
colors:
  primary: "#0F0E0D"
  canvas: "#FAFAF9"
  surface: "#1F1D1A"
  on-primary: "#FAFAF9"
  ink: "#0F0E0D"
  body: "#524F49"
  muted: "#6E6A65"
  faint: "#8F8B85"
  hairline: "#E5E5E3"
  accent-1: "#280404"
typography:
  display-lg:
    fontFamily: "Suisse Intl-99e21c928808656c"
    fontSize: 59.956px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -1.5px
  display-lg-tight:
    fontFamily: "Suisse Intl-99e21c928808656c"
    fontSize: 59.956px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -1.5px
  heading-xl:
    fontFamily: "Suisse Intl-99e21c928808656c"
    fontSize: 38.4811px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.58px
  heading-lg:
    fontFamily: "Suisse Intl-99e21c928808656c"
    fontSize: 24.7048px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  heading-md:
    fontFamily: "Suisse Intl-99e21c928808656c"
    fontSize: 19.7968px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  heading-md-strong:
    fontFamily: "Suisse Intl-99e21c928808656c"
    fontSize: 19.7968px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sm:
    fontFamily: "Suisse Intl-99e21c928808656c"
    fontSize: 15.864px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  heading-xs:
    fontFamily: "Suisse Intl-99e21c928808656c"
    fontSize: 12.7134px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  quote:
    fontFamily: "Suisse Intl-99e21c928808656c"
    fontSize: 30.8323px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  body-xl:
    fontFamily: "Suisse Intl-99e21c928808656c"
    fontSize: 24.7048px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-lg:
    fontFamily: "Suisse Intl-99e21c928808656c"
    fontSize: 19.7968px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-md:
    fontFamily: "Suisse Intl-99e21c928808656c"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-sm:
    fontFamily: "Suisse Intl-99e21c928808656c"
    fontSize: 15.864px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-sm-tight:
    fontFamily: "Suisse Intl-99e21c928808656c"
    fontSize: 15.864px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  body-xs:
    fontFamily: "Suisse Intl-99e21c928808656c"
    fontSize: 12.7134px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button:
    fontFamily: "Suisse Intl-99e21c928808656c"
    fontSize: 15.864px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
rounded:
  none: 0px
  xs: 4px
  sm: 6px
  md: 8px
  full: 9999px
spacing:
  xxs: 4px
  xs: 8px
  sm: 16px
  md: 20px
  lg: 24px
  xl: 28px
  xxl: 40px
  xxxl: 60px
  section: 68px
  band: 80px
borderWidths:
  thin: 1px
shadows:
  sm: "rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
  md: "rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px"
  lg: "oklab(0.164546 0.00102162 0.00246866 / 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
elevationStrategy: layered-micro
themes:
  derived: dark   # the other theme is the site's measured palette
  light:
    bg: "#FAFAF9"
    surface: "#1F1D1A"
    surfaceRaised: "#1E1C19"
    text: "#0F0E0D"
    textMuted: "#524F49"
    border: "#E5E5E3"
    accent: "#0F0E0D"
    accentFg: "#FFFFFF"
    focusRing: "#0F0E0D"
    elevation: shadow
  dark:
    bg: "#0F0F10"
    surface: "#1D1D1E"
    surfaceRaised: "#29292A"
    text: "#F5F5F5"
    textMuted: "#9E9E9E"
    border: "#353536"
    accent: "#877E75"
    accentFg: "#0B0B0C"
    focusRing: "#666059"
    elevation: "border+surface"
  contrastFailures:
    - "light: text on surface = 1.15:1 (needs 4.5:1)"
components:
  button-primary:
    textColor: "{colors.on-primary}"
    height: 49.4844px
    padding: "0px 19.7968px 0px 19.7968px"
    fontSize: 19.7968px
    fontFamily: "Suisse Intl-99e21c928808656c"
    fontWeight: 500
    lineHeight: 1.5
    rounded: "{rounded.md}"
    backgroundColor: "{colors.primary}"
  button-primary-sm:
    typography: "{typography.button}"
    textColor: "{colors.on-primary}"
    height: 39.5781px
    padding: "0px 14.8461px 0px 14.8461px"
    rounded: "{rounded.sm}"
    backgroundColor: "{colors.primary}"
  button-outline:
    typography: "{typography.button}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.hairline}"
    height: 39.5781px
    padding: "0px 14.8461px 0px 14.8461px"
    rounded: "{rounded.sm}"
  button-text:
    typography: "{typography.button}"
    textColor: "{colors.ink}"
    height: 39.5781px
    padding: "0px 14.8461px 0px 14.8461px"
    rounded: "{rounded.sm}"
  button-icon:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    height: 39.5781px
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, {colors.hairline} 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px"
    rounded: "3.35544e+07px"
    backgroundColor: "{colors.canvas}"
  button-icon-sm:
    typography: "{typography.heading-md}"
    textColor: "{colors.muted}"
    height: 19.7812px
  card-featured:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xs}"
    backgroundColor: "{colors.surface}"
  card-featured-2:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    backgroundColor: "{colors.surface}"
  card:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
  card-sm:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px"
    rounded: "8px 0px 0px"
    backgroundColor: "{colors.canvas}"
  navigation:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    height: 79.1719px
    padding: "0px 38.7794px 0px 38.7794px"
  footer:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    backgroundColor: "{colors.primary}"
  link:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xs}"
  link-sm:
    typography: "{typography.body-md}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
states:
  link-focus-visible:
    target: link
    state: focus-visible
    rounded: 0.125em
  other-hover:
    target: other
    state: hover
    backgroundColor: "rgba(0, 0, 0, 0)"
  other-focus:
    target: other
    state: focus
    outlineWidth: 1px
  other-focus-visible:
    target: other
    state: focus-visible
    outlineWidth: 1px
  button-active:
    target: button
    state: active
    transform: "scale(0.97)"
  link-active:
    target: link
    state: active
    transform: "scale(0.97)"
  card-hover:
    target: card
    state: hover
    transform: "scale(1.04)"
  card-active:
    target: card
    state: active
    transform: "scale(0.99)"
  link-hover:
    target: link
    state: hover
    transform: "translate(2px)"
breakpoints:
  - width: 375
    containerWidth: 341
    gridColumns: 3
    navLinksVisible: 28
    menuToggleVisible: true
    headingPx: 41
    bodyPx: 16
    sectionPaddingX: 0
  - width: 768
    containerWidth: 718
    gridColumns: 4
    navLinksVisible: 28
    menuToggleVisible: true
    headingPx: 48
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 1024
    gridColumns: 4
    navLinksVisible: 28
    menuToggleVisible: true
    headingPx: 52
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1280
    gridColumns: 4
    navLinksVisible: 33
    menuToggleVisible: true
    headingPx: 57
    bodyPx: 16
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1440
    gridColumns: 4
    navLinksVisible: 33
    menuToggleVisible: true
    headingPx: 60
    bodyPx: 16
    sectionPaddingX: 0
coverage:
  statesFound: 40
  gradientsFound: 0
  rolesUnassigned: 1
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by Taito.ai

1. Visual Theme & Atmosphere

Taito.ai's design system embodies a refined, minimalist aesthetic grounded in a carefully curated neutral palette accented by deep ink blacks. The visual personality is professional yet approachable, prioritizing clarity and operational efficiency. The system employs generous whitespace, subtle micro-interactions, and a hierarchy built on typographic weight rather than color saturation. This creates an atmosphere of control and sophistication—perfect for a platform managing complex people operations. The brand feels contemporary and trustworthy, avoiding visual clutter in favor of purposeful, intentional design.

Key Characteristics

Neutral-forward palette with deep ink ({colors.primary} — #0F0E0D) as the dominant accent
Generous whitespace and breathing room between elements
Typography-driven hierarchy with minimal color variation
Micro-interactions based on scale, opacity, and subtle motion
Flat, sharp surfaces with minimal shadow depth
Professional, operational tone with subtle warmth through body copy color
Clean borders using fine hairline strokes ({colors.hairline} — #E5E5E3)

2. Color Palette & Roles

Primary

Primary / Brand Ink ({colors.primary} — #0F0E0D): Primary CTA fills, brand mark, active states, primary headings, and hero accents. The dominant voice of the system.

Accent Colors

Decorative Dark Accent ({colors.accent-1} — #280404): Reserved for decorative or auxiliary visual elements; no primary role in interactive or informational hierarchy.

Neutral Scale

Canvas ({colors.canvas} — #FAFAF9): Default page background and label text on dark/brand surfaces. The primary container for light-mode layouts.
Surface ({colors.surface} — #1F1D1A): Card, panel, and container backgrounds. Secondary surface for depth and visual separation.
Body ({colors.body} — #524F49): Primary body copy text. Warm-toned neutral for long-form reading.
Muted ({colors.muted} — #6E6A65): Secondary text, captions, and metadata. Used for de-emphasized information.
Faint ({colors.faint} — #8F8B85): Tertiary text and placeholder content. Maximum visual recession while remaining legible.

Surface & Borders

Hairline ({colors.hairline} — #E5E5E3): 1px borders, dividers, and subtle boundary lines. The finest visual separator in the system.

3. Typography Rules

Font Family

Primary: Suisse Intl (system stack: Suisse Intl, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif)

All type in the system uses a single typeface family to reinforce clarity and coherence.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display Large	Suisse Intl	59.956px	400	1.2	−1.5px	Hero/page heading; measured at `h1`; tight leading for impact
Display Large Tight	Suisse Intl	59.956px	400	1.0	−1.5px	Ultra-condensed hero; use sparingly
Heading Extra Large	Suisse Intl	38.4811px	400	1.2	−0.58px	Section heading; measured at `h2`; strong presence
Heading Large	Suisse Intl	24.7048px	400	1.2	0px	Subsection heading; measured at `h3`
Heading Medium	Suisse Intl	19.7968px	400	1.25	0px	Card title; secondary heading
Heading Medium Strong	Suisse Intl	19.7968px	500	1.2	0px	Emphasized heading; increased weight for prominence
Heading Small	Suisse Intl	15.864px	500	1.2	0px	Minor heading / form label
Heading Extra Small	Suisse Intl	12.7134px	500	1.5	0px	Smallest heading; often paired with icons
Body Large	Suisse Intl	19.7968px	400	1.5	0px	Large body copy; intro paragraphs
Body Medium	Suisse Intl	16px	400	1.5	0px	Default list item size
Body Small	Suisse Intl	15.864px	400	1.5	0px	Standard body copy; measured at `body`
Body Small Tight	Suisse Intl	15.864px	400	1.2	0px	Compact body; links and tight layouts
Body Extra Small	Suisse Intl	12.7134px	400	1.5	0px	Captions and metadata
Button	Suisse Intl	15.864px	500	1.5	0px	CTA and button text; elevated weight for clarity
Quote	Suisse Intl	30.8323px	400	1.25	0px	Pulled quote or testimonial

Principles

Negative letter-spacing on large displays creates visual tension and reinforces hierarchy; never round to 0.
Weight shifts rather than size changes emphasize secondary information; use weight 500 for interactive and labeled elements.
Line-height scales with size: tighter leading (1.0–1.2) on large display, relaxed (1.5) on body copy for legibility.
Preserve exact line-height ratios to maintain consistent vertical rhythm across all breakpoints.

4. Component Stylings

Buttons

Primary Button

Font: {typography.body-lg} (19.7968px), weight 500
Background: {colors.primary} (#0F0E0D)
Text Color: {colors.canvas} (#FAFAF9)
Padding: 0px 19.7968px
Height: 49.4844px
Border Radius: {rounded.md} (8px)
Border: none
Box Shadow: none
Hover State: Background darkens (inferred from interaction data: background-color: var(--color-ink-hover))

Primary Button Small

Font: {typography.body-sm} (15.864px), weight 500
Background: {colors.primary} (#0F0E0D)
Text Color: {colors.canvas} (#FAFAF9)
Padding: 0px 14.8461px
Height: 39.5781px
Border Radius: {rounded.sm} (6px)
Border: none
Box Shadow: none
Active State: Scale transforms to 0.97 then back to none

Outline Button

Font: {typography.body-sm} (15.864px), weight 500
Background: transparent (rgba(0, 0, 0, 0))
Text Color: {colors.primary} (#0F0E0D)
Padding: 0px 14.8461px
Height: 39.5781px
Border: 1px solid {colors.hairline} (1px solid #E5E5E3)
Border Radius: {rounded.sm} (6px)
Box Shadow: none
Hover State: Background shifts to surface color; text darkens

Ghost / Text Button

Font: {typography.body-sm} (15.864px), weight 500
Background: transparent (rgba(0, 0, 0, 0))
Text Color: {colors.primary} (#0F0E0D)
Padding: 0px 14.8461px
Height: 39.5781px
Border: none
Border Radius: {rounded.sm} (6px)
Box Shadow: none
Hover State: Text color shifts to var(--color-ink-hover), background becomes var(--color-surface-secondary)

Icon Button

Background: {colors.canvas} (#FAFAF9)
Text Color: {colors.primary} (#0F0E0D)
Width: 39.5781px
Height: 39.5781px
Padding: 0px
Border Radius: {rounded.full} (pill-shaped, rendered as 3.35544e+07px)
Border: 1px solid {colors.hairline} (box-shadow equivalent: rgb(229, 229, 227) 0px 0px 0px 1px)
Box Shadow: rgb(229, 229, 227) 0px 0px 0px 1px
Font Size: 16px, weight 400

Icon Button Small

Background: transparent (rgba(0, 0, 0, 0))
Text Color: {colors.muted} (#6E6A65)
Width: 19.7812px
Height: 19.7812px
Font Size: 19.7968px, weight 400
Border Radius: {rounded.none} (0px)
Padding: 0px
Border: none
Box Shadow: none

Cards & Containers

Featured Card

Background: {colors.surface} (#1F1D1A)
Text Color: {colors.primary} (#0F0E0D)
Border: none
Border Radius: {rounded.xs} (4px)
Box Shadow: none
Width: 428.312px
Height: 642.469px
Hover State: Transform scales to 1.04, then reverts to none; alternatively scale(1.1) with color swap to {colors.canvas} on background {colors.primary}

Featured Card Variant 2

Background: {colors.surface} (#1F1D1A)
Text Color: {colors.primary} (#0F0E0D)
Border: none
Border Radius: {rounded.none} (0px)
Box Shadow: none
Width: 428.312px
Height: 642.469px

Default Card

Background: transparent (rgba(0, 0, 0, 0))
Text Color: {colors.primary} (#0F0E0D)
Border: none
Border Radius: {rounded.none} (0px)
Box Shadow: none
Width: 428.312px
Height: 506.281px

Default Card Small

Background: {colors.canvas} (#FAFAF9)
Text Color: {colors.primary} (#0F0E0D)
Border: none
Border Radius: {rounded.md} {rounded.none} {rounded.none} (8px 0px 0px)
Box Shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px ({shadows.sm})
Width: 393.75px
Height: 286.672px
Hover State: Background shifts to var(--color-surface-tertiary); scale to 1.04

Inputs & Forms

No explicit form component data was extracted. See Known Gaps.

Navigation

Default Navigation Header

Background: transparent (rgba(0, 0, 0, 0))
Text Color: {colors.primary} (#0F0E0D)
Height: 79.1719px
Padding: 0px 38.7794px
Border: none
Border Radius: {rounded.none} (0px)
Box Shadow: none
Font: {typography.body-md} (16px), weight 400

5. Layout Principles

Spacing System

Base Unit: {spacing.xs} = 8px
Scale: xxs 4px, xs 8px, sm 16px, md 20px, lg 24px, xl 28px, xxl 40px, xxxl 60px, section 68px, band 80px
Usage Context:
- {spacing.xs} (8px): Tight component padding, icon spacing
- {spacing.sm} (16px): Standard component padding, list margins
- {spacing.md} (20px): Card internal spacing, button padding
- {spacing.lg} (24px): Section margins, block spacing
- {spacing.xl} (28px): Content column gaps
- {spacing.xxl} (40px): Feature block spacing
- {spacing.section} (68px): Section padding vertical
- {spacing.band} (80px): Full-width band padding; largest vertical spacing

Grid & Container

Max Width: 1440px at largest breakpoint
Column Strategy: 4-column grid at desktop and tablet; scales responsively at mobile
Section Patterns: Full-width bands with consistent horizontal padding; content columns centered; asymmetric left-text/right-image layouts on hero

Whitespace Philosophy

Whitespace is treated as a first-class design element. The system uses generous margins and breathing room between sections to establish hierarchy and reduce cognitive load. Padding inside cards and containers is minimal, allowing content to breathe. Vertical spacing between sections exceeds horizontal padding, creating a strong left-to-right flow.

Border Radius Scale

None: {rounded.none} (0px) — cards, overlays, featured sections
Extra Small: {rounded.xs} (4px) — subtle rounding on card variants
Small: {rounded.sm} (6px) — buttons, input fields, minor elements
Medium: {rounded.md} (8px) — select card variants, badges, modals
Full: {rounded.full} (9999px) — icon buttons, pills, circular elements

Border Widths

Thin: 1px — all dividers, outlines, and hairline borders (using {colors.hairline} — #E5E5E3)

6. Depth & Elevation

Level	Treatment	Use
Flat	No shadow	Default cards, sections, backgrounds
Raised (Small)	`rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`	Small cards, subtle lift
Raised (Medium)	`rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px`	Modals, floating panels, strong lift
Bordered (Large)	`oklab(0.164546 0.00102162 0.00246866 / 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`	Bordered surfaces with subtle depth

Shadow Philosophy: The system employs a layered-micro elevation strategy—multiple nearly transparent layers stacked to create barely-there depth. This approach maintains the flat, modern aesthetic while providing subtle visual separation. Shadows are always cool-toned and desaturated, never warm or dramatic. Most surfaces remain flat with no shadow; only small cards and floating elements receive the smallest lifts.

Opacity Levels

50% (0.5): Overlay and secondary hover states
40% (0.4): Disabled elements, tertiary states

Z-index / Layering

Base: 1, 2
Dropdown: 10, 20, 40, 50, 60

The layering strategy reserves higher z-indices for dropdown menus and floating UI, with a clear separation between base and interactive layers.

7. Do's and Don'ts

Do

Use the primary ink ({colors.primary} — #0F0E0D) for all CTAs and critical interactive elements
Employ generous whitespace to reduce cognitive load; allow components to breathe
Maintain typographic hierarchy through weight and size changes, not color alone
Use the full neutral scale ({colors.canvas} through {colors.faint}) for text color, never pure black or white on body copy
Round buttons and interactive elements at {rounded.sm} (6px) minimum
Apply negative letter-spacing (−1.5px, −0.58px) only to display-size type (59px+, 38px+)
Layer shadows with multiple transparent layers for depth; avoid single, hard shadows
Use {colors.hairline} (#E5E5E3) for all 1px borders and dividers
Test all interactive elements at the minimum touch target of 39.5781px height (small button)
Respect the spacing scale; never invent custom margins between defined steps

Don't

Override button border-radius; maintain {rounded.sm} (6px) for small variants and {rounded.md} (8px) for primary
Mix colors from the accent or decorative set for primary text; the neutral scale is sufficient
Invent new font sizes; stay within the 15 defined typographic roles
Use rounded corners on cards unless specifically variant-marked (featured cards use {rounded.xs} — 4px; default cards use {rounded.none})
Apply shadows to every surface; reserve them for small cards and floating elements only
Use opacity below 40% for any actionable element; maintain contrast and legibility
Set line-height below 1.2 for body copy; readability suffers below this threshold
Transform the primary color into gradients or tints; the brand uses solid, flat color only
Add more than one layer of accent color to a single component; visual noise increases
Forget to include interaction states (hover, active, focus-visible) on all interactive elements

8. Responsive Behavior

Breakpoints

Viewport	Content Width	Grid Columns	Nav Links Visible	Menu Toggle	Primary Heading	Body Font
375px	341px	3	28	yes	41px	16px
768px	718px	4	28	yes	48px	16px
1024px	1024px	4	28	yes	52px	16px
1280px	1280px	4	33	yes	57px	16px
1440px	1440px	4	33	yes	60px	16px

Key Changes:

375px → 768px: Content width grows from 341px to 718px; grid shifts from 3 to 4 columns; heading scales from 41px to 48px
768px → 1024px: Content reaches full 1024px; grid stable at 4 columns; heading grows to 52px
1024px → 1280px/1440px: Max container expands; heading reaches final 60px size; nav link count increases from 28 to 33
Navigation: Menu toggle remains visible at all breakpoints; collapse occurs when visible nav links drop (none observed at 375px suggests off-canvas or overflow handling)

Touch Targets

Minimum Height: 39.5781px (small button)
Minimum Width: 39.5781px (icon button)
Recommended Padding: {spacing.xs} (8px) around interactive elements for comfortable targeting on mobile

Collapsing Strategy

Mobile (375px–767px): Single or 3-column layouts; content column width constrained to 341px; menu collapses to toggle; large type scales down to 41px
Tablet (768px–1023px): 4-column grid; content expands to 718px; primary nav may remain visible; heading size increases to 48px
Desktop (1024px+): Full 4-column grid with 1024px+ container; heading reaches 60px; navigation fully expanded with 33 visible links
Horizontal Padding: Section padding-x measured at 0px across all breakpoints (content reaches edge); use viewport width constraints instead of padding for margins

9. Agent Prompt Guide

Quick Color Reference

Primary CTA / Brand Accent: Primary Ink ({colors.primary} — #0F0E0D)
Default Background: Canvas ({colors.canvas} — #FAFAF9)
Card / Secondary Surface: Surface ({colors.surface} — #1F1D1A)
Primary Text / Heading: Primary Ink ({colors.primary} — #0F0E0D)
Body Copy: Body ({colors.body} — #524F49)
Secondary Text: Muted ({colors.muted} — #6E6A65)
Tertiary Text / Placeholder: Faint ({colors.faint} — #8F8B85)
Borders / Dividers: Hairline ({colors.hairline} — #E5E5E3)
Decorative Accent: Decorative Dark ({colors.accent-1} — #280404) — use sparingly

Iteration Guide

All interactive elements (buttons, links, nav items) must respond to hover, active, and focus-visible states. Never ship a component without these three states implemented.
Button variants are four: primary (#0F0E0D background, white text), small (6px radius), outline (hairline border, transparent), and ghost (transparent bg, primary text). Icon buttons are pill-shaped and canvas-colored.
Typography hierarchy depends on exact size and weight; never approximate. Use the 15 defined roles; scale heading display down to 41px at 375px viewport, up to 60px at 1440px.
Spacing always follows the base scale: xxs 4px, xs 8px, sm 16px, md 20px, lg 24px, xl 28px, xxl 40px, xxxl 60px, section 68px, band 80px. No custom values.
Negative letter-spacing is a feature of large displays (59.956px, 38.4811px). Preserve exact values: −1.5px on 59.956px, −0.58px on 38.4811px. Never round to 0.
Cards and containers use sharp corners (0px or 4px) by default; only icon buttons and select variants use pill-shaped (9999px) radius.
Shadows are minimal and layered. Most surfaces are flat. Only small cards ({shadows.sm}) and floating panels ({shadows.md}, {shadows.lg}) receive lift.
All borders are 1px and use {colors.hairline} (#E5E5E3). No thicker strokes in the extracted data.
Content max-width at desktop is 1440px. Responsive breakpoints are 375px, 768px, 1024px, 1280px, 1440px; responsive heading sizes are 41px, 48px, 52px, 57px, 60px respectively.
Opacity for disabled/secondary states is 40–50%. Use 0.5 for overlays, 0.4 for disabled UI.

10. Known Gaps

No semantic color ramp. The extracted site does not declare error, success, warning, or info states. Do not invent a semantic status palette.
Form inputs not explicitly extracted. Input styling, placeholder colors, focus rings, and validation states are not present in the component data. Infer from link and button interaction patterns if needed.
No dark mode / theme switching detected. The extraction captured one theme only. Light/dark mode behavior is not documented.
Interaction states partially inferred. Hover, active, and focus-visible state colors are referenced as CSS variables in the data (e.g., var(--color-ink-hover)) rather than literal hex values; exact color outcomes may depend on runtime variable resolution.
No gradient or mesh patterns found. All color is flat and solid; no background gradients or decorative textures were observed.
Decorative color ({colors.accent-1} — #280404) has no measured role. It appears in the extracted palette but no interactive or informational use was detected; treat as optional or reserved for future use.
Behind-authentication surfaces not visited. The design system may include patterns for logged-in, admin, or premium user interfaces that are not reflected here.
Animation and transition timings not extracted. Hover/active micro-interactions exist (scale, translate, rotate) but no duration or easing data was captured.
Icon library not documented. Icons appear in the UI (e.g., sidebar menu, button icons) but no sizing, stroke-width, or naming convention was extracted.
Responsive images and media queries for images not specified. Image rendering on mobile vs. desktop is not detailed.
1 extracted color had no measurable role. {colors.accent-1} (#280404) is present in the palette but unused in primary interactive contexts.

Want a DESIGN.md like this for your own website?

Design tokens

Extracted from taito.ai

Primary

#0F0E0D

Primary CTA, brand accent, active state; Headings / primary text

#280404

Accent / decorative

Neutral

#FAFAF9

Default page background; label colour on brand surfaces

#1F1D1A

Card / panel background

#524F49

Body copy

#6E6A65

Captions, secondary text

#8F8B85

Tertiary / placeholder text

#E5E5E3

1px borders and dividers

Typography · Suisse Intl-99e21c928808656c

h159.956px · 400 · 71.9472px

h238.4811px · 400 · 46.1773px

h324.7048px · 400 · 29.6458px

body15.864px · 400 · 23.796px

link15.864px · 400 · 19.0368px

button15.864px · 500 · 23.796px

list-item16px · 400 · 24px

quote30.8323px · 400 · 38.5404px

body19.7968px · 400 · 29.6952px

body12.7134px · 400 · 19.0702px

heading19.7968px · 400 · 24.746px

body24.7048px · 400 · 37.0572px

heading12.7134px · 500 · 19.0702px

body19.7968px · 500 · 29.6952px

display59.956px · 400 · 59.956px

heading15.864px · 500 · 19.0368px

heading19.7968px · 500 · 23.7562px

body12.7134px · 400 · 12.7134px

body12.7134px · 500 · 12.7134px

Spacing

4px

8px

16px

20px

24px

28px

40px

60px

Elevation

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.164546 0.00102162 0.00246866 / 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px

Components · 5

Remixes of taito.ai

Latest remixes

No public remixes yet. Be the first to make one.

Remix it