Brand kit

Solid Growth is one brand with several lines of business: agency, software and media.
Download the logoGet this for your company
Brand

One brand, one hexagon

Naming, logo, symbol and voice: the decisions the rest of the system follows.

Logo

Six functions on the hexagon: Product, Acquisition, Lifetime value above the waterline; Team, Technology, Finance below.

Symbol

The hexagon on its own is the favicon.

Naming

One brand, written Solid Growth.

  • Solid GrowthRight
  • SolidGrowthWrong
  • Solid growthWrong
  • SOLID GROWTHWrong

Colours

Orange is the brand: the hexagon's gradient and the one call to action. Ink is the colour of every other action. Deep ink blue is its quiet partner.

Orange

Primary ink

Ink

Foreground

Background

Typography

  • AaGeistBody text and controls
  • AaGeist headingsTitles and display lines
  • AaGeist MonoLabels, numbers and code

Tone of voice

Tone of voice is a decision too: a brand book is a set of slots, and each slot is filled by a decision.

Tokens

Every token, in one table

Colour roles light and dark, surfaces, radius, shadow, spacing and type, all from one stylesheet: packages/ui/src/tokens/tokens.css.

Surfaces

The off-white page, the white card on it, and the quiet fills inside cards.

  • background

    The page

    Light
    • Aa
      11.03AAA

      foreground on background

    • Aa
      7.02AAA

      muted-foreground on background

    Dark
    • Aa
      19.16AAA

      foreground on background

    • Aa
      9.79AAA

      muted-foreground on background

  • card

    Panels, stages, popovers

    Light
    • Aa
      12.21AAA

      foreground on card

    • Aa
      7.76AAA

      muted-foreground on card

    Dark
    • Aa
      16.14AAA

      foreground on card

    • Aa
      8.25AAA

      muted-foreground on card

  • muted

    Quiet fills, hover rows

    Light
    • Aa
      6.39AA

      muted-foreground on muted

    Dark
    • Aa
      8.96AAA

      muted-foreground on muted

  • accent

    Menu and list highlight, a warm orange tint

    Light
    • Aa
      11.09AAA

      accent-foreground on accent

    • 1.10No minimum

      On background

    Dark
    • Aa
      13.95AAA

      accent-foreground on accent

    • 1.09No minimum

      On background

  • border

    Hairlines, rails, dividers

    Light
    • 1.19No minimum

      On background

    Dark
    • 1.25No minimum

      On background

  • invert

    Dark band on a light page; the neutral button

    Light
    • Aa
      15.94AAA

      invert-foreground on invert

    Dark
    • Aa
      11.53AAA

      invert-foreground on invert

Text

Two greys carry all copy: foreground for titles and body, muted for support.

  • foreground

    Titles and body copy

    Light
    • Aa
      11.03AAA

      On background

    Dark
    • Aa
      19.16AAA

      On background

  • muted-foreground

    Descriptions, captions, eyebrows

    Light
    • Aa
      7.02AAA

      On background

    Dark
    • Aa
      9.79AAA

      On background

Ink scale

The brand's ink blue in five steps of one hue, like a grey scale for hierarchy: 900 is the header band, bar and footer, each step up a visibly lighter blue; 100 is the light grey-blue the layer card's light tone stands on. The dark tone is 900.

  • ink-900

    Header band, bar, footer (surface-ink)

    Light
    Dark

  • ink-800

    One shade lighter

    Light
    Dark

  • ink-700

    Two shades lighter

    Light
    Dark

  • ink-600

    Fills and marks

    Light
    Dark

  • ink-500

    Lightest step

    Light
    Dark

Brand and accent

The ink is the action colour: the main button of a view, links, ticked controls and progress. Orange, from the logo, is the brand's: the one call to action (Start the free audit), the logo and the illustrations, and nothing else. Ink blue is the partner of both.

  • primary

    Primary buttons, links, ticked controls, progress · ink

    Light
    • Aa
      12.21AAA

      primary-foreground on primary

    • Aa
      11.03AAA

      On background

    • Aa
      12.21AAA

      On card

    Dark
    • Aa
      18.57AAA

      primary-foreground on primary

    • Aa
      19.16AAA

      On background

    • Aa
      16.14AAA

      On card

  • brand

    The brand call to action (Button variant brand), the logo, illustrations · orange

    Light
    • Aa
      5.69AA

      brand-foreground on brand

    Dark
    • Aa
      8.44AAA

      brand-foreground on brand

  • secondary

    Soft buttons and chips · ink blue

    Light
    • Aa
      10.65AAA

      secondary-foreground on secondary

    Dark
    • Aa
      11.44AAA

      secondary-foreground on secondary

  • ring

    Focus ring, a soft blue

    Light
    • 3.28AA large

      On background

    • 3.63AA large

      On card

    Dark
    • 8.23AAA

      On background

    • 6.93AA

      On card

Accents

Ink is for action and orange for the brand; accents are for meaning (which factory). Never use an accent for a button. One hue per factory, each a family: tint (soft washes behind stages and sections), soft (fills, pill hover), base (illustrations, chart series; 3:1 on the card) and text (labels and pills; 4.5:1 on the page, the card, the tint and the soft fill).

  • accent-product

    Product factory · violet

    Light

    tint

    soft

    base

    text

    • Aa
      6.63AA

      accent-product-text on accent-product-tint

    • Aa
      7.52AAA

      accent-product-text on card

    • 5.10AA

      accent-product-base on card

    Dark

    tint

    soft

    base

    text

    • Aa
      9.12AAA

      accent-product-text on accent-product-tint

    • Aa
      10.26AAA

      accent-product-text on card

    • 6.16AA

      accent-product-base on card

  • accent-acquisition

    Acquisition factory · teal

    Light

    tint

    soft

    base

    text

    • Aa
      6.14AA

      accent-acquisition-text on accent-acquisition-tint

    • Aa
      6.89AA

      accent-acquisition-text on card

    • 3.78AA large

      accent-acquisition-base on card

    Dark

    tint

    soft

    base

    text

    • Aa
      9.68AAA

      accent-acquisition-text on accent-acquisition-tint

    • Aa
      11.10AAA

      accent-acquisition-text on card

    • 7.18AAA

      accent-acquisition-base on card

  • accent-lifetime-value

    Lifetime value factory · berry

    Light

    tint

    soft

    base

    text

    • Aa
      6.49AA

      accent-lifetime-value-text on accent-lifetime-value-tint

    • Aa
      7.39AAA

      accent-lifetime-value-text on card

    • 4.82AA

      accent-lifetime-value-base on card

    Dark

    tint

    soft

    base

    text

    • Aa
      9.38AAA

      accent-lifetime-value-text on accent-lifetime-value-tint

    • Aa
      10.50AAA

      accent-lifetime-value-text on card

    • 6.51AA

      accent-lifetime-value-base on card

  • accent-team

    Team factory · ochre

    Light

    tint

    soft

    base

    text

    • Aa
      6.20AA

      accent-team-text on accent-team-tint

    • Aa
      6.92AA

      accent-team-text on card

    • 3.39AA large

      accent-team-base on card

    Dark

    tint

    soft

    base

    text

    • Aa
      10.51AAA

      accent-team-text on accent-team-tint

    • Aa
      11.92AAA

      accent-team-text on card

    • 9.12AAA

      accent-team-base on card

  • accent-technology

    Technology factory · ink blue

    Light

    tint

    soft

    base

    text

    • Aa
      8.18AAA

      accent-technology-text on accent-technology-tint

    • Aa
      9.23AAA

      accent-technology-text on card

    • 5.56AA

      accent-technology-base on card

    Dark

    tint

    soft

    base

    text

    • Aa
      9.55AAA

      accent-technology-text on accent-technology-tint

    • Aa
      10.84AAA

      accent-technology-text on card

    • 6.40AA

      accent-technology-base on card

  • accent-finance

    Finance factory · green

    Light

    tint

    soft

    base

    text

    • Aa
      6.63AA

      accent-finance-text on accent-finance-tint

    • Aa
      7.43AAA

      accent-finance-text on card

    • 4.08AA large

      accent-finance-base on card

    Dark

    tint

    soft

    base

    text

    • Aa
      10.03AAA

      accent-finance-text on accent-finance-tint

    • Aa
      11.51AAA

      accent-finance-text on card

    • 7.78AAA

      accent-finance-base on card

