From 074a82bfb6d5894a8645532274f323976cf07434 Mon Sep 17 00:00:00 2001 From: tony Date: Wed, 3 Sep 2025 11:19:17 +1000 Subject: [PATCH] =?UTF-8?q?refactor(brand-style-guide):=20unify=20Do/Don?= =?UTF-8?q?=E2=80=99t=20blocks=20with=20shared=20components=20and=20apply?= =?UTF-8?q?=20across=20pages=20(Logo,=20Copywriting,=20Typography,=20Diagr?= =?UTF-8?q?ams=20incl.=20Field=20Journal=20foundation,=20Iconography,=20Us?= =?UTF-8?q?age,=20Art=20Direction,=20Colors,=20Motion)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/app/art-direction/page.tsx | 101 ++++---- .../src/app/colors/page.tsx | 39 ++- .../src/app/copywriting/page.tsx | 55 ++--- .../src/app/diagrams/page.tsx | 88 +++---- .../src/app/iconography/page.tsx | 114 ++++----- .../src/app/logo/page.tsx | 77 ++---- .../src/app/motion/page.tsx | 43 ++-- .../src/app/typography/page.tsx | 228 +++++++----------- .../src/app/usage/page.tsx | 45 ++-- .../src/components/DoDont.tsx | 67 +++++ 10 files changed, 384 insertions(+), 473 deletions(-) create mode 100644 brand-assets/brand-style-guide-site/src/components/DoDont.tsx diff --git a/brand-assets/brand-style-guide-site/src/app/art-direction/page.tsx b/brand-assets/brand-style-guide-site/src/app/art-direction/page.tsx index 27af196..8ba2738 100644 --- a/brand-assets/brand-style-guide-site/src/app/art-direction/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/art-direction/page.tsx @@ -1,4 +1,5 @@ import ScrollReveal from '@/components/ScrollReveal'; +import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont"; export default function ArtDirectionPage() { return ( @@ -35,32 +36,20 @@ export default function ArtDirectionPage() { Infrared photography is one of our three core visual identity pillars, adding a layer of revelation that suggests we see beneath the obvious surface — uncovering hidden patterns, structures, and truths invisible to the naked eye. This aligns metaphorically with our mission: exposing the invisible scaffolding of reasoning and collaboration.

-
-
-

Photography Do's

-
    -
  • • High-contrast B&W infrared or false-color IR with natural subjects
    • -
  • • Highlight hidden textures (leaf veins, canopy structures, coral, termite mounds)
    • -
  • • Keep tone observational, almost documentary
    • -
  • • Look for mathematical, symmetrical, or self-organizing structure
    • -
-
- -
-

Photography Don'ts

-
    -
  • • Avoid stocky, staged human imagery ("smiling people in offices")
    • -
  • • Don't use saturated, lifestyle-style photos — they break the scientific tone
    • -
  • • No generic tech clichés (server racks, neon circuit boards)
    • -
-
-
+ + + High-contrast B&W infrared or false-color IR with natural subjects. + Highlight hidden textures (leaf veins, canopy structures, coral, termite mounds). + Keep tone observational, almost documentary. + Look for mathematical, symmetrical, or self-organizing structure. + + + Avoid stocky, staged human imagery ("smiling people in offices"). + Don't use saturated, lifestyle-style photos — they break the scientific tone. + No generic tech clichés (server racks, neon circuit boards). + + -
-

- Cross-reference: See the Visual Identity page for how infrared photography integrates with our complete design philosophy including Bauhaus typography and field journal illustration. -

