claude-ui-design-system

## UI/UX Design System for [COMPANY] in the [INDUSTRY] Sector

### Color Palette
- Primary: #2A5C8A
- Secondary: #4A8FAA
- Accent: #FFA07A
- Background: #F5F5F5
- Text: #333333

### Typography
- **Headings**: Montserrat (Bold, Semi-Bold)
- **Body**: Open Sans (Regular, Medium)
- **Font Sizes**:
  - Headings: 24px, 20px, 18px
  - Body: 16px, 14px

### Spacing
- **Padding**: 16px (Standard), 24px (Large)
- **Margins**: 16px (Standard), 24px (Large)
- **Gutters**: 16px (Standard), 24px (Large)

### Components
#### Buttons
```jsx
const Button = ({ title, onPress }) => (
  <TouchableOpacity onPress={onPress} style={styles.button}>
    <Text style={styles.buttonText}>{title}</Text>
  </TouchableOpacity>
);

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#2A5C8A',
    padding: 16,
    borderRadius: 8,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontFamily: 'Montserrat-SemiBold',
    fontSize: 16,
  },
});
```

#### Cards
```jsx
const Card = ({ title, content }) => (
  <View style={styles.card}>
    <Text style={styles.cardTitle}>{title}</Text>
    <Text style={styles.cardContent}>{content}</Text>
  </View>
);

const styles = StyleSheet.create({
  card: {
    backgroundColor: 'white',
    borderRadius: 8,
    padding: 16,
    marginBottom: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2,
  },
  cardTitle: {
    fontFamily: 'Montserrat-Bold',
    fontSize: 20,
    marginBottom: 8,
  },
  cardContent: {
    fontFamily: 'OpenSans-Regular',
    fontSize: 16,
  },
});
```