Design standard

Color, type, and components for every dalix.dev site.

<link rel="stylesheet" href="https://colors.dalix.dev/dalix.css">

Color

Accent

Neutral

Status

Type

Aa

Archivo

Headings, body, and interface.

ABCDEFGHIJKLM abcdefghijklm 0123456789

  • Regular 400
  • Medium 500
  • Semibold 600
  • Bold 700
--font-sans
Aa

JetBrains Mono

Code, data, hex values, and the logo.

const accent = "#029386"; => != <= 0O 1lI

  • Regular 400
  • Medium 500
  • Bold 700
--font-mono
Aa

Monaspace Radon

Code comments and annotations.

// keep it plain, say it once

  • Regular 400
  • Medium 500
--font-note

Scale

--text-5xl60 / 1.04 / 700

Hero heading

--text-4xl48 / 1.08 / 700

Page heading

--text-3xl36 / 1.15 / 700

Section heading

--text-2xl24 / 1.3 / 700

Subsection heading

--text-xl21 / 1.3 / 700

Card title

--text-lg18 / 1.6 / 400

Lead text under a hero heading.

--text-base16 / 1.6 / 400

Body text. Keep lines under 80 characters.

--text-sm14 / 1.5 / 400, 600

Small text and form labels

--text-xs12 / 1.4 / 500

Captions

Shape

10px
Radius 10pxButtons, inputs, tags, code blocks, and the uncut corners of cards and tiles.
20px
Card chamfer 20pxTop-left and bottom-right. 1px border in --line, or --accent when highlighted.
d
12px
Tile chamfer 12pxThe same two corners, on a 48px teal square.

Spacing

--space-14
--space-28
--space-312
--space-416
--space-524
--space-632
--space-748
--space-864
--space-996
--space-10128

Components

Card

D

Default

A 1px line border. Use for static content.

.card
A

Accent

A teal border. Marks the current or recommended item.

.card.card-accent
L

Link

The whole card is a link. The border turns teal on hover and focus.

 a.card

Button

.btn.btn-primary
.btn
.btn.btn-text
.btn-sm
:disabled

Form

Used for deploy notifications.
Use lowercase letters, numbers, and hyphens.

Tag

Draft.tag
New.tag-accent
Live.tag-success
Degraded.tag-warning
Down.tag-danger

Text and code

Body text is --body on --canvas or --surface. Links use the strong teal with an underline. Inline code is set in JetBrains Mono.

/* Reach for tokens, never raw hex */
.status-panel {
  color: var(--body);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

Rules

  • Light theme only

    White surfaces on a #f4f7f8 canvas. No dark mode.

  • One accent

    Teal #029386. Status colors only signal status.

  • Chamfered cards

    Every card cuts its top-left and bottom-right corners.

  • 10px corners

    Every other rounded corner uses 10px.

  • Centered heroes

    Hero sections are center-aligned. Other sections align left.

  • Headings stand alone

    No blurb next to a section heading. Content starts right under it.

  • No fake terminals

    Show code in plain code blocks. No window chrome, traffic lights, or typing effects.

  • Minimal fluff

    Say it once, plainly. Cut filler copy and decoration.

Use

Head

<link rel="icon" href="https://colors.dalix.dev/favicon.svg" type="image/svg+xml">
<link rel="preload" href="https://colors.dalix.dev/fonts/archivo-latin-wght-normal.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="https://colors.dalix.dev/dalix.css">

Page

<header class="site-header">
  <div class="container">
    <a class="logo" href="https://dalix.dev">dalix<span>.dev</span></a>
    <nav class="site-nav">
      <a href="#docs">Docs</a>
    </nav>
  </div>
</header>

<main>
  <!-- Heroes are always centered -->
  <section class="hero">
    <div class="container">
      <h1>Page title</h1>
      <p>One plain sentence.</p>
    </div>
  </section>

  <!-- The heading stands alone, with no blurb beside it -->
  <section class="section" id="docs">
    <div class="container">
      <h2>Section heading</h2>
      <div class="grid">
        <article class="card">
          <div class="tile">C</div>
          <h3><span class="mark">C</span>ard title</h3>
          <p>Card body text.</p>
        </article>
      </div>
    </div>
  </section>
</main>

Files

FileContents
dalix.cssTokens, fonts, base styles, and components
logo.svgWordmark, outlined
favicon.svgBrowser tab icon
apple-touch-icon.png180px home screen icon
fonts/Archivo, JetBrains Mono, and Monaspace Radon as WOFF2