-
@@ -70,7 +59,17 @@ export default function ArtDirectionPage() { -
+ + {/* DON'T Section */} +

Don’t

A color-toned image of a forest with a person walking on a path, illustrating multiple 'don't' examples. diff --git a/brand-assets/brand-style-guide-site/src/app/colors/page.tsx b/brand-assets/brand-style-guide-site/src/app/colors/page.tsx index 403671c..8706a58 100644 --- a/brand-assets/brand-style-guide-site/src/app/colors/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/colors/page.tsx @@ -1,4 +1,5 @@ import ScrollReveal from '@/components/ScrollReveal'; +import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont"; export default function ColorsPage() { const lightColorSets = [ { @@ -298,28 +299,22 @@ export default function ColorsPage() {

Usage Guidelines

-
-
-

Do

-
    -
  • • Use the complete color system consistently across all applications
    • -
  • • Prioritize dark mode as the default experience
    • -
  • • Maintain WCAG AA contrast ratios for accessibility
    • -
  • • Use semantic color assignments (Ocean for actions, Eucalyptus for success)
    • -
  • • Test colors across different devices and lighting conditions
    • -
-
-
-

Don't

-
    -
  • • Create custom colors outside the approved palette
    • -
  • • Use light mode as the primary experience
    • -
  • • Mix warm and cool tones inappropriately
    • -
  • • Ignore accessibility requirements for contrast
    • -
  • • Use colors purely for decoration without semantic meaning
    • -
-
-
+ + + Use the complete color system consistently across all applications. + Prioritize dark mode as the default experience. + Maintain WCAG AA contrast ratios for accessibility. + Use semantic color assignments (Ocean for actions, Eucalyptus for success). + Test colors across different devices and lighting conditions. + + + Create custom colors outside the approved palette. + Use light mode as the primary experience. + Mix warm and cool tones inappropriately. + Ignore accessibility requirements for contrast. + Use colors purely for decoration without semantic meaning. + +
diff --git a/brand-assets/brand-style-guide-site/src/app/copywriting/page.tsx b/brand-assets/brand-style-guide-site/src/app/copywriting/page.tsx index e26add6..72e82e2 100644 --- a/brand-assets/brand-style-guide-site/src/app/copywriting/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/copywriting/page.tsx @@ -1,3 +1,5 @@ +import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont"; + export default function Copywriting() { return (
@@ -196,42 +198,21 @@ export default function Copywriting() {
- {/* Do's & Don'ts */} -
-
-

- - Do's -

-
    -
  • • Use metaphors (ecology, species, hidden structures) as subtle framing devices
    • -
  • • Highlight strengths before mentioning limitations
    • -
  • • Ask questions to spark dialogue, not just broadcast opinions
    • -
  • • Keep copy clean, plain, and respectful
    • -
-
- -
-

- - Don'ts -

-
    -
  • • Bash other tools or sound adversarial
    • -
  • • Use overblown marketing language ("revolutionary," "game-changing")
    • -
  • • Fall into jargon-heavy, academic prose
    • -
  • • Force metaphors — let them appear naturally
    • -
-
-
+ {/* Do's & Don'ts (shared component) */} + + + Use metaphors (ecology, species, hidden structures) as subtle framing devices. + Highlight strengths before mentioning limitations. + Ask questions to spark dialogue, not just broadcast opinions. + Keep copy clean, plain, and respectful. + + + Bash other tools or sound adversarial. + Use overblown marketing language ("revolutionary," "game-changing"). + Fall into jargon-heavy, academic prose. + Force metaphors — let them appear naturally. + + {/* Quick Checklist */}
@@ -339,4 +320,4 @@ export default function Copywriting() {
); -} \ No newline at end of file +} diff --git a/brand-assets/brand-style-guide-site/src/app/diagrams/page.tsx b/brand-assets/brand-style-guide-site/src/app/diagrams/page.tsx index 1cb349d..954c43c 100644 --- a/brand-assets/brand-style-guide-site/src/app/diagrams/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/diagrams/page.tsx @@ -1,3 +1,5 @@ +import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont"; + export default function Diagrams() { return (
@@ -75,26 +77,19 @@ export default function Diagrams() { Field journal illustration is one of our three core visual identity pillars, introducing a human, observational quality. Like naturalist plates, our diagrams are studies of an ecosystem: annotated, contextual, and exploratory. This conveys curiosity and trustworthiness without the sterility of typical corporate diagrams.

-
-
-

Illustration Do's

-
    -
  • • Employ hand-drawn copperplate-style linework
    • -
  • • Use subtle watercolor washes for grouping/context
    • -
  • • Annotate with small labels, numbering, or marginalia — like a scientific plate
    • -
  • • Maintain restraint: diagrams feel studied, not decorative
    • -
-
- -
-

Illustration Don'ts

-
    -
  • • Avoid cartoonish vector icons or corporate clip-art
    • -
  • • Don't use bright, flat infographic colors
    • -
  • • No glossy gradients, 3D bevels, or skeuomorphic UI
    • -
-
-
+ + + Employ hand-drawn copperplate-style linework. + Use subtle watercolor washes for grouping/context. + Annotate with small labels, numbering, or marginalia — like a scientific plate. + Maintain restraint: diagrams feel studied, not decorative. + + + Avoid cartoonish vector icons or corporate clip-art. + Don't use bright, flat infographic colors. + No glossy gradients, 3D bevels, or skeuomorphic UI. + +

@@ -319,42 +314,21 @@ export default function Diagrams() {

- {/* Do's & Don'ts */} -
-
-

- - Do's -

-
    -
  • • Use watercolor textures to suggest context and environment
    • -
  • • Keep line work clean and precise, avoiding cartoonish exaggeration
    • -
  • • Maintain a sense of restraint — diagrams should feel like study plates, not marketing infographics
    • -
  • • Include annotations and marginalia like field guide plates
    • -
-
- -
-

- - Don'ts -

-
    -
  • • Use flat, bright corporate vector icons
    • -
  • • Overuse color — keep it subdued
    • -
  • • Sacrifice clarity for style. The diagrams must be both beautiful and functional
    • -
  • • Create glossy, marketing-style infographics
    • -
-
-
+ {/* Do's & Don'ts (shared component) */} + + + Use watercolor textures to suggest context and environment. + Keep line work clean and precise; avoid cartoonish exaggeration. + Maintain restraint—diagrams should feel like study plates, not marketing infographics. + Include annotations and marginalia like field guide plates. + + + Use flat, bright corporate vector icons. + Overuse color—keep it subdued. + Sacrifice clarity for style; diagrams must be beautiful and functional. + Create glossy, marketing-style infographics. + + {/* Tone & Message */}
@@ -459,4 +433,4 @@ export default function Diagrams() {
); -} \ No newline at end of file +} diff --git a/brand-assets/brand-style-guide-site/src/app/iconography/page.tsx b/brand-assets/brand-style-guide-site/src/app/iconography/page.tsx index 5958cf1..9fd5af8 100644 --- a/brand-assets/brand-style-guide-site/src/app/iconography/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/iconography/page.tsx @@ -1,5 +1,6 @@ import { div } from "three/tsl" import ScrollReveal from '@/components/ScrollReveal'; +import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont"; export default function IconographyPage() { return ( @@ -303,80 +304,53 @@ export default function IconographyPage() {

