Folio design system

Tactfolio brand and press kit

How Tactfolio looks, sounds and likes to be shown. Our design system is called Folio. Use what is on this page when you write about us, link to us or show that your product works with Tactfolio.

Download the logoPress kit
TACTFOLIO
Two rails and a brass line that moves from the lower rail to the upper one: a rule that changes what you hold when the market changes.

What Folio stands for

A folio is a numbered page in a ledger. Tactfolio is about the careful record of money over time, so Folio borrows from printed finance: the green-black of a bound ledger, paper, brass, ruled lines and figures set in columns.

  1. Ink and paper, not neon

    Green-black pages and quiet off-white text, like a ledger. No glowing gradients.

  2. One accent

    Brass marks the main action, your strategy and your choice. If everything is brass, nothing is.

  3. Calm signals

    Gains, losses and warnings share one lightness, so none of them shouts.

  4. Figures in columns

    Numbers use a monospace with equal digits, like a ledger.

  5. Three voices in type

    A serif for the story, a sans for the tool, a mono for the data.

  6. Lines before shadows

    Edges are thin paper-tinted rules. Only what floats casts a shadow.

  7. Readable by everyone

    Every text color meets WCAG 2.2 AA on every surface it sits on.

  8. Nothing generic

    No sparkle icons, no gradient text, no stock colors from a framework.

The mark sits on a raised ink tile. The name beside it is set in IBM Plex Mono capitals, spaced wide. Use the files as they are.

Clear space. Keep a quarter of the mark’s height empty on every side. Smallest size. The mark at 16 pixels, the full logo at 120 pixels wide.

Do

  • Use the files below without changes.
  • Place the logo on ink or on plain paper.
  • Link the logo to tactfolio.com.

Don’t

  • Recolor, stretch, rotate or outline the mark.
  • Add glows, shadows or gradients.
  • Set the name in another typeface or as TactFolio.

Download

Color

Each color was chosen in OKLCH, a color space where equal steps look equal, then written in hex. Every pair of text and background meets WCAG 2.2 AA; the figure under each swatch is its measured contrast.

Ledger ink

Five green-blacks, the color of a bound ledger, a few steps apart. You can see where one ends and the next begins without a border.

  • Inset--inset#070B09Inputs, code and sunken areas17.2:1 text on it
  • Canvas--canvas#0A0F0DThe page itself16.7:1 text on it
  • Surface--surface#101513Cards, panels and the footer16.0:1 text on it
  • Raised--surface-raised#151C19Popovers, raised cards, the logo tile15.0:1 text on it
  • Hover--surface-hover#232B28Rows and controls under the pointer12.6:1 text on it

Paper

Four quiet off-whites for text, with a trace of the same green. The quietest one still reads at 5 to 1 on a raised card.

  • Text--text#ECF0EDHeadings, values, anything read first16.7:1 on canvas
  • Soft text--text-soft#C8CEC9Body copy and secondary buttons12.0:1 on canvas
  • Muted--muted#9BA09BCaptions, labels and chart axes7.2:1 on canvas
  • Faint--faint#878C88Hints and placeholders, never more5.0:1 on a raised card

Brass

The one accent. It marks the main action, your own strategy and the thing you picked. Nothing else.

  • Brass--accent#E6B55FThe main button, active marks, the chart cursor10.2:1 on canvas
  • Bright brass--accent-strong#F0CE86Links and accent text, your strategy’s line12.7:1 on canvas
  • Ink on brass--on-primary#2A1C07Words on a brass button8.7:1 on brass

Signals

Gain, loss, warning and note share one lightness, so a red number never shouts louder than a green one.

  • Gain--green#73D881Gains, published, running, connected10.9:1 on canvas
  • Loss--danger#EF7272Losses, drawdowns, actions that delete6.7:1 on canvas
  • Warning--amber#F09458Unsaved, unchecked, paused8.3:1 on canvas
  • Note--info#83B7E4Information and a newer version9.0:1 on canvas
  • Focus--focus#86C5FAThe ring around what the keyboard is on10.4:1 on canvas

Builder blocks

One lightness, five hues. A tree of blocks reads as a set, and no block outshouts another.

  • Weight--block-weight#95DFA4How much each holding gets12.2:1 on canvas
  • If--block-if#84DCDCA condition and its two branches12.1:1 on canvas
  • Rank--block-rank#E4B9EDPick the strongest of a list11.4:1 on canvas
  • Group--block-group#DAC8AAA named basket of holdings11.7:1 on canvas
  • Strategy--block-strategy#C9C1FFAnother strategy used as one holding11.5:1 on canvas

