> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mindli.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Thinking Patterns

> Advanced patterns for getting more out of MindLi

export const MndIcon = ({icon, size = 20, color, circle = false}) => {
  const iconUrl = `https://app.mindli.com/api/icon/${icon}`;
  const [isDarkMode, setIsDarkMode] = React.useState(false);
  React.useEffect(() => {
    const checkTheme = () => {
      const darkClass = document.documentElement.classList.contains('dark');
      const darkAttr = document.documentElement.getAttribute('data-theme') === 'dark';
      setIsDarkMode(darkClass || darkAttr);
    };
    checkTheme();
    const observer = new MutationObserver(checkTheme);
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class', 'data-theme']
    });
    return () => observer.disconnect();
  }, []);
  let finalColor = color;
  if (!color) {
    finalColor = isDarkMode ? '#FFFFFF' : '#333333';
  }
  const iconElement = <span style={{
    width: `${size}px`,
    height: `${size}px`,
    backgroundColor: finalColor,
    maskImage: `url(${iconUrl})`,
    maskSize: 'contain',
    maskRepeat: 'no-repeat',
    WebkitMaskImage: `url(${iconUrl})`,
    WebkitMaskSize: 'contain',
    display: 'inline-block',
    verticalAlign: 'middle'
  }} />;
  if (!circle) {
    return <span style={{
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      verticalAlign: 'middle',
      transform: 'translateY(-0.08em)'
    }}>
        {iconElement}
      </span>;
  }
  const circleSize = Math.max(size + 6, 20);
  return <span style={{
    display: 'inline-flex',
    width: `${circleSize}px`,
    height: `${circleSize}px`,
    border: `2px solid ${finalColor}`,
    borderRadius: '9999px',
    alignItems: 'center',
    justifyContent: 'center',
    verticalAlign: 'middle',
    transform: 'translateY(-0.08em)'
  }}>
      {iconElement}
    </span>;
};

## Start Simple

Go beyond the basics. These articles cover advanced features and habits that make MindLi faster and more powerful for your everyday thinking.

<CardGroup cols={2}>
  <Card title={<><MndIcon icon="MNDWhatsAppIcon" color="#FFA500" /> WhatsApp Sensor</>} href="/get-started/patterns/whatsapp-sensor">
    Get the most out of the fastest way to add Sparks — from any message, image, voice note, or link
  </Card>

  <Card title={<><MndIcon icon="MNDIconLucideCirclePlus" color="#FFA500" /> All Your Sensors</>} href="/get-started/patterns/all-sensors">
    Every way to get content into MindLi — and when to use each one
  </Card>

  <Card title={<><MndIcon icon="MNDIconBoxes" color="#FFA500" /> Building Your Boxes</>} href="/get-started/patterns/building-your-boxes">
    Name, nest, and structure Boxes so your thinking stays organized as it grows
  </Card>

  <Card title={<><MndIcon icon="MNDIconUnfoldVertical" color="#FFA500" /> Split View</>} href="/get-started/patterns/split-view">
    Read your source material and work on your Spark side by side
  </Card>
</CardGroup>

## Continue Smart

<CardGroup cols={2}>
  <Card title={<><MndIcon icon="MNDIconMonitorSmartphone" color="#FFA500" /> Tips for Multi-Device Use</>} href="/get-started/patterns/multi-device-use">
    Use MindLi smoothly across phone, tablet, and computer
  </Card>

  <Card title={<><MndIcon icon="MNDIconUserCog" color="#FFA500" /> Sign-In Tips Across Devices</>} href="/get-started/patterns/sign-in-across-devices">
    Use the right account and sign-out option on every device
  </Card>
</CardGroup>