Usage Guidelines

-
- {/* DO Section */} -
-

- ✓ - DO -

- -
-
-

Use Theme Variants

-

Always provide both black and white variants for proper contrast in light and dark themes.

-
- Black Settings - White Settings - Black & White variants -
+ + + +

Always provide both black and white variants for proper contrast in light and dark themes.

+
+ Black Settings + White Settings + Black & White variants
- -
-

Standard Sizes

-

Use consistent sizing: 16px, 20px, 24px, or 32px for different interface contexts.

-
- 16px - 20px - 24px - 32px -
+ + +

Use consistent sizing: 16px, 20px, 24px, or 32px for different interface contexts.

+
+ 16px + 20px + 24px + 32px
- -
-

Semantic Meaning

-

Choose icons that clearly represent their function and maintain consistency across similar actions.

+ + +

Choose icons that clearly represent their function and maintain consistency across similar actions.

+ + + + +

Avoid mixing Coolicons with other icon libraries as this breaks visual consistency.

+
+ Coolicon + + +
?
+ Mixed styles
-
-
- - {/* DON'T Section */} -
-

- ✗ - DON'T -

- -
-
-

Mix Icon Styles

-

Avoid mixing Coolicons with other icon libraries as this breaks visual consistency.

-
- Coolicon - + -
?
- Mixed styles -
+ + +

Don't use random sizes that break the visual hierarchy and spacing system.

