GX component catalog

Foundations

Product colour  ·  TRANSFAC ramp  ·  Text roles  ·  Radius, hairline, surface

Page structure

Hero · blue  ·  Hero · mid  ·  Hero · white  ·  Hero · blue mirrored  ·  Hero · mid mirrored  ·  Hero · white mirrored  ·  Section header  ·  Subsection header  ·  Manifest reveal  ·  CTA band  ·  CTA band — white

Content

Value card  ·  Product card  ·  Package card  ·  Package card, wide  ·  Card on a dark ground  ·  Numbered stack  ·  Split feature  ·  Feature grid  ·  Punchline inset  ·  Spec rows  ·  Check list  ·  Pill row  ·  Prose columns

Data

Stat grid  ·  Metric tile  ·  Comparison pair  ·  Data table

Status

Notice  ·  Badge  ·  Steps

Navigation

Anchor nav  ·  Index tiles  ·  Breadcrumbs  ·  Previous / next

Media and people

Media card  ·  Resource item  ·  Logo row  ·  Person card  ·  Pull quote

Commerce

Pricing card  ·  Add-on card  ·  Split panel  ·  Split accordion  ·  Testimonial card  ·  Logo wall

Native blocks

Icon list  ·  Tabs

Articles

Article header  ·  Post card  ·  Author bio  ·  Figure  ·  Pagination

Publications and events

Publication entry  ·  Event card  ·  Schedule rows  ·  Empty state

Behaviour

Modal  ·  Video popup  ·  Disclosure  ·  Countdown  ·  Gallery

From the reference systems

Banner  ·  Page header  ·  Code  ·  Glossary term  ·  Progress steps  ·  Task list

Reference

Timeline  ·  FAQ accordion  ·  References

Three sub-brands, three hues. This is the important constraint on the whole system: on this site colour already means which product. That is why status further down cannot borrow orange or green.

Eight shades from Diana’s gradient guide, plus the tf-100 tint that sits outside the ramp and does most of the surface work.

Six roles, no more. The two eyebrow classes must never merge: the section marker is navigation, the sub-marker is a quiet caption inside level-2 structure.

Three radii only — 8 for controls, 12 for cards, 16 for card shells. One hairline colour on light, one on dark.

The fixed opening of every section: eyebrow, H2, lead. Only the H2 is required — pass no eyebrow where the section needs no navigation marker, and no lead where the heading already says everything. Measured reason it exists: across the block markup of 194 live pages there are 35 different heading colours, and the most used one, #9ba0a6 at 222 occurrences, measures 2.63:1 and fails contrast.

The same opening one level down, for splitting a long section. The site already needs it: 625 h3 across 194 pages, three quarters as many as h2 — and not one of them carries a size, 520 carry no colour, so h3 is the one heading nobody ever styled. 26px sits clearly between the 36px section H2 above and the 19px card title inside. The hairline above it does the real work: a heading one step smaller is easy to scroll past, a rule the reader crosses is not. There is deliberately no fourth level. Only 20 of 194 live pages use three heading levels at all, and the h4s that exist say things like “Step 1” and “How to cite PASS:” — items in sequences and lists, already covered by steps, numbered stack, feature grid and spec rows. A fourth level would also land at ~21px, where the card title already is.

One shape, four slots. Counted over the block markup of the 194 live pages: of 170 card-like structures, 63 are title-and-text, 47 carry a list inside and 56 carry a link out — so list and link are slots, not separate components. Equal height comes from putting the surface on the column, not on a rowlayout nested inside it: columnsInnerHeight stretches columns but never their contents, so nested cards read 117/141/165 where these read 165/165/165. The live site fakes it with minHeight, which holds only until some text is longer than the number. The column count is chosen from the item count — four cards go two-by-two rather than three-plus-an-orphan.

A cross-reference: this thing belongs to product X, go there. Hue on the left edge is the honest home for BRENDA orange and CHEMO green — on this site colour already means which product, which is exactly why status cannot borrow it. No picture and no call to action; it points, it does not sell. The hue says which product; it does not say where the card ends. This card used to carry its own surface, which cost it twice — nested, so the row rendered 173/197/173, and white on white, so the only boundary was a hue measuring 2.37:1 for BRENDA and 2.31:1 for CHEMO against a 3.0 threshold. The surface now comes from the grid and the stripe stays the brand colour.

A different job from the card above: this one sells. Measured on the live site — the “Request price” call appears on ten pages and 34 times on the pricing page alone, always in the same shape. The head is dark because the screenshots are. The blue field baked into those files takes 57%, 36% and 47% of the three used on the home page, so a light card put a heavy slab above unbounded white text; the card adopts that blue instead of fighting it. Cropping at 21:9 rather than 4:3 drops the field to 33/15/29%. One action, not two — a ghost link beside the button competed with it for the same click.

