---
name: "sweetgreen"
mode: "light"
---
# sweetgreen
## Visual theme and atmosphere
Warm, organic, typographically bold, and confidently natural.
Farm-stand-meets-modern-typography — deep forest on cream canvas with lime glow accent.
## Color palette and roles
- **Deep Forest (#00473c)**: Primary brand color, nav logo, dark pill buttons.
- **Lime Glow (#e6ff55)**: Green action color for filled buttons.
- **Sage Mist (#d8e5d6)**: Section backgrounds, card surfaces.
- **Cream Canvas (#f4f3e7)**: Primary page background.
- **Forest Shadow (#0e150e)**: Primary text color, borders.
## Typography rules
- **Display**: SweetSans, 400, 80px. Display headlines, hero text.
- **Accent**: Grenette, 200, 48px. Secondary display accent.
- **Body**: SweetSansText, 400, 16px. Body text, navigation, buttons.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 60px.
- Card corners: 24px.
- Control corners: 20px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 140ms; composed transitions last 320ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Render all buttons as fully rounded pills (9999px radius).
- Default to #f4f3e7 as the page background.
- Do not use multiple accent colors.
- Do not set headlines in weight 700 or above.
---
name: "sweetgreen"
mode: "light"
---
# sweetgreen
## Visual theme and atmosphere
Warm, organic, typographically bold, and confidently natural.
Farm-stand-meets-modern-typography — deep forest on cream canvas with lime glow accent.
## Color palette and roles
- **Deep Forest (#00473c)**: Primary brand color, nav logo, dark pill buttons.
- **Lime Glow (#e6ff55)**: Green action color for filled buttons.
- **Sage Mist (#d8e5d6)**: Section backgrounds, card surfaces.
- **Cream Canvas (#f4f3e7)**: Primary page background.
- **Forest Shadow (#0e150e)**: Primary text color, borders.
## Typography rules
- **Display**: SweetSans, 400, 80px. Display headlines, hero text.
- **Accent**: Grenette, 200, 48px. Secondary display accent.
- **Body**: SweetSansText, 400, 16px. Body text, navigation, buttons.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 60px.
- Card corners: 24px.
- Control corners: 20px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 140ms; composed transitions last 320ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Render all buttons as fully rounded pills (9999px radius).
- Default to #f4f3e7 as the page background.
- Do not use multiple accent colors.
- Do not set headlines in weight 700 or above.
---
name: "sweetgreen"
mode: "light"
---
# sweetgreen
## Visual theme and atmosphere
Warm, organic, typographically bold, and confidently natural.
Farm-stand-meets-modern-typography — deep forest on cream canvas with lime glow accent.
## Color palette and roles
- **Deep Forest (#00473c)**: Primary brand color, nav logo, dark pill buttons.
- **Lime Glow (#e6ff55)**: Green action color for filled buttons.
- **Sage Mist (#d8e5d6)**: Section backgrounds, card surfaces.
- **Cream Canvas (#f4f3e7)**: Primary page background.
- **Forest Shadow (#0e150e)**: Primary text color, borders.
## Typography rules
- **Display**: SweetSans, 400, 80px. Display headlines, hero text.
- **Accent**: Grenette, 200, 48px. Secondary display accent.
- **Body**: SweetSansText, 400, 16px. Body text, navigation, buttons.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 60px.
- Card corners: 24px.
- Control corners: 20px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 140ms; composed transitions last 320ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Render all buttons as fully rounded pills (9999px radius).
- Default to #f4f3e7 as the page background.
- Do not use multiple accent colors.
- Do not set headlines in weight 700 or above.
---
name: "sweetgreen"
mode: "light"
---
# sweetgreen
## Visual theme and atmosphere
Warm, organic, typographically bold, and confidently natural.
Farm-stand-meets-modern-typography — deep forest on cream canvas with lime glow accent.
## Color palette and roles
- **Deep Forest (#00473c)**: Primary brand color, nav logo, dark pill buttons.
- **Lime Glow (#e6ff55)**: Green action color for filled buttons.
- **Sage Mist (#d8e5d6)**: Section backgrounds, card surfaces.
- **Cream Canvas (#f4f3e7)**: Primary page background.
- **Forest Shadow (#0e150e)**: Primary text color, borders.
## Typography rules
- **Display**: SweetSans, 400, 80px. Display headlines, hero text.
- **Accent**: Grenette, 200, 48px. Secondary display accent.
- **Body**: SweetSansText, 400, 16px. Body text, navigation, buttons.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 60px.
- Card corners: 24px.
- Control corners: 20px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 140ms; composed transitions last 320ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Render all buttons as fully rounded pills (9999px radius).
- Default to #f4f3e7 as the page background.
- Do not use multiple accent colors.
- Do not set headlines in weight 700 or above.
---
name: "sweetgreen"
mode: "light"
---
# sweetgreen
## Visual theme and atmosphere
Warm, organic, typographically bold, and confidently natural.
Farm-stand-meets-modern-typography — deep forest on cream canvas with lime glow accent.
## Color palette and roles
- **Deep Forest (#00473c)**: Primary brand color, nav logo, dark pill buttons.
- **Lime Glow (#e6ff55)**: Green action color for filled buttons.
- **Sage Mist (#d8e5d6)**: Section backgrounds, card surfaces.
- **Cream Canvas (#f4f3e7)**: Primary page background.
- **Forest Shadow (#0e150e)**: Primary text color, borders.
## Typography rules
- **Display**: SweetSans, 400, 80px. Display headlines, hero text.
- **Accent**: Grenette, 200, 48px. Secondary display accent.
- **Body**: SweetSansText, 400, 16px. Body text, navigation, buttons.
## Spacing and shape
- Base unit: 8px.
- Default gap: 16px.
- Card padding: 24px.
- Section padding: 60px.
- Card corners: 24px.
- Control corners: 20px.
- Pills: 9999px.
## Motion
Use restrained motion. Fast feedback lasts 140ms; composed transitions last 320ms; easing is cubic-bezier(0.16, 1, 0.3, 1).
## Guardrails
- Render all buttons as fully rounded pills (9999px radius).
- Default to #f4f3e7 as the page background.
- Do not use multiple accent colors.
- Do not set headlines in weight 700 or above.