Charts

Your strategy always wears brass and its benchmark always stays gray, so you find your own line without a legend.

  • Your strategy#F0CE86The line you built12.7:1 on canvas
  • Benchmark#9BA09BWhat you compare it with7.2:1 on canvas
  • Next-day open#DA8757The same rules filled a day later6.9:1 on canvas
  • Drawdown#EF7272How far it fell from its last high6.7:1 on canvas

Type

Three typefaces, three jobs. All of them are free under the SIL Open Font License and served from tactfolio.com.

  • Put your investing rules to the test.

    Newsreader

    Headings on the public site

    A serif drawn for reading on screens, by Production Type. Its optical size axis draws finer lines as a heading grows. We set it at 500 to 560.

  • Say when to hold what, and see how that plan would have done on real prices, bad years included.

    Inter

    Everything you read, click or type

    A sans serif built for screens, by Rasmus Andersson. It stays clear at 12 to 16 pixels, where the app does most of its work. Body 400, buttons 650.

  • SPY QQQ TLT GLD 0123456789 +12.40% −8.15%

    IBM Plex Mono

    Figures, tickers and small labels

    A monospace from IBM. Every digit is the same width, so columns of numbers line up and a changing figure does not jump. 400, 500 and 600.

The type scale, largest first
UseSizeFace and weight
Landing headline40 to 74 pxNewsreader 500
Page title32 to 50 pxNewsreader 500
Section heading27 to 36 pxNewsreader 520
Lede17 to 19 pxInter 400
Body16.5 px on the site, 14 px in the appInter 400
Caption12 to 13 pxInter 400 or 500
Label10 px capitalsIBM Plex Mono 600

Shape and depth

Corners are a little tighter than most apps use, so the pages read as a precise tool. Edges are thin rules in paper tint. Only things that float over the page cast a shadow.

Corners

  • 4 pxBuilder parts
  • 6 pxFields
  • 10 pxCards
  • 14 pxDialogs
  • RoundButtons

Lines

  • Every resting edge
  • Fields and dividers that must hold
  • A hovered or picked control

Depth

  • Resting
  • Menu
  • Dialog

Focus

A 2 pixel ring in focus blue, 2 pixels outside the control. Press Tab on this page to see it on every link and button.

Voice

The words follow the same rule as the colors: say the true thing plainly.

  • Short sentences in plain words. A 12-year-old should follow them.
  • Numbers come with a date and a source.
  • Show the bad part early: the worst drop sits next to the return.
  • Say what Tactfolio is not: not a broker, not advice, not a promise.
  • No hype, no exclamation marks, no dashes between clauses.

  • We writeA backtest shows how a rule would have done on past prices.

    NeverOur strategies beat the market.

  • We writeThe S&P 500 fell 34% in early 2020 and took about five months to get back.

    NeverSteady growth with very little risk.

  • We writeYour money stays in your own Alpaca account.

    NeverLet our AI trade your money for you.

  • We writeHold stocks while the market trends up, and bonds when it does not.

    NeverA smart system that adapts to any market.

Press kit

Writing about Tactfolio? Use this description word for word, and check the facts page for anything that changes, such as plans and prices.

Tactfolio is a platform where you build rules-based investing strategies, backtest them on decades of real prices, share them, and run them automatically in your own Alpaca account. You can build by hand in a visual builder or by asking an AI assistant.

Name
Tactfolio, one word with a capital T
What it is
A research and automation tool. Not a broker or a financial adviser.
Contact
Write to us from the Support page. We reply by email.

Common questions

Can I use the Tactfolio logo?

Yes, to write about Tactfolio, link to it or show that your product works with it. Use the files on this page as they are. Do not change the colors, stretch the mark or make it look like Tactfolio made or backs your product.

What colors does Tactfolio use?

Green-black surfaces, quiet off-white text and one brass accent. The canvas is #0A0F0D, body text is #C8CEC9, and the accent is #E6B55F. Gains are green and losses are red, at the same lightness.

What fonts does Tactfolio use?

Newsreader for headings on the public site, Inter for everything you read, click or type, and IBM Plex Mono for figures and tickers. All three are free under the SIL Open Font License.

How should I write the name?

Tactfolio, as one word with a capital T. Never TactFolio, Tact Folio or Tactfolio.com as a name. In the logo the name is set in capitals, but in a sentence it is Tactfolio.

Who do I contact for press questions?

Write to us from the Support page. You do not need an account, and we reply by email.

More about Tactfolio