+
+ Wrong sizing + Wrong sizing + Wrong sizing + Inconsistent sizes
- -
-

Arbitrary Sizing

-

Don't use random sizes that break the visual hierarchy and spacing system.

-
- Wrong sizing - Wrong sizing - Wrong sizing - Inconsistent sizes -
-
- -
-

Modify or Recolor

-

Never alter icon shapes, add effects, or change colors beyond the standard black/white variants.

-
-
-
-
+ + +

Never alter icon shapes, add effects, or change colors beyond the standard black/white variants.

+ + +
diff --git a/brand-assets/brand-style-guide-site/src/app/logo/page.tsx b/brand-assets/brand-style-guide-site/src/app/logo/page.tsx index bbeca67..fe3de8f 100644 --- a/brand-assets/brand-style-guide-site/src/app/logo/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/logo/page.tsx @@ -1,6 +1,7 @@ import ThreeLogo from '@/components/ThreeLogo'; import ScrollReveal from '@/components/ScrollReveal'; +import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont"; export default function LogoPage() { return ( @@ -185,61 +186,35 @@ export default function LogoPage() { - {/* Do's and Don'ts */} + {/* DO and DO NOTs */}

Usage Do's and Don'ts

-
- {/* DO Section */} -
-

- ✓ - DO -

- -
-
-
Maintain Proportions
-

Always scale the logo uniformly to preserve the Möbius ring's geometric integrity.

-
+ + + + Always scale the logo uniformly to preserve the Möbius ring's geometric integrity. + + + Stick to the defined material system for 3D versions and brand colors for 2D applications. + + + Always maintain adequate clear space around the logo for optimal visual impact. + + -
-
Use Approved Colors
-

Stick to the defined material system for 3D versions and brand colors for 2D applications.

-
- -
-
Provide Clear Space
-

Always maintain adequate clear space around the logo for optimal visual impact.

-
-
-
- - {/* DON'T Section */} -
-

- ✗ - DON'T -

- -
-
-
Distort or Stretch
-

Never alter the proportions of the Möbius ring or wordmark independently.

-
- -
-
Add Effects
-

Do not add drop shadows, outlines, or other visual effects to the logo.

-
- -
-
Use on Poor Contrast
-

Avoid placing the logo on backgrounds that compromise legibility.

-
-
-
-
+ + + Never alter the proportions of the Möbius ring or wordmark independently. + + + Do not add drop shadows, outlines, or other visual effects to the logo. + + + Avoid placing the logo on backgrounds that compromise legibility. + + +
{/* Download Section */} diff --git a/brand-assets/brand-style-guide-site/src/app/motion/page.tsx b/brand-assets/brand-style-guide-site/src/app/motion/page.tsx index 1e8e500..89fc314 100644 --- a/brand-assets/brand-style-guide-site/src/app/motion/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/motion/page.tsx @@ -1,4 +1,5 @@ import ScrollReveal from '@/components/ScrollReveal'; +import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont"; export default function Motion() { return ( @@ -159,28 +160,24 @@ export default function Motion() {

Motion Principles

-
-
-

Design Guidelines

-
    -
  • • Purposeful motion that guides user attention
    • -
  • • Consistent 200-300ms timing for interface elements
    • -
  • • Ease-out curves for natural, organic feeling
    • -
  • • Subtle transforms that enhance without distracting
    • -
  • • Performance-optimized with GPU acceleration
    • -
-
-
-

Accessibility Considerations

-
    -
  • • Respects prefers-reduced-motion settings
    • -
  • • No flashing or rapid animations
    • -
  • • Focus indicators remain clearly visible
    • -
  • • Essential information never animation-dependent
    • -
  • • Smooth transitions preserve context and orientation
    • -