Status

Only for state. Each fill carries a deep label of its own hue; reUI's solid badges use it too.

  • success

    Done, healthy, growth

    Light
    • Aa
      5.71AA

      success-foreground on success

    • Aa
      12.25AAA

      success-foreground on success/10

    Dark
    • Aa
      5.71AA

      success-foreground on success

    • Aa
      5.65AA

      success-foreground on success/10

  • warning

    Needs attention

    Light
    • Aa
      7.03AAA

      warning-foreground on warning

    • Aa
      11.76AAA

      warning-foreground on warning/10

    Dark
    • Aa
      7.03AAA

      warning-foreground on warning

    • Aa
      6.99AA

      warning-foreground on warning/10

  • destructive

    Errors, delete

    Light
    • Aa
      6.08AA

      destructive-foreground on destructive

    • Aa
      5.16AA

      On destructive/10

    Dark
    • Aa
      6.82AA

      destructive-foreground on destructive

    • Aa
      4.77AA

      On destructive/10

  • info

    Neutral information

    Light
    • Aa
      5.17AA

      info-foreground on info

    • Aa
      11.69AAA

      info-foreground on info/10

    Dark
    • Aa
      5.17AA

      info-foreground on info

    • Aa
      5.39AA

      info-foreground on info/10

Charts

The five series colours, also the painted colour fades: the technology blue, the logo orange, the acquisition teal, ink and the lifetime-value berry. Three are factory accents, so charts and fades share the family.

  • chart-1

    Series 1 · technology blue

    Light
    • 5.56AA

      On card

    Dark
    • 6.40AA

      On card

  • chart-2

    Series 2 · logo orange

    Light
    • 3.60AA large

      On card

    Dark
    • 4.75AA

      On card

  • chart-3

    Series 3 · acquisition teal

    Light
    • 3.78AA large

      On card

    Dark
    • 7.18AAA

      On card

  • chart-4

    Series 4 · ink blue

    Light
    • 5.97AA

      On card

    Dark
    • 5.11AA

      On card

  • chart-5

    Series 5 · lifetime-value berry

    Light
    • 4.82AA

      On card

    Dark
    • 6.51AA

      On card

All 192 checks meet their WCAG minimum

Every pair below is measured in light and dark from the token file. The orange is deep ember on light surfaces, so white button labels and orange links pass on the page and on panels; dark surfaces lift it to the logo's orange with dark labels. Status fills carry a deep label of their own hue, and the soft badges use that label on a 10% tint (light) or the fill on a 15% tint (dark). Each factory accent's label passes on its own tint and soft fill, the card and the page; its base keeps 3:1 for graphics. Hairlines, panel edges and the menu tint are decorative: rings and shadows carry those edges, so they have no minimum.

Copy on surfaces

  • foreground on background

    Titles and body on the page · Body text · AA 4.5:1

    Aa
    11.03AAA
    Aa
    19.16AAA

  • foreground on card

    Copy inside panels · Body text · AA 4.5:1

    Aa
    12.21AAA
    Aa
    16.14AAA

  • muted-foreground on background

    Descriptions on the page · Body text · AA 4.5:1

    Aa
    7.02AAA
    Aa
    9.79AAA

  • muted-foreground on card

    Descriptions in panels · Body text · AA 4.5:1

    Aa
    7.76AAA
    Aa
    8.25AAA

  • muted-foreground on muted

    Captions on quiet fills (measured over the page, the darker case) · Body text · AA 4.5:1

    Aa
    6.39AA
    Aa
    8.96AAA

  • accent-foreground on accent

    Highlighted menu item · Body text · AA 4.5:1

    Aa
    11.09AAA
    Aa
    13.95AAA

  • invert-foreground on invert

    Copy on a dark band; the neutral button · Body text · AA 4.5:1

    Aa
    15.94AAA
    Aa
    11.53AAA

Brand and actions

  • brand-foreground on brand

    Brand button label (the audit call to action) · Body text · AA 4.5:1

    Aa
    5.69AA
    Aa
    8.44AAA

  • primary-foreground on primary

    Primary button label (the ink) · Body text · AA 4.5:1

    Aa
    12.21AAA
    Aa
    18.57AAA

  • primary on card

    Links inside panels · Body text · AA 4.5:1

    Aa
    12.21AAA
    Aa
    16.14AAA

  • primary on background

    Links on the page · Body text · AA 4.5:1

    Aa
    11.03AAA
    Aa
    19.16AAA

  • secondary-foreground on secondary

    Secondary badge and ink-tint fills (the secondary button is on the card, below) · Body text · AA 4.5:1

    Aa
    10.65AAA
    Aa
    11.44AAA

  • destructive-foreground on destructive

    Destructive button label · Body text · AA 4.5:1

    Aa
    6.08AA
    Aa
    6.82AA

  • destructive on card

    Error text in a form · Body text · AA 4.5:1

    Aa
    6.08AA
    Aa
    5.93AA

  • destructive on background

    Error text on the page · Body text · AA 4.5:1

    Aa
    5.49AA
    Aa
    7.03AAA

