Design system & templates

A live gallery of every PhyloFlask component — copy the markup from here for consistent, polished pages. Full spec in docs/DESIGN.md.

Colour tokens

Use the CSS variables, never raw hex.

--ink
#111827

--accent
#2f6bff

--teal
#0bb39a

coral
#e44c65

--text-2
#586074

--surface
#ffffff

Buttons

.futuristic-btn (primary) · .futuristic-btn-secondary · disabled.

Link button

Inputs & select

Drop-zone + file pill

Wire with Phylo.dropzone({zone, input, pill}).

Drop a file here

or click to browse · .csv

example.csv (12 KB)

Stepper

Step 1

2 Step 2

3 Step 3

Status, loader & note

Info — processing…

Success — done.

Error — something went wrong.

Working…this can take a moment

7 domains → 3 clusters (modularity 0.71).

Cards

3,144species

218queries

Tool card

Clickable card with hover lift.

Open

phylogenetic profiling heatmaps

Callouts & badges

For biologists For programmers

Bio callout

Left-accent info box for biology notes.

CS callout

Left-accent info box for computing notes.

Copy: tool-page scaffold

{% extends "tools.html" %}
{% block content %}
<section class="wrapper style1 fade-up"><div class="inner">
  <div class="tool-stepper">…</div>
  <h1>Tool name</h1>
  <p>One-line intro.</p>
  <div id="dz" class="dropzone">
    <input type="file" id="f" accept=".csv">
    <div class="dz-icon"><i class="fas fa-upload"></i></div>
    <p class="dz-title">Drop a file here</p><p class="dz-hint">or click to browse</p>
  </div>
  <div id="pill" class="file-pill" style="display:none"></div>
  <button class="futuristic-btn"><i class="fas fa-play"></i> Start</button>
  <div id="status" class="tool-status"></div>
</div></section>
<script>
  Phylo.dropzone({ zone:document.getElementById('dz'),
    input:document.getElementById('f'), pill:document.getElementById('pill') });
</script>
{% endblock %}