-
-
+ + + Use purposeful motion that guides user attention. + Use consistent 200–300ms timing for interface elements. + Use ease-out curves for a natural, organic feel. + Use subtle transforms that enhance without distracting. + Optimize performance with GPU-accelerated properties. + Respect prefers-reduced-motion settings. + Keep focus indicators clearly visible. + Use smooth transitions to preserve context and orientation. + + + Use flashing or rapid animations. + Make essential information animation‑dependent. + Introduce large, attention‑grabbing transforms that distract from tasks. + Mix inconsistent timings for similar interactions. + +
@@ -188,4 +185,4 @@ export default function Motion() { ); -} \ No newline at end of file +} diff --git a/brand-assets/brand-style-guide-site/src/app/typography/page.tsx b/brand-assets/brand-style-guide-site/src/app/typography/page.tsx index b197dd3..1e3a6d2 100644 --- a/brand-assets/brand-style-guide-site/src/app/typography/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/typography/page.tsx @@ -1,4 +1,5 @@ import ScrollReveal from '@/components/ScrollReveal'; +import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont"; export default function TypographyPage() { return ( @@ -31,26 +32,19 @@ export default function TypographyPage() { Our typography is rooted in Bauhaus principles — providing rational foundation through clarity, structure, and disciplined hierarchy. This reflects the engineered rigor of our systems while keeping compositions clean, functional, and legible.

-
-
-

Typography Do's

-
    -
  • • Use approved humanist sans or geometric sans-serifs (Inter, Helvetica Neue, Futura, Avenir)
    • -
  • • Emphasize clear hierarchy with grid layouts and generous spacing
    • -
  • • Favor all-caps headers with restrained weight OR mixed case with stronger weight
    • -
  • • Never mix both approaches in the same document
    • -
-
- -
-

Typography Don'ts

-
    -
  • • Avoid trendy display fonts, script styles, or overuse of italics
    • -
  • • Don't mix too many typefaces — consistency is critical
    • -
  • • Never combine all-caps headers with mixed case headers in one document
    • -
-
-
+ + + Use approved humanist sans or geometric sans-serifs (Inter, Helvetica Neue, Futura, Avenir). + Emphasize clear hierarchy with grid layouts and generous spacing. + Favor all-caps headers with restrained weight OR mixed case with stronger weight. + Never mix both approaches in the same document. + + + Avoid trendy display fonts, script styles, or overuse of italics. + Don't mix too many typefaces — consistency is critical. + Never combine all-caps headers with mixed case headers in one document. + +