Status

  • success-foreground on success/10

    Soft badge (reUI success-light; dark uses text-success on success/15) · Body text · AA 4.5:1

    Aa
    12.25AAA
    Aa
    5.65AA

  • warning-foreground on warning/10

    Soft badge (reUI warning-light; dark uses text-warning on warning/15) · Body text · AA 4.5:1

    Aa
    11.76AAA
    Aa
    6.99AA

  • info-foreground on info/10

    Soft badge (reUI info-light; dark uses text-info on info/15) · Body text · AA 4.5:1

    Aa
    11.69AAA
    Aa
    5.39AA

  • destructive on destructive/10

    Soft badge (reUI destructive-light, ui badge destructive) · Body text · AA 4.5:1

    Aa
    5.16AA
    Aa
    4.77AA

  • primary on primary/10

    Soft badge (reUI primary-light) · Body text · AA 4.5:1

    Aa
    10.23AAA
    Aa
    10.29AAA

  • success-foreground on success

    Solid fill and reUI solid badge · Body text · AA 4.5:1

    Aa
    5.71AA
    Aa
    5.71AA

  • warning-foreground on warning

    Solid fill and reUI solid badge · Body text · AA 4.5:1

    Aa
    7.03AAA
    Aa
    7.03AAA

  • info-foreground on info

    Solid fill and reUI solid badge · Body text · AA 4.5:1

    Aa
    5.17AA
    Aa
    5.17AA

