> ## 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.

# Welcome

> MindLi's Help Center

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>;
};

<Frame hint="Let's think... together." caption="MindLi iOS, Android and Web apps.">
  <img src="https://mintcdn.com/mindli/MJcp10Z4FxOQ_fds/images/MindLi-platforms-for-docs.png?fit=max&auto=format&n=MJcp10Z4FxOQ_fds&q=85&s=8a0a19d2919004517e1b0ee7fc6e4e6d" alt="MindLi Screen" width="2048" height="1799" data-path="images/MindLi-platforms-for-docs.png" />
</Frame>

## Get started

Empower your thinking: Add Sparks (input), Box them (process), and Create insights (output).

<CardGroup cols={2}>
  <Card title={<><MndIcon icon="MNDIconTarget" color="#FFA500" /> Our Mission</>} href="/get-started/mission">
    The Why, What and How of MindLi
  </Card>

  <Card title={<><MndIcon icon="MNDIconFootprints" color="#FFA500" /> The ABC Thinking Steps</>} href="/get-started/abc-steps">
    Start Simple, Continue Smart with the ABC universal thinking steps
  </Card>

  <Card title={<><MndIcon icon="MNDIconRocket" color="#FFA500" /> QuickStart</>} href="/get-started/quickstart">
    Initial setup (Web, iOS, Android and Chrome/Edge extension)
  </Card>

  <Card title={<><MndIcon icon="MNDIconMindliM" color="#FFA500" /> Using MindLi</>} href="/get-started/using-mindli">
    Shared principles, global buttons, and common controls
  </Card>

  <Card title={<><MndIcon icon="MNDIconBrain" color="#FFA500" /> Thinking Patterns</>} href="/get-started/thinking-patterns">
    Choose practical patterns for clearer thinking and better outcomes
  </Card>
</CardGroup>

## Work With MindLi & More

Get the best of it.

<CardGroup cols={2}>
  <Card title={<><MndIcon icon="MNDIconHome" color="#FFA500" /> Work With the Main Screens</>} href="/workwith/home">
    Home, Box, Inbox, and Spark
  </Card>

  <Card title={<><MndIcon icon="MNDIconEllipsis" color="#FFA500" size={14} circle /> More Screens</>} href="/workwith/trash">
    Stats, Trash, and Settings
  </Card>
</CardGroup>