Skip to content
StrictThemes

Themes / 03

Avion

A calm, precise theme for dashboards and tools. Cool greys, clear numbers, and one teal signal.

Install into a shadcn project
npx shadcn@latest add https://strictthemes.com/r/avion.json

01 / Preview

Stock shadcn components, this theme.

Avion

Ship the page, keep the system.

Every color, corner and typeface in this box comes from the theme's tokens. The components are stock shadcn.

NewDraftv1.2.0Failed
Invite a reviewer
They get read access to this project.
Colors on token96%
x
Spacing on scale88%
x
Type on scale100%
x

02 / Colors

Every color the theme allows.

  • primary

    #085F66 / #3FC1CC

  • on-primary

    #FFFFFF / #06262B

  • secondary

    #16242E / #E7EEF2

  • on-secondary

    #FFFFFF / #16242E

  • tertiary

    #F2A900

  • on-tertiary

    #16242E

  • neutral

    #5B6B76 / #93A4AF

  • background

    #F3F6F8 / #0C151B

  • surface

    #FFFFFF / #14212A

  • foreground

    #16242E / #E7EEF2

  • border

    #D5DDE3 / #243540

  • error

    #C2362B / #FF7A6B

  • success

    #1E7B4B / #4CC38A

Left: light mode. Right: dark mode.

03 / Typography

Five sizes. Nothing in between.

  • display

    Red Hat Display · 52px · weight 800 · line 1.05

    The quick brown fox

  • h1

    Red Hat Display · 34px · weight 700 · line 1.15

    The quick brown fox

  • h2

    Red Hat Display · 22px · weight 700 · line 1.3

    The quick brown fox

  • body

    Red Hat Text · 15px · weight 400 · line 1.55

    The quick brown fox

  • label

    Red Hat Mono · 12px · weight 500 · line 1.3

    The quick brown fox

04 / Shape and space

Corners and spacing.

  • sm

    4px

  • md

    8px

  • lg

    14px

  • xs

    4px

  • sm

    8px

  • md

    12px

  • lg

    20px

  • xl

    32px

  • 2xl

    56px

05 / Rules

What the strict block enforces.

Contrast
WCAG AA
Colors
Tokens only, within 0.02 of a token
Spacing
Scale only, plus 0, 1px, 2px
Corners
Scale only
Type
Scale only, declared fonts only
purple gradient
Not allowed
emoji icons
Not allowed
nested cards
Flagged
glow shadows
Not allowed

06 / Guidance

What your agent reads.

Overview

Avion is for interfaces people work in all day: dashboards, admin tools, status pages. It borrows from instrument panels. Everything has a fixed place, numbers are easy to compare, and color means something has changed. It should feel calm when all is well and make the one thing that needs attention obvious.

Colors

  • Primary (#085F66) is teal, for the main action, the selected item and links.
  • Secondary (#16242E) is a deep blue-black for secondary buttons and headings.
  • Tertiary (#F2A900) is amber, a caution signal. Use it for badges and warnings, never as decoration.
  • Neutral (#5B6B76) sets labels, units and secondary text.
  • Background (#F3F6F8) is the cool grey of the page. Surface (#FFFFFF) is the panel that sits on it.
  • Success (#1E7B4B) and Error (#C2362B) report state. Pair them with an icon or a word; never rely on color alone.

Typography

Red Hat Display sets headings, heavy and compact. Red Hat Text sets body text at 15px, sized for dense screens. Red Hat Mono sets labels, table figures, IDs and timestamps, so digits line up in columns. Labels are uppercase with wide tracking. Use tabular figures wherever numbers are compared.

Layout

A 12-column grid with 20px gutters. Content is grouped into panels on the grey page, with 20px between panels and 20px padding inside them. Spacing comes from the scale (4, 8, 12, 20, 32, 56). Keep related controls close and align numbers to the right. Density is a feature: do not pad a table to fill the screen.

Elevation & Depth

Two levels. Panels sit on the page by color alone: white on grey, with a 1px border. Things that float, such as menus, dialogs and tooltips, get one short, neutral shadow. No colored shadows and no blur.

Shapes

Rounded but exact: 4px for badges and small controls, 8px for buttons and inputs, 14px for panels. Status dots are the only circles.

Components

  • Buttons: teal for the main action in a panel, blue-black for the rest. Uppercase mono labels.
  • Cards (panels): white, 14px corners, 20px padding, 1px border. Each has a short label at the top.
  • Badges: amber for caution. Use the success and error colors for state.
  • Tables: mono figures, right-aligned numbers, a 1px row border, no zebra stripes.
  • Icons: 1.5px stroke line icons. Never emoji.

Do's and Don'ts

  • Do keep the page calm: most of the screen is grey, white and blue-black.
  • Do use color only for state and for the main action.
  • Do align numbers and use tabular figures.
  • Don't use gradients, glows or glass effects.
  • Don't use amber, green or red for decoration.
  • Don't introduce a color, size or radius that is not a token above.