TRANSFAC

Basic

Discover TF binding sites in promoters and enhancers of your genes.

Request price

TRANSFAC

Pathways

Reconstruct the signal transduction network controlling your genes.

Request price

TRANSFAC

Diseases

Identify drug targets and disease biomarkers from the literature.

Request price

The same card lying down, one to a row, when the screenshot is worth reading rather than glancing at. The picture is a column background, not an image block: a ratio-cropped image is sized by its own aspect and left 16px of card showing under it whenever the words ran taller, while a cover background fills its half at any height. The cost is real — a background carries no alt text, so here the picture is decorative and the words carry the meaning alone.

An ordered argument where each step earns the next. Numerals stay quiet through size and weight rather than through pale colour, which fails contrast.

Image one side, argument the other, alternating down the page. Alternating sides is what stops a long page reading as a list.

Mechanism, not correlation

Curated causal reactions instead of co-expression that happens to agree, each traceable to the experiment that produced it.

1.2M signal transduction reactions

1,631 curated pathways

Every reaction carries its source

See what ships

Icon, title, one line. For capability lists where a value card is too heavy and a bullet list too flat.

Binding sites

118,987 experimentally verified sites.

Causal reactions

Signal transduction, not correlation.

Clinical evidence

1.4M drug–disease–trial links.

No coding

200+ tools behind one interface.

One click

Raw multi-omics to drug targets.

Quarterly releases

Two database releases every year.

The one line in a block that should land. Once per section at most — a page of punchlines has none.

Sparse, text-only inventories. Beats a card grid when items have no icons or numbers, and unlike a card row it does not leave a hole at five items.

Included and excluded. iconVerticalAlign baseline belongs on every item, not only the visibly multi-line ones, or icons drift as the copy changes.

A run of short tags. One heading block, N marks — they wrap by themselves. fontHeight 3 is load-bearing: mark padding escapes the line box and rows collide below it.

Long-form text in two measures. Past roughly 90 characters a line gets hard to track back to; splitting is cheaper than shortening approved copy.

Figures that frame a product. Flush cells with partial borders, so every internal edge is exactly 1px and no joint doubles up.

A figure that moved. The site shows plenty of numbers but never shows change, which is most of what a release note is actually about.

Two positions side by side. A table earns its place at ten rows or more — four points against four is two cards.

A real table, for the case the rule allows: ten rows or more and genuinely tabular. On a phone Kadence wraps it in a scroll region with no keyboard access, which axe reports as a serious failure — so prefer spec rows whenever the data can carry it.

Four tones. Note what is not here: green and orange. Two of the three brand hues name products, so a green success box would read as Chemo Informatics and an orange warning as BRENDA. Status is carried by icon and label instead, with one coloured exception — alert red, which no product owns.

Status on a heading or a list row, deliberately hue-free apart from the blue — which is the site’s system colour rather than any one product’s, since TRANSFAC, TRANSPATH and HumanPSD all wear it.

An ordered process across cards. Built by hand on Solutions; as a component it stops being re-invented on every page.

A table of contents at the top of a long page. Padding sits on the link, not the column, or the tap target is only as tall as the text — 22px against a 44px floor.

Nothing on the site tells a visitor where they are. This is half of why the release pages read as orphans.

Without it every page is a dead end. Applies to releases, blog posts and any ordered series.

Image over text. There is no reusable article or resource card today, so every listing is rebuilt from scratch.

Grounding foundation models

What a curated regulatory graph changes about model output.

Read more

Mechanism over correlation

Why causal reactions beat co-expression for target ranking.

Read more

From biomarker to trial

Tracing a marker through disease annotation into clinical evidence.

Read more

A downloadable with its type and size stated. Release pages currently link PDFs as bare inline text, which gives no signal about what is about to open.

A product or trusted-by strip. Assembled ad hoc on several pages today, with a different alignment each time.

A named human attached to a claim. maskSvg circle works on any source aspect ratio, unlike a radius plus an overflow wrapper.

Prof. Dr. Alexander Kel

CEO & CSO, co-author of TRANSFAC®

Bring your specific question. We will tell you whether the database fits.

An attributed statement that carries weight. 72/28 so the plate is never narrower than its column, which is what made an earlier version read as a layout bug.

“A model can generate a conclusion. It cannot take responsibility for one.”

Prof. Dr. Alexander Kel

CEO & CSO, co-author of TRANSFAC®

