Use step cards for how-to guides and sequential instructions.
Navigate to the settings panel and configure the required options for your integration.
Link your account by authenticating with your credentials and granting necessary permissions.
Use for differentiated sections or alternative workflows.
Good for warning-related or attention-grabbing steps.
Use for informational or technical content.
Use callouts to highlight important information.
Use cards for feature lists, navigation items, or grouped content.
Comprehensive guides and references for all system components.
Step-by-step instructions for configuring integrations.
Reference for all available settings and options.
Use inline code for short snippets within text.
const config = {
apiKey: process.env.API_KEY,
baseUrl: 'https://api.2marketing.com',
timeout: 5000
};
:root {
/* Core */
--bg: #F2F2F0;
--white: #FFFFFF;
/* Primary Green Scale */
--green-deep: #166544;
--green-dark: #1B7D52;
--green: #2AAA6E;
--green-light: #3DBC7E;
--green-glow: #4FD492;
--green-pale: #E8F5EE;
/* Accent Colors */
--teal: #5BBFAD;
--teal-dark: #4BA89A;
--orange: #E67E22;
--orange-light: #F59E0B;
--coral: #EF7654;
--blue: #3B82F6;
--purple: #8B5CF6;
/* Text Colors */
--text-dark: #101010;
--text-mid: #2A2A2A;
--text-muted: #5A5A5A;
--text-light: #9A9A9A;
/* Shadows */
--card-shadow: 0 8px 40px rgba(0,0,0,0.06),
0 1px 3px rgba(0,0,0,0.04);
}