Page ending

  • foreground on surface-cta

    Titles and body on the white call to action band · Body text · AA 4.5:1

    Aa
    12.21AAA
    Aa
    17.76AAA

  • muted-foreground on surface-cta

    Descriptions and footer links on the call to action band · Body text · AA 4.5:1

    Aa
    7.76AAA
    Aa
    9.08AAA

  • primary-shade on surface-cta

    Orange links on the call to action band · Body text · AA 4.5:1

    Aa
    12.21AAA
    Aa
    17.76AAA

  • primary on surface-cta

    Orange button edge and icons on the call to action band · Graphics · 3:1

    12.21AAA
    17.76AAA

  • footer-foreground on surface-footer

    Titles and body on the human footer (the nav bar's ink) · Body text · AA 4.5:1

    Aa
    14.68AAA
    Aa
    14.68AAA

  • footer-muted on surface-footer

    Descriptions and footer links on the human footer · Body text · AA 4.5:1

    Aa
    8.58AAA
    Aa
    8.58AAA

  • footer-link on surface-footer

    Orange links on the human footer · Body text · AA 4.5:1

    Aa
    7.20AAA
    Aa
    7.20AAA

  • brand-orange-light on surface-footer

    Orange button edge and icons on the human footer · Graphics · 3:1

    6.87AA
    6.87AA

  • footer-foreground on surface-footer-seo

    Titles and body on the SEO footer (a step lighter ink) · Body text · AA 4.5:1

    Aa
    12.95AAA
    Aa
    12.29AAA

  • footer-muted on surface-footer-seo

    Descriptions and footer links on the SEO footer · Body text · AA 4.5:1

    Aa
    7.57AAA
    Aa
    7.18AAA

  • footer-link on surface-footer-seo

    Orange links on the SEO footer · Body text · AA 4.5:1

    Aa
    6.35AA
    Aa
    6.02AA

  • brand-orange-light on surface-footer-seo

    Orange button edge and icons on the SEO footer · Graphics · 3:1

    6.06AA
    5.75AA

Hero surfaces

  • ink-foreground on surface-ink

    Titles and body on the ink index hero (an option on trial) · Body text · AA 4.5:1

    Aa
    15.11AAA
    Aa
    15.11AAA

  • ink-muted on surface-ink

    The eyebrow and lede on the ink index hero (an option on trial) · Body text · AA 4.5:1

    Aa
    10.46AAA
    Aa
    10.46AAA

  • ink-primary-foreground on ink-primary

    Primary button label on the nav bar, ink bands and footers · Body text · AA 4.5:1

    Aa
    4.62AA
    Aa
    4.62AA

  • ink-primary on surface-ink

    Primary button fill on the ink (its white label carries it) · Decorative · no minimum

    3.47No minimum
    3.47No minimum

Secondary button on every surface

  • control-foreground on control-fill

    Secondary button label on its fill, on every light surface · Body text · AA 4.5:1

    Aa
    12.21AAA
    Aa
    17.77AAA

  • control-border on stage-sage-deep

    Secondary button edge on the sage hero · Graphics · 3:1

    3.55AA large
    4.27AA large

  • control-border on stage-dawn-deep

    Secondary button edge on the dawn hero · Graphics · 3:1

    3.55AA large
    4.27AA large

  • control-border on surface-cta

    Secondary button edge on the call to action band · Graphics · 3:1

    4.85AA
    3.88AA large

  • ink-control-border on surface-ink

    Secondary button edge on the ink nav bar and the ink hero · Graphics · 3:1

    4.77AA
    4.77AA

  • footer-control-border on surface-footer

    Secondary button edge on the human footer and the footer hero · Graphics · 3:1

    4.68AA
    4.68AA

  • footer-control-border on surface-footer-seo

    Secondary button edge on the SEO footer · Graphics · 3:1

    4.39AA large
    4.27AA large

  • surface-footer on footer-foreground

    Secondary button label on its light fill, on the human footer · Body text · AA 4.5:1

    Aa
    14.68AAA
    Aa
    14.68AAA

  • surface-footer-seo on footer-foreground

    Secondary button label on its light fill, on the SEO footer · Body text · AA 4.5:1

    Aa
    12.95AAA
    Aa
    12.29AAA

Factory accents

  • accent-product-text on accent-product-tint

    Product pill and badge label · Body text · AA 4.5:1

    Aa
    6.63AA
    Aa
    9.12AAA

  • accent-product-text on accent-product-soft

    Product pill on hover · Body text · AA 4.5:1

    Aa
    5.70AA
    Aa
    7.47AAA

  • accent-product-text on card

    Product label inside panels · Body text · AA 4.5:1

    Aa
    7.52AAA
    Aa
    10.26AAA

  • accent-product-text on background

    Product label on the page · Body text · AA 4.5:1

    Aa
    6.80AA
    Aa
    12.18AAA

  • accent-product-base on card

    Product illustration fill and chart series · Graphics · 3:1

    5.10AA
    6.16AA

  • accent-acquisition-text on accent-acquisition-tint

    Acquisition pill and badge label · Body text · AA 4.5:1

    Aa
    6.14AA
    Aa
    9.68AAA

  • accent-acquisition-text on accent-acquisition-soft

    Acquisition pill on hover · Body text · AA 4.5:1

    Aa
    5.36AA
    Aa
    7.76AAA

  • accent-acquisition-text on card

    Acquisition label inside panels · Body text · AA 4.5:1

    Aa
    6.89AA
    Aa
    11.10AAA

  • accent-acquisition-text on background

    Acquisition label on the page · Body text · AA 4.5:1

    Aa
    6.22AA
    Aa
    13.17AAA

  • accent-acquisition-base on card

    Acquisition illustration fill and chart series · Graphics · 3:1

    3.78AA large
    7.18AAA

  • accent-lifetime-value-text on accent-lifetime-value-tint

    Lifetime value pill and badge label · Body text · AA 4.5:1

    Aa
    6.49AA
    Aa
    9.38AAA

  • accent-lifetime-value-text on accent-lifetime-value-soft

    Lifetime value pill on hover · Body text · AA 4.5:1

    Aa
    5.55AA
    Aa
    7.73AAA

  • accent-lifetime-value-text on card

    Lifetime value label inside panels · Body text · AA 4.5:1

    Aa
    7.39AAA
    Aa
    10.50AAA

  • accent-lifetime-value-text on background

    Lifetime value label on the page · Body text · AA 4.5:1

    Aa
    6.68AA
    Aa
    12.46AAA

  • accent-lifetime-value-base on card

    Lifetime value illustration fill and chart series · Graphics · 3:1

    4.82AA
    6.51AA

  • accent-team-text on accent-team-tint

    Team pill and badge label · Body text · AA 4.5:1

    Aa
    6.20AA
    Aa
    10.51AAA

  • accent-team-text on accent-team-soft

    Team pill on hover · Body text · AA 4.5:1

    Aa
    5.46AA
    Aa
    8.53AAA

  • accent-team-text on card

    Team label inside panels · Body text · AA 4.5:1

    Aa
    6.92AA
    Aa
    11.92AAA

  • accent-team-text on background

    Team label on the page · Body text · AA 4.5:1

    Aa
    6.25AA
    Aa
    14.15AAA

  • accent-team-base on card

    Team illustration fill and chart series · Graphics · 3:1

    3.39AA large
    9.12AAA

  • accent-technology-text on accent-technology-tint

    Technology pill and badge label · Body text · AA 4.5:1

    Aa
    8.18AAA
    Aa
    9.55AAA

  • accent-technology-text on accent-technology-soft

    Technology pill on hover · Body text · AA 4.5:1

    Aa
    7.08AAA
    Aa
    7.75AAA

  • accent-technology-text on card

    Technology label inside panels · Body text · AA 4.5:1

    Aa
    9.23AAA
    Aa
    10.84AAA

  • accent-technology-text on background

    Technology label on the page · Body text · AA 4.5:1

    Aa
    8.34AAA
    Aa
    12.87AAA

  • accent-technology-base on card

    Technology illustration fill and chart series · Graphics · 3:1

    5.56AA
    6.40AA

  • accent-finance-text on accent-finance-tint

    Finance pill and badge label · Body text · AA 4.5:1

    Aa
    6.63AA
    Aa
    10.03AAA

  • accent-finance-text on accent-finance-soft

    Finance pill on hover · Body text · AA 4.5:1

    Aa
    5.79AA
    Aa
    8.05AAA

  • accent-finance-text on card

    Finance label inside panels · Body text · AA 4.5:1

    Aa
    7.43AAA
    Aa
    11.51AAA

  • accent-finance-text on background

    Finance label on the page · Body text · AA 4.5:1

    Aa
    6.71AA
    Aa
    13.66AAA

  • accent-finance-base on card

    Finance illustration fill and chart series · Graphics · 3:1

    4.08AA large
    7.78AAA

Stage surfaces

  • foreground on stage-dawn

    Copy on the dawn stage · Body text · AA 4.5:1

    Aa
    12.21AAA
    Aa
    16.14AAA

  • muted-foreground on stage-dawn-deep

    Muted copy where the dawn stage deepens · Body text · AA 4.5:1

    Aa
    5.68AA
    Aa
    9.99AAA

  • foreground on stage-dusk

    Copy on the dusk stage · Body text · AA 4.5:1

    Aa
    12.21AAA
    Aa
    16.14AAA

  • muted-foreground on stage-dusk-deep

    Muted copy where the dusk stage deepens · Body text · AA 4.5:1

    Aa
    5.68AA
    Aa
    9.99AAA

  • foreground on stage-mist

    Copy on the mist stage · Body text · AA 4.5:1

    Aa
    12.21AAA
    Aa
    16.14AAA

  • muted-foreground on stage-mist-deep

    Muted copy where the mist stage deepens · Body text · AA 4.5:1

    Aa
    5.68AA
    Aa
    9.99AAA

  • foreground on stage-sand

    Copy on the sand stage · Body text · AA 4.5:1

    Aa
    12.21AAA
    Aa
    16.14AAA

  • muted-foreground on stage-sand-deep

    Muted copy where the sand stage deepens · Body text · AA 4.5:1

    Aa
    5.68AA
    Aa
    9.99AAA

  • foreground on stage-sage

    Copy on the sage stage · Body text · AA 4.5:1

    Aa
    12.21AAA
    Aa
    16.14AAA

  • muted-foreground on stage-sage-deep

    Muted copy where the sage stage deepens · Body text · AA 4.5:1

    Aa
    5.68AA
    Aa
    9.99AAA

Graphics and edges

  • ring on background

    Focus ring on the page · Graphics · 3:1

    3.28AA large
    8.23AAA

  • ring on card

    Focus ring inside panels · Graphics · 3:1

    3.63AA large
    6.93AA

  • chart-1 on card

    Chart series on a panel · Graphics · 3:1

    5.56AA
    6.40AA

  • chart-2 on card

    Chart series on a panel · Graphics · 3:1

    3.60AA large
    4.75AA

  • chart-3 on card

    Chart series on a panel · Graphics · 3:1

    3.78AA large
    7.18AAA

  • chart-4 on card

    Chart series on a panel · Graphics · 3:1

    5.97AA
    5.11AA

  • chart-5 on card

    Chart series on a panel · Graphics · 3:1

    4.82AA
    6.51AA

  • accent on background

    Menu highlight against the page; a tint, not an edge · Decorative · no minimum

    1.10No minimum
    1.09No minimum

  • border on background

    Hairlines and rails (decorative) · Decorative · no minimum

    1.19No minimum
    1.25No minimum

  • control-border on background

    The edge of a button, input or toggle on the page · Graphics · 3:1

    4.38AA large
    4.18AA large

  • control-border on card

    The edge of a button, input or toggle in a panel · Graphics · 3:1

    4.85AA
    3.52AA large

  • card on background

    White card against the light page: at least 1.08:1 (contrast.test.ts); the ring and shadow carry the edge · Decorative · no minimum

    1.11No minimum
    1.19No minimum

  • text-7xl

    72px / 1

    Decisions become fuel

    Display: the largest hero headline

  • text-6xl

    60px / 1

    Decisions become fuel

    Page hero title (desktop)

  • text-5xl

    48px / 1

    Decisions become fuel

    h1: page hero title (phone)

  • text-4xl

    36px / 40px

    Decisions become fuel

    h2: section title (desktop)

  • text-3xl

    30px / 36px

    Decisions become fuel

    h2: section title (phone)

  • text-2xl

    24px / 32px

    Decisions become fuel

    h3: big numbers, card titles

  • text-xl

    20px / 28px

    Decisions become fuel

    h4: sub-heads in long text

  • text-lg

    18px / 28px

    Decisions become fuel

    Lead: the paragraph under a title

  • text-base

    16px / 24px

    Decisions become fuel

    Body copy

  • text-sm

    14px / 20px

    Decisions become fuel

    UI, buttons; mono eyebrow

  • text-xs

    12px / 16px

    Decisions become fuel

    Captions, badges, table meta

rounded-xs · 4px

Inner chips

rounded-sm · 6px

Badges

rounded-md · 8px

Buttons, inputs, selects

rounded-lg · 10px

The base (--radius)

rounded-xl · 11px

Cards, the inner card of a stack

rounded-2xl · 12px

Panel, Stage, CardStack

rounded-3xl · 14px

Large feature frames

rounded-4xl · 16px

FrameTop

rounded-full · 9999px

Pills, avatars, dots

shadow-card

A card at rest

shadow-card-hover

A card on hover

shadow-overlay

A menu, popover, dialog or the front card of a stack

One column, one rhythm

Content sits in a single column, max-w-7xl 2xl:max-w-[100rem] px-6, with no rails on the page edges. Every section pads py-16 md:py-24.

py-16 · md:py-24
px-6
px-6
py-16 · md:py-24

max-w-7xl · 1280px (1600px on 2xl)

The 4px step

Every padding, margin, gap and size is a multiple of --spacing: 0.25rem. Stay on these steps.

  • 14px
  • 28px
  • 312px
  • 416px
  • 624px
  • 832px
  • 1248px
  • 1664px
  • 2496px
Primitives

Every primitive, its variants and states

One row per primitive from packages/ui, rendered live: actions, inputs, navigation, overlays, feedback and data display.

Light

  • variant="default"

    Primary, in the ink: the main action of a view

  • variant="brand"

    The one brand call to action (Start the free audit), in orange

  • variant="secondary"

    Its partner beside it (Book a call next to the audit)

  • variant="outline"

    A quiet action on the card colour

  • variant="ghost"

    Toolbar and quiet actions

  • variant="link"

    Inline action in running text

  • variant="destructive"

    Delete, cancel a plan

Dark

  • variant="default"

    Primary, in the ink: the main action of a view

  • variant="brand"

    The one brand call to action (Start the free audit), in orange

  • variant="secondary"

    Its partner beside it (Book a call next to the audit)

  • variant="outline"

    A quiet action on the card colour

  • variant="ghost"

    Toolbar and quiet actions

  • variant="link"

    Inline action in running text

  • variant="destructive"

    Delete, cancel a plan

Sizes

Default (h-9) everywhere; xs and sm in dense toolbars and tables, lg for a single hero action.

Pairing

At most one primary (the ink) per view. Its partner is outline, never a second primary. The orange brand button appears only for the audit.

Colour

Orange means act: the one primary button, links and focus. Ink blue is the quiet partner for soft buttons and chips. Status colours only ever mean state. Text reaches 4.5:1 and graphics 3:1 on every surface, in light and dark.

Link arrows

A horizontal arrow goes somewhere on this site. An arrow up and to the right opens another site in a new tab. Never mix them up.

Light

badge · plain

defaultsecondaryoutlineghostlink

badge · status · light (preferred)

successwarninginfodestructivefocus

badge · status · solid

successwarninginfodestructiveinvert
Dark

badge · plain

defaultsecondaryoutlineghostlink

badge · status · light (preferred)

successwarninginfodestructivefocus

badge · status · solid

successwarninginfodestructiveinvert
Components

The components, live

One tile per component in packages/ui/src/components, with the site's own logo, books and tools.

  • Logologo
  • The operating system for an autonomous business
    Eyebroweyebrow

  • A section of a detail page

    Its anchor, a title with a hairline, then the content.

    ContentPartcontent-part
  • DetailRecordSkeletondetail-record-skeleton
  • Crumbscrumbs
  • DetailTabsdetail-tabs

    1. Article6 min

      Find the value your client pays for

      Name the outcome the client buys before you name a price.

    ArticleRow, ArticleListarticle-row
  • Browse the docs

    Browse the docs

    DocsTree, PrivateBadgedocs-nav

  • Changelog

    0 pages

    Nothing here yet
    Open Changelog
    DocsCategoryCard, DocsPageRowdocs-cards

  • What it does

    A readable section, in full.

    Matching rules

    Log in to read this section.

    Log in to read
    DocsSectionsdocs-sections
  • How it works

    Decisions become the fuel for agents

    Sectionsection
  • Pagerpager
  • ThemeSwitchtheme-switch
  • Brand kit

    One brand

    The hero text of every page type, with the breadcrumb inside.

    HeroTexthero-text
  • ColourFade, FrameTophero-backdrop
  • On this pageLogo
    OnThisPage (list)on-this-page

  • Your six factory scores

    Filled in by the audit

    • Value creation
      Level ?
    • Client acquisition
      Question 1
    • Value delivery
      Level ?
    • People
      Level ?
    • Technology
      Level ?
    • Finance
      Level ?
    FactoryScorePreviewfactory-score-preview
  • SearchButtonsite-nav-menus
  • 6sense logo6S
    ToolLogotool-logo
  • 6sense logo
    ToolLogoPlatetool-logo-plate
  • 4.5Free planFrom $20/mo
    CardRating, CardChiptool-card
  • ToolIndexCardtool-index-card

  • We may earn a commission when you buy through these links, at no extra cost to you. Affiliate disclosure

    AffiliateNoteaffiliate-note
  • YesNoNot known yetFree plan

    Some links are affiliate links: we may earn a commission at no cost to you. It never decides a ranking. How we work with partners

    YesNo, Chip, ToolAffiliateNotetool-facts
  • Read my review
    BookActionsbook-actions
  • CardCoverbook-cover

  • A review in Markdown.

    • With a list
    • And bold text
    Proseprose
  • 21 min

    Example video

    A. Creator
    Watch it
    VideoCardvideo-card
  • VideoSlotvideo-slot
  • Visit
    VisitButtonvisit-button
  • Starts at
    $24/mo
    Free plan
    Yes
    MCP server
    No
    SSO
    Not known yet
    ToolSpecListtool-spec-card

  • Create a free account to see more results

    Create a free account
    LeadGatelead-gate
  • ViewTogglecollection-toolbar
  • CoverFancover-fan
  • AcquisitionFinance
    DotLabelbook-card
  • On track
    EBCAA
    Client acquisition
    Status, owners, factoryrecord-parts

  • Bottleneck: Client acquisition

    EU

    Lead Operator

    Client acquisition

    PO

    Specialist Operator

    Value creation

    OperatorMatchoperator-match

  • Pricing page layout

    Open
    Asked byBABuild agent

    Should the pricing page lead with the platform or the AI employees?

    Most visitors arrive from the audit and already know the platform.
    DecisionQuestionCarddecision-question-card
    • Only in the side cardChosenOne update fixes every page.
      EJ
      1 vote
    • In the review tooReaders see it where they read.0 votes
    DecisionOptionRowdecision-parts
  • Decisionsapp.solidgrowth.com/decisions
    Tool prices live only in the side card
    ProductWindow, ProductPanelproduct-window
  • RuleVersion 2

    Prices appear only in a tool page's side card.

    StoryCardstory-card
  • Value creationAll six factories
    FactoryMark, FactoryLabelfactory-mark
  • SkeletonLinesskeletons
  • x
    • One button style everywhere5 Oct

      Four variants on one size scale

    • Every page ends dark5 Oct

      The footers in dark teal

    RecordChecklist, RecordDecisionListrecord-lists
    1. EB

      Ewoud Boogaard commented · 5 Oct

      The secondary navbar is what I created.

    2. C

      Claude Moved the section bar to plain links. · 5 Oct

    RecordActivityFeedrecord-activity
  • SidePanelside-panel
  • About: Deliverables
    What is overdue?
    Agent
    Nothing. Two are due this week.
    ChatPanelchat-panel
  • Dark blue

    Due this week

    Three tasks, one owner each

    3
    • Send the Q4 proposalTue
    • Review the onboarding checklistWed
    • Confirm the renewal with AcmeFri

    Decisions waiting

    Ready for you to decide

    2
    • Hire a second engineerMon
    • Move to annual billingThu

    Revenue

    Last six weeks

    Up 12 percent on the six weeks before.

    At risk

    Goals behind plan

    • Reach 50 customersQ4
    • Ship the onboarding flowQ4

    General

    How this workspace is set up.

    Name
    Solid Growth
    Currency
    Euro
    Cycle length
    13 weeks
    Sprint length
    2 weeks
    Opened
    3 March 2026
    Your role
    Owner

    The Mom Test

    How to talk to customers and learn something, even when they want to be nice.

    Author
    Rob Fitzpatrick
    Factory
    All six factories
    Airtable

    Airtable

    Spreadsheet simplicity with the power of a database.

    Category
    Databases
    Price
    From $20/mo
    Free plan
    Yes
    Airtable

    Airtable

    Starts at
    $20/mo
    Free plan
    Yes
    MCP server
    Yes
    Light

    Due this week

    Three tasks, one owner each

    3
    • Send the Q4 proposalTue
    • Review the onboarding checklistWed
    • Confirm the renewal with AcmeFri

    Decisions waiting

    Ready for you to decide

    2
    • Hire a second engineerMon
    • Move to annual billingThu

    Revenue

    Last six weeks

    Up 12 percent on the six weeks before.

    At risk

    Goals behind plan

    • Reach 50 customersQ4
    • Ship the onboarding flowQ4

    General

    How this workspace is set up.

    Name
    Solid Growth
    Currency
    Euro
    Cycle length
    13 weeks
    Sprint length
    2 weeks
    Opened
    3 March 2026
    Your role
    Owner

    The Mom Test

    How to talk to customers and learn something, even when they want to be nice.

    Author
    Rob Fitzpatrick
    Factory
    All six factories
    Airtable

    Airtable

    Spreadsheet simplicity with the power of a database.

    Category
    Databases
    Price
    From $20/mo
    Free plan
    Yes
    Airtable

    Airtable

    Starts at
    $20/mo
    Free plan
    Yes
    MCP server
    Yes
    The card: dark blue or light?layer-card
  • Dark blue

    Log in to Solid Growth

    Welcome back.

    or
    Need an account? Sign upPrivacy
    Light

    Log in to Solid Growth

    Welcome back.

    or
    Need an account? Sign upPrivacy
    Form card: dark blue or light?message-screen
  • Stage
    Build
    Status
    Active
    Progress
    x
    3/8
    Tags
    SEOVideo
    PropertyValueproperty-values
  • PropertyEditorproperty-editors
  • PropertyFieldproperty-field

  • Priority
    Owner
    Due
    Fee
    Hours
    Done
    x
    2/4

    Client

    Tags
    Internal
    Link

    PropertyListproperty-list
  • PropertyPillproperty-pill
  • StageIconstage-icon
  • PriorityIconpriority-icon
  • ColumnChartcolumn-chart
  • BarListbar-list
  • Organic traffic62%
    Direct traffic18%
    ShareBarshare-bar

  • Revenue+14%

    Per year, in millions

    ChartCardchart-card
  • RadarChartradar-chart
  • Revenue
    DonutChartdonut-chart
  • TrendCharttrend-chart
  • RadialChartradial-chart
  • StackedBarstacked-bar
  • SegmentedArcsegmented-arc
  • TargetCharttarget-chart
    • Created
    • Finished
    ChartKeychart-parts
  • LazyTrendChart (loads after the page)lazy-charts
  • €12.4K
    Revenue in September
    −€1.2K
    Result in September
    46%
    Return after a certificate expires
    StatTilestat-tile
  • ViewBarview-bar
  • Loading
    CollectionViewdata-engine-demo
  • SGADN
    SwitcherTrigger, SwitcherMark, SwitcherItemswitcher
  • ChoiceMenuchoice-menu
  • HS

    HubSpot

    Read your contacts and deals.

    ConnectionTileconnection-tile

  • Preferences

    Choose how the product looks.

    Appearance

    Theme

    Choose a theme for this device.

    SettingsPagesettings-parts
  • SwitcherPillswitcher-pill
  • AskButtonask-button

Lists: one table for every list

The tools bar, the table and the record card as one block, on 2,000 made-up contacts held in your browser. Filter, sort, group and choose columns in the bar; click a name to open the card beside the table; edit in a cell or in the card and undo with Cmd or Ctrl + Z. Nothing is saved.

Loading

Properties: every kind

One record card's property list with every kind of property the lists have, each once with a value and once empty. Click a value to edit it where it stands; Backspace or Delete clears it. The list is read from the catalogue, so a new kind shows up here by itself. Nothing is saved.

title
text
longText
code
url
email
phone
number
percent
duration
money
progress
x
3/8
date
dateRange
timestamp
person
people
stage
status
priority
select
tags
boolean
relation
image
?

title
text
longText
code
url
email
phone
number
percent
duration
money
progress
Empty
date
dateRange
timestamp
No date
person
people
stage
status
priority
select
tags
boolean
relation
image
No picture
Cards

One card per thing

Every kind of thing the site shows, as the card its pages use, with real content. Each is one of the card archetypes: a stage, a pill, a title, a description and a meta line.

Side panels: A, B or C

Click a row, the bell or the chat button in the miniature. The same panel opens with a record, the notifications or the chat; switch how it behaves.

Deliverables

Everything the team and the agents deliver this cycle.
DeliverableStageOwnerDue
Trust rebuild: customer letterIn progressEwoudFri 9 Oct
Weekly cash reviewIn reviewFinance agentMon 12 Oct
Free audit follow-up delayTo doAcquisition agentWed 14 Oct
Onboarding checklist v2To doEwoudFri 16 Oct
Outbound budget for Q4DoneFinance agentTue 6 Oct
  • A: you can keep working on the page and in the bar while the panel is open, and clicking the next row just swaps what the panel shows.
  • B: the page goes dim and locked until you close the panel, so you look at one thing at a time but cannot click a second row.
  • C: the panel covers everything, the bar included, so you cannot reach the menu or switch workspace until you close it.

Recommended: the chat is the same panel, opened from the bar, and knows the page you are on. A record's own conversation stays a section on the record.

Properties card: which frame?

Scroll inside each miniature detail page. Option 1 is a light card whose shadow grows when it sticks, Option 2 is a plain card that gets a blue outline once it has scrolled off the header band, and Today is the dark frame.

Scroll inside each frame: the card sticks, folds to its compact version and, in the two options, answers once it has left the header band.

Option 1: light card, stronger shadow when stuck

A white card with a thin quiet edge and no dark frame. When it sticks while you scroll, its shadow gets a little stronger.

Decisions / Pricing

Start with one flat plan for the first year

The team compared the two ways of pricing the first year and agreed to start with a single flat plan, so that the first customers do not have to choose between tiers before they have seen the product.

Usage based pricing stays on the list for later. It needs the metering to be trusted, and the first invoices will be written by hand until the agents handle them.

The decision is logged here with its reasons, so the agents that prepare quotes can read it and follow it without asking again. A later change is a new decision that replaces this one.

Open points are tracked as work under the goal. None of them blocks the launch, but two of them need an owner before the end of the month.

Customers who joined during the pilot keep the price they were promised. This is written into the letter that goes out on Friday, and the finance agent checks every invoice against it.

The next review is in three months, or earlier when the average discount given in sales calls goes above one in five deals.

The team compared the two ways of pricing the first year and agreed to start with a single flat plan, so that the first customers do not have to choose between tiers before they have seen the product.

Usage based pricing stays on the list for later. It needs the metering to be trusted, and the first invoices will be written by hand until the agents handle them.

The decision is logged here with its reasons, so the agents that prepare quotes can read it and follow it without asking again. A later change is a new decision that replaces this one.

Open points are tracked as work under the goal. None of them blocks the launch, but two of them need an owner before the end of the month.

Customers who joined during the pilot keep the price they were promised. This is written into the letter that goes out on Friday, and the finance agent checks every invoice against it.

The next review is in three months, or earlier when the average discount given in sales calls goes above one in five deals.

Pricing for the first year

Decision

Date
6 Oct 2026
Owner
Ewoud
Status
Decided
Stage
Go to market
Priority
High

Option 2: blue outline once scrolled

A plain white card while it overlaps the header band. Once it has scrolled onto the light page, a thin dark-blue rounded outline appears around it.

Decisions / Pricing

Start with one flat plan for the first year

The team compared the two ways of pricing the first year and agreed to start with a single flat plan, so that the first customers do not have to choose between tiers before they have seen the product.

Usage based pricing stays on the list for later. It needs the metering to be trusted, and the first invoices will be written by hand until the agents handle them.

The decision is logged here with its reasons, so the agents that prepare quotes can read it and follow it without asking again. A later change is a new decision that replaces this one.

Open points are tracked as work under the goal. None of them blocks the launch, but two of them need an owner before the end of the month.

Customers who joined during the pilot keep the price they were promised. This is written into the letter that goes out on Friday, and the finance agent checks every invoice against it.

The next review is in three months, or earlier when the average discount given in sales calls goes above one in five deals.

The team compared the two ways of pricing the first year and agreed to start with a single flat plan, so that the first customers do not have to choose between tiers before they have seen the product.

Usage based pricing stays on the list for later. It needs the metering to be trusted, and the first invoices will be written by hand until the agents handle them.

The decision is logged here with its reasons, so the agents that prepare quotes can read it and follow it without asking again. A later change is a new decision that replaces this one.

Open points are tracked as work under the goal. None of them blocks the launch, but two of them need an owner before the end of the month.

Customers who joined during the pilot keep the price they were promised. This is written into the letter that goes out on Friday, and the finance agent checks every invoice against it.

The next review is in three months, or earlier when the average discount given in sales calls goes above one in five deals.

Pricing for the first year

Decision

Date
6 Oct 2026
Owner
Ewoud
Status
Decided
Stage
Go to market
Priority
High

Today: dark frame

The card as every detail page has it now: a dark-blue surface around the white panel.

Decisions / Pricing

Start with one flat plan for the first year

The team compared the two ways of pricing the first year and agreed to start with a single flat plan, so that the first customers do not have to choose between tiers before they have seen the product.

Usage based pricing stays on the list for later. It needs the metering to be trusted, and the first invoices will be written by hand until the agents handle them.

The decision is logged here with its reasons, so the agents that prepare quotes can read it and follow it without asking again. A later change is a new decision that replaces this one.

Open points are tracked as work under the goal. None of them blocks the launch, but two of them need an owner before the end of the month.

Customers who joined during the pilot keep the price they were promised. This is written into the letter that goes out on Friday, and the finance agent checks every invoice against it.

The next review is in three months, or earlier when the average discount given in sales calls goes above one in five deals.

The team compared the two ways of pricing the first year and agreed to start with a single flat plan, so that the first customers do not have to choose between tiers before they have seen the product.

Usage based pricing stays on the list for later. It needs the metering to be trusted, and the first invoices will be written by hand until the agents handle them.

The decision is logged here with its reasons, so the agents that prepare quotes can read it and follow it without asking again. A later change is a new decision that replaces this one.

Open points are tracked as work under the goal. None of them blocks the launch, but two of them need an owner before the end of the month.

Customers who joined during the pilot keep the price they were promised. This is written into the letter that goes out on Friday, and the finance agent checks every invoice against it.

The next review is in three months, or earlier when the average discount given in sales calls goes above one in five deals.

Pricing for the first year

Decision

Date
6 Oct 2026
Owner
Ewoud
Status
Decided
Stage
Go to market
Priority
High

Numbers and charts

The stat row and one chart per question a report asks of its data, with the figures of a real audit: over time, ranking, comparison, part of a whole. One blue, a pale step for the contrast, orange only on the one mark a chart is about.

€34.4M
Revenue, last 12 months

Up 14%

194
Companies make 66% of it
€3.2M
Less from 63 large customers
46%
Return after a certificate expires

A company

Level per factory, from its audit

A person

Where their work went this cycle, in hours

An agent

Decisions it handled per factory

Revenue per year+14%

Over time, a few points

Confirmed bookings, by course date.

Website sessions per month

Over time, many points

October 2025 to September 2026. The peaks in October and May are paid pushes.

Who comes back when a certificate expires

Ranking

Five of the courses with the most expiring certificates in 2025.

What the CRM sees of the revenue

Comparison

September 2024 to September 2026.

194 companies make two thirds of the revenue

Part of a whole

Companies194 of 4,563
Revenue66% of €33.0M

The largest drops in spend−€3.2M

Ranking, a drop

Against the 12 months before.
Illustrations

The isometric set

Line-drawn, striped sides, token colours, gentle motion that stops for reduced-motion users.

<FactoriesHexagon /> motifs? label?

The six factories as the hexagon logo; each kite lifts in turn.

<DecisionMap /> value? label?

Decisions filling the hexagon; leave value out to let it loop.

<FactoryScene /> motif="product"

One factory: its motif standing on a plate.

<LineScene /> motif="acquisition" index={1} count={4}

One production line: a conveyor, this line's station lit.

<ConveyorScene /> motif="acquisition" count={6} highlight?={2}

A production line as a conveyor belt: one machine per playbook. Without highlight the machines light in turn; with it, that playbook's machine stands taller in the accent.

<GrowthCurve /> label?

Two curves pulling apart: with and without the system.

<IsoSlab /> · lit · accent tone · ghost

The building block of every scene; drawn inside an IsoCanvas.

Rules the code enforces

Each decision lives in a class, a token, a component or a test, so every page gets it and none can break it.

nightSky(factory) · night-sky-<factory>

Gradients behind cards run from the factory's accent to a darker shade of it, never to white, so white cards pop. The Biome plugin design-roles forbids a gradient that ends in white.

  • product
  • acquisition
  • lifetime-value
  • team
  • technology
  • finance

surface-cta · surface-footer · surface-footer-seo

Every page ends dark: the page, the call to action (S05c, the audit's first question inline), then the human footer on dark teal and the SEO footer a step deeper (PageEnding, rendered once by the layout, with the design system's SiteFooter). Text stays at WCAG AA on every step; system-rules.test.ts and the Page ending table below check it, light and dark.

surface-cta
surface-footer
surface-footer-seo

CardGo · CardCount · the four archetypes

A clickable card shows an arrow button in its bottom right, and a count carries an icon. Each archetype renders both itself; a page never adds them.

A card that links

The arrow is built in.

6 playbooks

FilterTabs (CollectionToolbar)

Every index (playbooks, tools, books, glossary) has one header: the six factories as folder tabs (P01a: icon, label, count), then the sort, the Filters menu, the gallery/list segmented control and the search on the same row, every control as high as a tab. It is the only filter style; every index uses the shared toolbar from @solid-growth/ui, and there is no count line: the count lives in the tabs. See /playbooks.

SectionBar · HeroScrollCue

The hero fills the first screen and ends on the section bar: items centred, no background until it sticks to the top, a round arrow down at its end. The hero carries a bouncing arrow instead of a call to action (it stops under reduced motion).

The cue, as every sales page hero shows it.

Header · SearchDialog

The nav bar is S09a, Surfe-like: four dropdowns (Product, Factories, Library, Company) centred; Log in, Book a call and the dark audit pill on the right. The menu hides on the way down and shows on the way up. Search is an icon button and Cmd/Ctrl + K, and opens the one Command K dialog (the app's too) over the page, with the site's actions and shortcuts; /search stays for the full list and as where a shared search link lands.

Search the site

Search the six factories and their production lines, every playbook, chapter, tool and book in the library, the glossary and the docs.

Opens with Ctrl or Cmd + K.

flow() · LineMachine · machinesFor(slug)

Isometric illustrations run from the bottom left to the top right, towards the audit button. Every one of the 24 production lines stands on the same floor with a composition of four machines no other line has, from the table in line-machine.tsx. A single-belt scene is cut to its belt so it fills its stage.

type-* roles on every heading

Every heading (h1 to h4) in the content family names a type role. The Biome plugin design-roles fails on a heading without one, and on raw text sizes and shadows.

Made with Solid Growth

This is what the brand kit looks like

The app keeps every company's brand like this: logo, colours light and dark, type, shape and voice, in one place. Agents read it before they make anything for you.

Solid Growth brand kit

The operating system for an autonomous business.

Made with Solid Growth

Preview

A small interface in the brand's colours, fonts and corners, light beside dark.

Light

The operating system for an autonomous business.

Solid Growth is one brand with several lines of business: agency, software and media.

Primary actionSecondary
Dark

The operating system for an autonomous business.

Solid Growth is one brand with several lines of business: agency, software and media.

Primary actionSecondary

Colours

Each token with its light and dark value and what it is for.

Surfaces

Pages, panels and quiet fills.

Light#f4f3f2
Dark#060604

--background

The page, off-white

Light#ffffff
Dark#1d1c19

--card

Panels, stages, popovers

Light#e9e9e7
Dark#141311

--muted

Quiet fills, hover rows

Light#e1e0de
Dark#21201f

--border

Hairlines, rails, dividers

Text

The colours copy is set in.

Light#37352f
Dark#f9f8f7

--foreground

Titles and body copy

Light#54524f
Dark#b6b4af

--muted-foreground

Descriptions, captions, eyebrows

Brand and accent

Action colours and their labels.

Light#37352f
Dark#f9f8f7

--primary

Main actions, links, focus · orange

Light#ffffff
Dark#0c0b08

--primary-foreground

Labels on orange

Light#deedfb
Dark#192f46

--secondary

Soft buttons and chips · ink blue

Light#133555
Dark#deedfb

--secondary-foreground

Labels on ink blue

Status

Only for state: success, warning, error, information.

Light#43c07a
Dark#43c07a

--success

Done, healthy

Light#f7b83d
Dark#f7b83d

--warning

Needs attention

Light#be2323
Dark#f66c6d

--destructive

Errors, removing

Charts

Series colours for charts and illustrations.

Light#3568b2
Dark#69a1e8

--chart-1

Technology blue

Light#e06000
Dark#e06000

--chart-2

Orange

Light#1f9197
Dark#48b7bd

--chart-3

Acquisition teal

Light#386695
Dark#6190c1

--chart-4

Ink

Light#b44f7b
Dark#df84a8

--chart-5

Lifetime value pink

Typography

Typefaces and a scale from a 16px base at a ratio of 1.25.

Aa

Geist

body · 400, 500, 600 · Headings and body text

Aa

Geist Mono

mono · 400, 500 · Labels, numbers and code

text-4xl · 49pxHero headline

Solid Growth

text-3xl · 39pxSection headlines

Solid Growth

text-2xl · 31pxPage titles

Solid Growth

text-xl · 25pxCard and section titles

Solid Growth

text-lg · 20pxLead paragraph

Solid Growth · The operating system for an autonomous business.

text-base · 16pxBody text

Solid Growth · The operating system for an autonomous business.

text-sm · 13pxLabels, secondary text

Solid Growth · The operating system for an autonomous business.

text-xs · 10pxSmall print, captions

Solid Growth · The operating system for an autonomous business.

Radius and spacing

One base radius drives every corner; spacing stays on the grid.

Radius · 10px

6px
10px
14px

Spacing · 4px grid

4
8
16
24
32

Voice

How the brand writes its name and sounds, and what it always and never does.

Name: One brand, written Solid Growth.

Plain, direct and calm. Short sentences, concrete words, no hype. Tone of voice is a decision too: a brand book is a set of slots, and each slot is filled by a decision.

plaindirectcalmconcrete

Do

  • Write the name as two capitalised words: Solid Growth.“Solid Growth”naming
  • Draw the hexagon with its orange gradient everywhere, app and website included.logo
  • Use the hexagon on its own as the favicon.logo
  • Use orange (primary) for action; keep status colours for state only.colour
  • Say what something does in plain words, in short sentences.voice

Don’t

  • Join, lower-case or shout the name.“SolidGrowth, Solid growth, SOLID GROWTH”naming
  • Use hype, buzzwords or exclamation marks.voice

Want this for your company?

Sign up and record your brand once. Every page, deck and asset made after that follows it.

Create a free accountStart the free audit

See where your company stands

Answer a few questions and get one part of your business audited for free: a score, where it is stuck, and your first three steps.

Free textQuestion 1 of 10

What's your company website?