Plan, price, what you get, one action. Licence tiers are prose on the site today. A price needs its unit beside it or the number is unreadable, and one card in a row should be visually ahead or the eye has nowhere to land first.

A secondary purchase: what it is, then what it costs. Takes several rates in one card, so an option priced two ways does not become two cards.

Argument left, proof right, inside one panel. Half a page of checklist under a heading reads as filler; beside the heading it reads as substantiation.

The heading stays put on the left while the accordion runs down the right. A full-width accordion wastes the measure — the trigger line is short and the rest of the row is empty.

Quote, rating, attribution. Unicode stars rather than an icon font — they inherit colour, need no icon attribute and cannot silently fail. Note the site’s own testimonials are still drafts and hidden, so this ships empty until copy exists.

A centred claim over a row of marks. The bare strip already existed; this is the framed version, where the sentence above does the persuading and the logos are the evidence.

Licensed by research groups at 230+ institutions worldwide

The site’s most-used block by a wide margin — 436 lists holding 2,836 items — and this library was approximating it with headings. The real block sets one icon for the whole list instead of one per row, and stays editable.

Used on the product pages, absent from this library until now. Worth wrapping rather than faking: tab switching is behaviour, and an accordion is the only substitute — but an accordion reads as a list, not as alternatives.

Posts currently open with a bare heading. Category, date and reading time are what a reader uses to decide whether to start at all.

A listing entry with its metadata. The media card has no category, date or author, which is most of what makes a list of posts scannable.

Who wrote this and why they are worth reading. On a scientific site the author is part of the evidence, and no post carries one today.

Written by

Prof. Dr. Alexander Kel

CEO & CSO, co-author of TRANSFAC®

Has worked on transcriptional regulation since 1988 and co-authored the original TRANSFAC release.

All posts by this author

An image that says what it shows and where it came from. Posts embed images bare today, which on a scientific site loses the provenance.

Disease vicinity network for hypertrophic cardiomyopathy, re-inferred from updated HumanPSD curation.

Source: HumanPSD™ 2026.1

Previous and next cover an ordered series; a listing needs numbers, so a reader can tell how much there is and jump.

The publications page is 452 headings and 117 rowlayouts, every entry assembled by hand. Authors first, title second, venue third is the order a researcher scans in, and it never varies.

Six webinar pages exist and none of them has a reusable card. The date is the first thing a reader looks for, so it leads.

The webinar page builds its agenda as a 25-row table — exactly the case the table rule says to avoid: two columns, short values, and a scroll region on mobile the keyboard cannot reach.

What a search with no hits, a filtered list with nothing left, or a 404 should show. Today such a page falls back to the theme default, which says nothing and offers nowhere to go.

A real popup, and it does work from generated markup. The mechanism is indirection: the dialog sits on the page hidden with an id, and any link pointing at that id opens it. So the trigger is an ordinary anchor and knows nothing about dialogs beyond carrying the class the script binds to. Click the button below.

Click-to-play in a lightbox, used 52 times on the site. A raw embed loads the player and its third-party scripts on every page view; the popup loads nothing until someone asks for it.

One long thing that starts collapsed behind a fade. Lighter than an accordion, which announces itself as a list of choices — use this where there is a single passage most readers will skip.

Used on the launch pages. Needs both the ISO string and the epoch milliseconds — Kadence renders from the timestamp and edits from the string, and if they disagree the editor shows a different date than the visitor does.

A set of images as one block rather than N image blocks. Grid rather than slider: a slider is behaviour a keyboard user has to be able to drive, and the arrows are small.

Identifiers set apart from prose. Atlassian and Primer both carry it, and a bioinformatics site needs it more than either: the 2026.1 notes alone contain factor_pairs_capselex, GSE59612, BDGP6.54 and GRCm39. Set in running text they look like typos.

A term that explains itself on hover and on focus. Three of the four reference systems carry a tooltip; Kadence has no such block, so this uses native <abbr title> — no JavaScript, works on keyboard focus, read out by screen readers. On a site where every other noun is an abbreviation it earns its place. Hover the underlined terms.

Steps that know where you are. The static steps card says what the process is; this says how far along it runs, which is what a licensing or onboarding path needs.

Rows that each carry a state. GOV.UK’s task list, and the shape a roadmap or a release checklist wants: what it is on the left, where it stands on the right.

Dated entries down a rule. Built for the release hub, but publications, milestones and any changelog share the shape.

Questions that would otherwise bloat the page. startCollapsed, or the first pane opens on load and the section looks broken.

Numbered citations. A site that publishes claims needs one consistent way to source them; today they are inline italics, or nothing at all.