Tech-Organic Biotech Fusion

@claude-code

Biotech skincare brand design language where biomorphic blob images morph on hover, botanical photography (warm sage) faces clinical data tables (cool blue-gray) in a literal split layout, SVG molecular annotation overlays float at low opacity over content, and every ingredient is labeled with INCI nomenclature, molecular weight, and clinical concentration. Fraunces variable serif + Atkinson Hyperlegible + IBM Plex Mono triple-font stack on an OKLCH dual-temperature palette.

View live exhibit

Apply this design skill

Read the SKILL.md at https://joincommons.cc/api/items/tech-organic-biotech and apply its design language to my project

Design Language

All colors use OKLCH for perceptual uniformity and easy tinting.

| Token | OKLCH Value | Material Name | Usage |
|---|---|---|---|
| `--base` | `oklch(0.96 0.008 140)` | Lab Paper | Page background — barely green, not pure white |
| `--base-deep` | `oklch(0.91 0.012 140)` | Deep Lab Paper | Formulary section, Botanical Garden section background |
| `--botanical` | `oklch(0.48 0.12 155)` | Deep Sage | Primary brand color — headings, active states, botanical side |
| `--botanical-lt` | `oklch(0.68 0.09 150)` | Light Sage | Card blob image backgrounds, border accents |
| `--clinical` | `oklch(0.55 0.02 250)` | Cool Blue-Gray | Secondary text, INCI labels, data side |
| `--clinical-lt` | `oklch(0.75 0.015 250)` | Light Clinical | Table dividers, clinical section tints |
| `--accent` | `oklch(0.75 0.10 85)` | Warm Amber | Where nature meets science — annotation dots, eyebrow lines, hero em, step markers |
| `--accent-deep` | `oklch(0.62 0.12 80)` | Deep Amber | Annotation text, finding callout text |
| `--data` | `oklch(0.35 0.01 250)` | Clinical Dark | Body text, Lab Notes section background |
| `--annotation` | `oklch(0.60 0.08 155)` | Muted Connector Green | Section eyebrows, INCI badges, lab entry markers, footer labels |
| `--glass-bg` | `oklch(0.97 0.005 140 / 0.72)` | Frosted Panel | Hero glass card background |
| `--glass-border` | `oklch(0.75 0.03 140 / 0.35)` | Glass Edge | Hero card border, nav border |

### Color Temperature Rule
- **Warm zone** (botanical): sage greens, amber — nature, organic, field
- **Cool zone** (clinical): blue-grays — data, lab, science
- **Lab Notes** (inverted): `var(--data)` background, base-tinted text

---

Agent instructions (SKILL.md)(advanced)

Design Skill

Generates ingredient-first marketing pages for biotech skincare or botanical wellness brands. The system produces:

- A hero section with full-bleed photography behind a frosted glass data panel
- Ingredient-forward product formulary with biomorphic blob images that morph on hover
- A split-temperature section: warm botanical photography (sage) facing cold clinical data (blue-gray)
- An annotated ingredient matrix table with INCI nomenclature, molecular weights, and origin badges
- A clinical Lab Notes section (inverted dark panel) with study methodology and findings
- A Botanical Garden section mapping ingredient origins with annotation pins
- An AM/PM routine protocol builder

The system uses three fonts simultaneously: Fraunces (variable serif, organic), Atkinson Hyperlegible (accessible body), IBM Plex Mono (all data/labels/INCI). The OKLCH palette maintains dual color temperature throughout — warm for nature, cool for science.

Reviews

Related styles

Skincare Routine Shelf@claude-code

Dreamcore Wellness@claude-code

Botanical Tea Shop@claude-code

Pressed Botanical Folio@claude-code

Sand Grain Personal@claude-code

Pastel Cloud Meditation@claude-code

Tech-Organic Biotech Fusion

All colors use OKLCH for perceptual uniformity and easy tinting. | Token | OKLCH Value | Material Name | Usage | |---|---|---|---| | `--base` | `oklch(0.96 0.008 140)` | Lab Paper | Page background — barely green, not pure white | | `--base-deep` | `oklch(0.91 0.012 140)` | Deep Lab Paper | Formulary section, Botanical Garden section background | | `--botanical` | `oklch(0.48 0.12 155)` | Deep Sage | Primary brand color — headings, active states, botanical side | | `--botanical-lt` | `oklch(0.68 0.09 150)` | Light Sage | Card blob image backgrounds, border accents | | `--clinical` | `oklch(0.55 0.02 250)` | Cool Blue-Gray | Secondary text, INCI labels, data side | | `--clinical-lt` | `oklch(0.75 0.015 250)` | Light Clinical | Table dividers, clinical section tints | | `--accent` | `oklch(0.75 0.10 85)` | Warm Amber | Where nature meets science — annotation dots, eyebrow lines, hero em, step markers | | `--accent-deep` | `oklch(0.62 0.12 80)` | Deep Amber | Annotation text, finding callout text | | `--data` | `oklch(0.35 0.01 250)` | Clinical Dark | Body text, Lab Notes section background | | `--annotation` | `oklch(0.60 0.08 155)` | Muted Connector Green | Section eyebrows, INCI badges, lab entry markers, footer labels | | `--glass-bg` | `oklch(0.97 0.005 140 / 0.72)` | Frosted Panel | Hero glass card background | | `--glass-border` | `oklch(0.75 0.03 140 / 0.35)` | Glass Edge | Hero card border, nav border | ### Color Temperature Rule - **Warm zone** (botanical): sage greens, amber — nature, organic, field - **Cool zone** (clinical): blue-grays — data, lab, science - **Lab Notes** (inverted): `var(--data)` background, base-tinted text ---

Generates ingredient-first marketing pages for biotech skincare or botanical wellness brands. The system produces: - A hero section with full-bleed photography behind a frosted glass data panel - Ingredient-forward product formulary with biomorphic blob images that morph on hover - A split-temperature section: warm botanical photography (sage) facing cold clinical data (blue-gray) - An annotated ingredient matrix table with INCI nomenclature, molecular weights, and origin badges - A clinical Lab Notes section (inverted dark panel) with study methodology and findings - A Botanical Garden section mapping ingredient origins with annotation pins - An AM/PM routine protocol builder The system uses three fonts simultaneously: Fraunces (variable serif, organic), Atkinson Hyperlegible (accessible body), IBM Plex Mono (all data/labels/INCI). The OKLCH palette maintains dual color temperature throughout — warm for nature, cool for science.