# Shapes

일관된 디자인을 위한 그리드 시스템과 반응형 레이아웃에 대해 설명합니다.

Border Radius

Border Radius는 4px 단위로 사용합니다.

xsmall  
border-radius: 4px;

small  
border-radius: 8px;

medium  
border-radius: 12px;

large  
border-radius: 16px;

xlarge  
border-radius: 20px;

full  
border-radius: 100px;

Shadow

low  
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

medium  
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);

high  
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);

```tsx
import styled from '@emotion/styled';
import { shapes } from '@croquiscom/pds';
export const Element = () => {
  return (
    <Wrapper>
      <BaseText>Shape - border radius / shadow</BaseText>
    </Wrapper>
  );
};
const Wrapper = styled.div`
  ${shapes.border_radius.large}
  ${shapes.shadow.medium}
`;
```