Anaphasic

Brand & Logo

The name Anaphasic derives from anaphase — the stage of cell division when chromosomes are pulled to opposite poles. The mark turns that into the firm's thesis: biology and computing converging and dividing.

Anaphasic

The dual metaphor — in the company's own words

Visually the mark sets an organic, filamentary pole against a circuit-trace pole with nodes and a contact pad, separating across a teal field. Rather than paraphrase, here is how the site itself explains it on the About page:

“Anaphasic's logo is inspired by the image of a eukaryotic cell during anaphase of mitosis — the stage when replicated chromosomes have condensed and have begun to differentiate into two new cells… In our logo, the twin proto-nuclei are organic and technological, reproduced into complementary domains… [alluding] to Anaphasic's origins in the synthesis of life sciences with silicon and information technologies.” — anaphasic.com / About about.html L386–388

On-site this lives in a distinctive solid-accent panel — a #4A7F99 card with forced white text (data-cfc="true"), 5px radius, paired two-up with the icon. It is the only place the system uses a solid accent field as a card ground, distinct from the charcoal expertise card in §07. about.html L363–406

Usage (as observed)

Tokens

Anaphasic has no formal design-token layer. These are the de-facto tokens — the real values the site repeats — recovered from the Salient theme customizer output (salient-dynamic-styles.css), inline styles, and WordPress presets.

Color

A cool, clinical blue system — slate, teal and pale blue-grey over charcoal and white. Frequencies are real counts of each hex in salient-dynamic-styles.css. Click any hex to copy.

Brand palette

Signature gradient

Used as a section overlay (Expertise band): linear-gradient(to bottom, #4A7F99 0%, #005B87 100%). index.html L335

Typography

Two faces: eurostile — a wide industrial grotesque, set UPPERCASE for all display — and Open Sans for body. eurostile is served via the client's Adobe Typekit kit dwi4lcy (weights 400/800/900, no italic).

Type scale (real, responsive)

Specimens

Spacing & Layout

A centered 1300px column inside a 20px white frame, with a generous 75px vertical section rhythm.

Buttons

Salient .nectar-button, set to slightly_rounded. Two on-brand variants appear on the homepage hero. Reconstructed specimens below.

Cards & Content Blocks

Two recurring blocks carry the homepage: the dark expertise card with a colored 25px spine, and the project card (image + label + CTA). Both use the 5px radius and the signature hard offset shadow.

Expertise card

Ground #333 @ .9 opacity · 5px radius · 25px left border (rotates #A4BFCC / #4A7F99 / #005B87 / #333 across the four cards) · hard shadow · whole card is a link · hover drops opacity to .5. index.html L349–451

Project card

Biosemiotics & Language Discovery

Applying machine learning to biological systems to accelerate understanding

Read More

DNA Data Storage

Using a three-billion year old technology to enable and preserve our digital future

Read More

Platforms for Biosensing & Analytics

Adapting electronic technologies to access the molecular world

Read More

Frameworks for Complex Systems

Adapting electronic technologies to access the molecular world

Read More

Square-ish image (5px radius + hard shadow) · H5 title · Open Sans body · left underline CTA in #005B87. Shown from local copies of the site's project images. index.html L471–613

Expertise section-nav chips

The Expertise page opens with four small rounded anchor chips that jump to its in-depth sections — a compact, color-coded wayfinding row.

Backgrounds #A4BFCC / #4A7F99 / #005B87 / #000000 · 4px radius · 1em padding. The 4th chip is true black (see §03); note the white label on the pale #A4BFCC chip is low-contrast on the live site. expertise.html L105

Imagery

Scientific, macro photography — chromosomes, DNA renders, biochips, microscopy — in a cool palette that matches the brand blues. Always 5px radius + the hard offset shadow, roughly square.

Forms

The live site uses Gravity Forms #1 (gravity-theme) with stacked top-labels. This specimen upgrades it to the Aurochs floating-label outlined field from the agency style guide: the label sits inside the field when empty, then animates up to notch the top border on focus or once filled. Pure CSS, no JS, driven by :placeholder-shown (each input carries placeholder=" ", a single space). Try focusing a field; the pre-filled "Confirm email" shows the floated state.

Real fields: Name (first/last), Email + Confirm Email, Comments (textarea, 600-char max with live counter), all required. index.html L641–680 · Pattern: Aurochs v4.0 §09 · v3.css L1824

Navigation & Header

A simple white header with the logo and a four-item menu; a slide-out off-canvas panel handles small screens.

Section System

The homepage is a stack of full-width bands that alternate light and dark (Salient's data-midnight), each 75px-padded, some carrying a solid color or the signature gradient overlay.

Signature Expertise overlay. index.html L223,258,335,457

Motion

Restrained, theme-native motion — column reveals on scroll and hover transitions. No bespoke animation layer.

index.html L126,788–797

Information Architecture

Four pages, single-purpose. The contact form lives at the bottom of Home and About.

Voice & Copy

Declarative, thesis-driven, and unhedged. Short scientific claims stated as conviction; key nouns bolded for scan-ability.

Positioning

“Driving Innovation in Technology Strategy.”

Mission

“We believe Synthetic biology will be more transformative in the 21st century than semiconductors and computing were for the 20th.”

Vision

“We will accelerate synthetic biology through technology development, discovery, and application through strategy, design, architecture, and engineering disciplines.”

Origin

“With an origin story that reaches back into the early 90s, Anaphasic is the evolving answer to the question: what are the next engineering challenges that will exceed the complex challenges of designing highly integrated products like microprocessors — and all that makes them possible?” about.html L275

Tech Stack & Provenance

Everything the design system depends on, with versions as shipped on 2026-06-01.

Stylesheet inventory (brand-relevant)

• salient-dynamic-styles.css?ver=43163 — theme customizer output (accent, fonts, colors) · source of truth for the palette
• main-styles-inline + dynamic-css-inline — critical inline CSS, incl. the eurostile .subheader and .large/.small rules
• style.css / responsive.css / skin-material.css — Salient core

As-Built Notes / Inconsistencies

Honest observations found while extracting the live site — content & link issues, not design-system flaws. Worth a quick editorial pass.

Changelog