Initial commit 🚀

.design-sync/previews/Col.tsx

@@ -0,0 +1,37 @@
+import { Surface, Section, Container, Grid, Col, Stack, Heading, Text } from 'ciphercell-homepage';
+
+export const Offset = () => (
+  <Surface>
+    <Section spacing="tight">
+      <Container>
+        <Grid>
+          <Col span={8}>
+            <Heading>Four stages. One method.</Heading>
+          </Col>
+          <Col span={5} start={8}>
+            <Text measure>
+              Threat analysis, engineering, verification and monitoring run alongside your development.
+            </Text>
+          </Col>
+        </Grid>
+      </Container>
+    </Section>
+  </Surface>
+);
+
+export const FullWidth = () => (
+  <Surface>
+    <Section spacing="tight">
+      <Container>
+        <Grid>
+          <Col>
+            <Stack gap={4}>
+              <Heading level={3}>A block across all twelve columns.</Heading>
+              <Text muted>Twelve is the default, so span may be left out.</Text>
+            </Stack>
+          </Col>
+        </Grid>
+      </Container>
+    </Section>
+  </Surface>
+);