@@ -120,126 +114,80 @@ export default function TypographyPage() { {/* Typography Examples - DO vs DON'T */}

-
- {/* DO Section */} -
-

- ✓ - DO -

-
-

This column represents the correct typographic approach to font selection, weight, scaling, coloration.

-
- - {/* Headings Example */} -
-

Headings

-
-

Masthead

-

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
-
Heading 7
-
-
- - {/* Weight Adjustments */} -
-

Adjust Weight for Contrast

-
-

Thin (100)

-

Extra Light (200)

-

Light (300)

-

Normal (400)

-

Medium (500)

-

Semi Bold (600)

-

Bold (700)

-
-
- - {/* Paragraph Examples */} -
-

Weight for emphasis

-

- This body text has been set for particular emphasis of a single paragraph. -

-

- This is normal paragraph text used throughout the CHORUS design system. It is designed for readability and accessibility. -

-

- This is smaller body text for secondary information. -

-
- - {/* Links */} -
-

Links

-

- Links are styled to be clear and accessible: -

- -
-
- - {/* DON'T Section */} -
-

- ✗ - DON'T -

-
-

This column represents incorrect approaches to avoid.

-
- - {/* Wrong Headings Example */} -
-

Adjust Weights or Sizes

-
-

Masthead

-

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
-
-
- - {/* Wrong Color Usage */} -
-

Color for emphasis

-

- Body text should not be colored to emphasise a paragraph. -

-

- This is normal paragraph text used throughout the CHORUS design system. -

-

- This is smaller body text for secondary information. -

-
- - {/* Wrong Spacing */} -
-

Overset Leading

-

- This text has been set with excessive leading for the paragraph and its associated heading. -

-

- Paragraphs should have sufficient space to let them 'breathe', while maintaining logical connection. -

-

- This smaller body text for secondary information appears orphaned. -

-
-
-
+ + + +

This column represents the correct typographic approach to font selection, weight, scaling, coloration.

+ + +
+

Masthead

+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+
Heading 7
+
+ + +
+

Thin (100)

+

Extra Light (200)

+

Light (300)

+

Normal (400)

+

Medium (500)

+

Semi Bold (600)

+

Bold (700)

+
+ + +

+ This body text has been set for particular emphasis of a single paragraph. +

+

+ This is normal paragraph text used throughout the CHORUS design system. It is designed for readability and accessibility. +

+

+ This is smaller body text for secondary information. +

+ + +

Links are styled to be clear and accessible:

+ + + + + +

This column represents incorrect approaches to avoid.

+ + +
+

Masthead

+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+
+ + +

Body text should not be colored to emphasise a paragraph.

+

This is normal paragraph text used throughout the CHORUS design system.

+

This is smaller body text for secondary information.

+ + +

This text has been set with excessive leading for the paragraph and its associated heading.

+

Paragraphs should have sufficient space to let them 'breathe', while maintaining logical connection.

+

This smaller body text for secondary information appears orphaned.

+ + +
diff --git a/brand-assets/brand-style-guide-site/src/app/usage/page.tsx b/brand-assets/brand-style-guide-site/src/app/usage/page.tsx index fe0d783..b0ea862 100644 --- a/brand-assets/brand-style-guide-site/src/app/usage/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/usage/page.tsx @@ -1,3 +1,5 @@ +import ScrollReveal from "@/components/ScrollReveal"; +import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont"; export default function UsagePage() { return ( @@ -65,31 +67,30 @@ export default function UsagePage() {
+ {/* DO and DO NOTs */} + +

Brand Application Principles

-
-
-

Do

-
    -
  • • Maintain generous white space around all brand elements
    • -
  • • Use the complete color palette system consistently
    • -
  • • Follow typography hierarchy and proportional scaling
    • -
  • • Ensure accessibility compliance in all applications
    • -
  • • Keep designs clean and uncluttered
    • -
-
-
-

Don't

-
    -
  • • Modify or distort logo proportions or colors
    • -
  • • Use colors outside the approved palette
    • -
  • • Overcrowd designs with unnecessary elements
    • -
  • • Mix inconsistent typography styles
    • -
  • • Ignore accessibility requirements
    • -
-
-
+ + + Maintain generous white space around all brand elements. + Use the complete color palette system consistently. + Follow typography hierarchy and proportional scaling. + Ensure accessibility compliance in all applications. + Keep designs clean and uncluttered. + + + Modify or distort logo proportions or colors. + Use colors outside the approved palette. + Overcrowd designs with unnecessary elements. + Mix inconsistent typography styles. + Ignore accessibility requirements. + +
+ + diff --git a/brand-assets/brand-style-guide-site/src/components/DoDont.tsx b/brand-assets/brand-style-guide-site/src/components/DoDont.tsx new file mode 100644 index 0000000..19ce848 --- /dev/null +++ b/brand-assets/brand-style-guide-site/src/components/DoDont.tsx @@ -0,0 +1,67 @@ +import React from 'react'; + +type DoDontItem = { + title?: string; + content?: React.ReactNode; +}; + +export function DoDontGrid({ children }: { children: React.ReactNode }) { + return
{children}
; +} + +export function DoSection({ items, children, title = 'DO' }: { items?: DoDontItem[]; children?: React.ReactNode; title?: string }) { + return ( +
+

+ + + + {title} +

+
+ {items + ? items.map((item, idx) => ( + {item.content} + )) + : children} +
+
+ ); +} + +export function DontSection({ items, children, title = "DON'T" }: { items?: DoDontItem[]; children?: React.ReactNode; title?: string }) { + return ( +
+

+ + {title} +

+
+ {items + ? items.map((item, idx) => ( + {item.content} + )) + : children} +
+
+ ); +} + +export function DoItemCard({ title, children }: { title?: string; children?: React.ReactNode }) { + return ( +
+ {title ?
{title}
: null} +
{children}
+
+ ); +} + +export function DontItemCard({ title, children }: { title?: string; children?: React.ReactNode }) { + return ( +
+ {title ?
{title}
: null} +
{children}
+
+ ); +} +