Sign in Start free trial
Design System v1.0

dabe Design System

The complete reference for dabe's visual language. Tokens, components, layout system, and usage guidelines. Built on Inter, structured grid lines, and a warm analytical palette.

Colors / Typography / Spacing / Grid / Buttons / Cards / Badges / Navigation

Color Palette

Background & Surface
Background
#F9F8F4
--color-bg
Surface
#F3F0E8
--color-surface
Surface 2
#EBE7DC
--color-surface-2
Border
#E2DDD6
--color-border
Border Dark
#C8C3BB
--color-border-dark
Text
Text Primary
#1A1815
--color-text
Text Secondary
#6B6560
--color-text-2
Text Tertiary
#9B9591
--color-text-3
Accent & Dark
Accent
#C84B2F
--color-accent
Accent Hover
#B0401F
--color-accent-hover
Accent Light
#F5E8E4
--color-accent-light
Dark
#141410
--color-dark
Green
#2D7A4F
--color-green
Color Usage Guidelines

Accent (#C84B2F) — Use sparingly and intentionally. Primary CTAs, active states, key metrics, critical status indicators. Never use for decorative purposes. One accent element per visible viewport is enough.

Borders (#E2DDD6) — The structural element of the system. All grid lines use this token. Consistent application creates the visual coherence that defines the aesthetic. Never use a heavier border weight for decorative purposes.

Dark (#141410) — Used exclusively for CTA sections and high-impact areas. Creates strong contrast moments. Keep usage rare to preserve impact.

Text hierarchy — Use --color-text for headings and primary UI text, --color-text-2 for body and secondary labels, --color-text-3 for metadata, captions, and placeholder text. Maintain strict hierarchy.

Typography Scale

All text uses Inter from Google Fonts. Letter-spacing is negative on display sizes for tighter, more editorial feel. Body text uses slightly loose leading for readability.

Token
Example
Value
--text-6xl
Aa
72px / Black / -0.04em
--text-5xl
Aa
60px / Black / -0.04em
--text-4xl
Aa Display
48px / Bold / -0.03em
--text-3xl
Section heading
38px / Bold / -0.03em
--text-2xl
Card heading
30px / Semi / -0.02em
--text-xl
Subheading text
24px / Semi / -0.01em
--text-lg
Lead paragraph text, hero subtitles
20px / Regular
--text-md
Article body text and longer reading contexts
17px / Regular
--text-base
Default body text, card descriptions, labels
15px / Regular
--text-sm
UI labels, navigation items, button text, captions
13px / Regular
--text-xs
LABELS, OVERLINES, METADATA, TAGS
11px / Semi / +0.1em / UPPER

Spacing System

All spacing uses a base-4 scale. Consistent application is critical for the grid to feel intentional.

Token
Value
Visual
--space-1
4px
--space-2
8px
--space-4
16px
--space-6
24px
--space-8
32px
--space-12
48px
--space-16
64px
--space-24
96px
--space-32
128px

Grid & Line System

The structural grid lines are the defining feature of the dabe design language. Thin 1px lines in --color-border (#E2DDD6) run both horizontally and vertically through the entire page, creating an architectural blueprint quality. This is not decoration — it is structure.

Live demo — the actual grid
Outer container with border-left + border-right — these are the outer vertical lines
Col 1
border-right creates the inner line
Col 2
Each .grid-col has border-right
Col 3
Except the last column
Col 4
No border-right on last child
Horizontal line: border-top on each .section element — creates structural separation between page sections
HTML Pattern
<section class="section">                 <!-- border-top: var(--grid-line) -->
  <div class="container">
    <div class="grid-frame">              <!-- border-left + border-right -->
      <div class="grid-col">...</div>   <!-- border-right -->
      <div class="grid-col">...</div>   <!-- border-right -->
      <div class="grid-col">...</div>   <!-- border-right -->
      <div class="grid-col">...</div>   <!-- no border-right (last-child) -->
    </div>
  </div>
</section>
Grid Variants
.grid-frame
4 equal columns (default)
.grid-frame--2col
2 equal columns
.grid-frame--12
1:2 column ratio (sidebar + main)
.grid-frame--3col
3 equal columns

Button Variants

Primary .btn-primary
Small Default Large Extra Large
Use for: primary CTAs, most important action on a page. Background: #C84B2F. One primary button per section.
Secondary .btn-secondary
Small Default Large
Use for: secondary actions, pairs with a primary button. Outlined style using --color-border-dark.
Ghost .btn-ghost
Small Default Large
Use for: nav actions (Sign in), low-emphasis tertiary actions. No border, minimal presence.
Dark (inverted context) .btn-dark / .btn-accent-outline
Accent on dark Dark inverted Accent outline
Use only on --color-dark backgrounds (CTA band). Use .btn-primary for primary action, .btn-accent-outline for secondary.

Card Variants

.card — Standard
Card label
Card heading

Card body text. Used for feature highlights, informational blocks, and content groupings.

.agent-card — Grid item
Agent 01
⚛
SEO Agent
Audits your site structure and generates on-page optimizations.
.blog-card — Article list
GEO
Article headline that spans two lines nicely

Short excerpt summarizing the article content.

April 10, 2026 • 8 min read

Badges & Labels

Badge Variants
Default Accent Success Dark Context
Use badges for: article categories, plan labels, feature tags, status indicators.
Chip (Hero pre-header label)
AI Marketing Platform New feature Label without dot
Use chips for: hero section pre-headers, prominent callouts. One per section maximum.
.label-upper (Section overline)
GEO Monitoring
Section heading follows here
Always precedes a section heading. 11px, Semi, 0.12em tracking, uppercase, --color-text-3.