message: Add Type frame to designs-system example
diff: @@ -48,13 +48,50 @@ const SpaceFrame = () => {
  );
  };
  +const TypeFrame = props => {
  + const textStyles = {
  + marginTop: 10
  + };
  + const textHintProps = {
  + fontSize: 6,
  + style: {
  + marginTop: 2,
  + color: '#a0a0a0'
  + }
  + };
  + return (
  + <Frame name="Type" style={{ ...frameProps.style, ...props.style }}>
  + <Text characters={'Type'} fontSize={14} />
  +
  + <Text characters={'Header 1'} fontSize={64} {...textStyles} />
  + <Text characters="64px" {...textHintProps} />
  +
  + <Text characters={'Header 2'} fontSize={44} {...textStyles} />
  + <Text characters="44px" {...textHintProps} />
  +
  + <Text characters={'Heading 3'} fontSize={24} {...textStyles} />
  + <Text characters="24px" {...textHintProps} />
  +
  + <Text characters={'HEADER 4'} fontSize={16} {...textStyles} />
  + <Text characters="16px" {...textHintProps} />
  +
  + <Text characters={'Regular text'} fontSize={16} {...textStyles} />
  + <Text characters="16px" {...textHintProps} />
  +
  + <Text characters={'Small text'} fontSize={14} {...textStyles} />
  + <Text characters="14px" {...textHintProps} />
  +
  + <Text characters={'X-Small text'} fontSize={11} {...textStyles} />
  + <Text characters="11px" {...textHintProps} />
  + </Frame>
  + );
  +};
  +
  export const App = () => {
  return (
  <Page name="Design system" style={{ flexDirection: 'row' }}>
  <SpaceFrame />
  - <Frame name="Fonts" style={{ marginLeft: 50 }}>
  - <Rectangle style={{ width: 200, height: 100, backgroundColor: '#a6dd00' }} />
  - </Frame>
  + <TypeFrame style={{ marginLeft: 50 }} />
  </Page>
  );
  };
  