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

> ## Agent Instructions
> This site documents Sundial 2.0, the design system of the Ash mobile app (Flutter). For implementing UI: use the Design System pages — color/typography tokens (foundations/*), Flutter theming (theming/*), and component APIs (components/*) — as your reference; every value there mirrors the Dart source in lib/design_system/. The Philosophy pages (philosophy/*) are design rationale written for humans: consult them when making design decisions, not for API lookups. Golden rules: never hardcode colors or text styles — read tokens via context.colorTheme and context.textTheme; prefer the 2.0 semantic names (contentPrimary, surfaceComponent, accentSolid…) over legacy contrast*/surface* getters and over SundialRef primitives; the accent is a single pale lavender solid that takes dark content — never use accent fills as text, icons, or borders (use contentAccent / borderSelected); brand surfaces are mode-invariant and pair with the contentOnBrand* inks; check lib/design_system/components/ before building custom widgets.

# StyledCard

> Card surface with elevated, outlined, and filled variants

A card that mimics Material's `Card` with Sundial colors, borders, and shadows. Source: [`styled_card.dart`](https://github.com/slingshot-ai/ash-mobile-app/blob/main/lib/design_system/components/styled_card.dart).

## Variants

Variants are **named constructors** (the Sundial pattern — a private `_CardVariant` enum, no public `variant` param):

| Constructor | Background | Border | Shadow |
| - | - | - | - |
| `StyledCard(…)` | `surfaceElevated` | none | subtle, from `elevation` (default 1.0) |
| `StyledCard.outlined(…)` | transparent | 1 px `surfaceHigh` | none |
| `StyledCard.filled(…)` | `surfaceElevated` | none | none |

```dart theme={null}
StyledCard(
  child: Text('Elevated by default'),
)

StyledCard.outlined(
  child: Text('Transparent with a hairline border'),
)

StyledCard.filled(
  padding: EdgeInsets.all(12),
  child: Text('Flat filled surface'),
)
```

## API

| Parameter | Type | Default | Notes |
| - | - | - | - |
| `child` | `Widget?` | — | Card content |
| `color` | `Color?` | variant default | Overrides the background |
| `padding` | `EdgeInsets` | `kDefaultCardPadding` = `EdgeInsets.all(20)` | Inner padding |
| `margin` | `EdgeInsets?` | — | Outer margin |
| `border` | `BoxBorder?` | variant default | Overrides the border |
| `borderRadius` | `double` | `kDefaultCardBorderRadius` = `16.0` | Corner radius |
| `constraints` | `BoxConstraints?` | — | Size constraints |
| `elevation` | `double` | `1.0` | **Default constructor only.** Shadow alpha = `elevation.clamp(0,1) × 0.26`, blur = `elevation × 4` |

The card wraps its content in `Material(type: MaterialType.transparency)`, so ink effects from children render correctly.

## Tokens consumed

* `surfaceElevated` — elevated/filled background
* `surfaceHigh` — outlined border

## Real usage

```dart settings_list_tile.dart theme={null}
StyledCard.filled(
  padding: EdgeInsets.zero,
  child: Column(children: tiles),
)
```

Also the surface behind [styled bottom sheets](https://design.slingshotai.com/components/styled-bottom-sheet.md) (radius 24, `surfaceBg`).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.