Style Guide

Design tokens, components, and patterns used across Simple App Foundry.

Contents

Colors

Brand and UI color tokens defined as CSS custom properties.

Accent--color-accent
Accent Hover--color-accent-hover
Dark--color-dark
Background--color-bg
Text--color-text
Muted--color-muted
Border--color-border
White--color-white
Light--color-light
Alt Background--color-alt-bg
Footer Text--color-footer-text
Card Background--color-card-bg

Typography

System font stack with a scale from xs (0.85rem) to 8xl (5rem).

Font Sizes

Aa
--font-size-8xl (5rem)
The quick brown fox
--font-size-7xl (2.5rem)
The quick brown fox jumps over the lazy dog
--font-size-6xl (2rem)
The quick brown fox jumps over the lazy dog
--font-size-5xl (1.75rem)
The quick brown fox jumps over the lazy dog
--font-size-4xl (1.4rem)
The quick brown fox jumps over the lazy dog
--font-size-3xl (1.25rem)
The quick brown fox jumps over the lazy dog
--font-size-2xl (1.2rem)
The quick brown fox jumps over the lazy dog
--font-size-xl (1.15rem)
The quick brown fox jumps over the lazy dog
--font-size-lg (1.1rem)
The quick brown fox jumps over the lazy dog
--font-size-md (1.05rem)
The quick brown fox jumps over the lazy dog
--font-size-base (0.95rem)
The quick brown fox jumps over the lazy dog
--font-size-sm (0.9rem)
The quick brown fox jumps over the lazy dog
--font-size-xs (0.85rem)

Font Weights

Light (300)
--font-weight-light
Normal (400)
--font-weight-normal
Semibold (600)
--font-weight-semibold
Bold (700)
--font-weight-bold

Line Heights

Tight (1.2) — Used for headings and large display text where compact spacing is needed.
--line-height-tight
Base (1.6) — Default line height for body text. Provides comfortable reading for paragraphs and general content.
--line-height-base
Relaxed (1.7) — Slightly more open than base. Used for value propositions and FAQ answers.
--line-height-relaxed
Loose (1.8) — Most open line height. Used for long-form content like documentation and product details.
--line-height-loose

Spacing

Consistent spacing scale used for margins, padding, and gaps.

--space-xs (0.25rem)
--space-sm (0.5rem)
--space-md (0.75rem)
--space-lg (1rem)
--space-xl (1.5rem)
--space-2xl (2rem)
--space-3xl (3rem)
--space-4xl (4rem)

Buttons

Primary and outline button styles with hover effects.

Primary Button Outline Button

Markup

<a href="/path" class="btn btn-primary">Primary Button</a>
<a href="/path" class="btn btn-outline">Outline Button</a>

Cards

Product cards and pricing tiers used throughout the site.

Product Card

Example App

A sample product card

This is how product cards look across the site. They display a title, tagline, description, and a link.

Learn more →

Pricing Tier

Standard

$10
per month
  • Feature one
  • Feature two
  • Feature three
Get Started

Premium

$25
per month
  • Everything in Standard
  • Priority support
  • Advanced features
Get Started

Icons

Lucide-based inline SVG icons. Import the macro and call icon("name").

check
arrow-right
external-link
package
layout-dashboard
zap
book-open
mail
shield
settings
users
star
code
palette
chevron-right

Usage

{% from "partials/icon.njk" import icon %}
{{ icon("check") }}
{{ icon("arrow-right", { size: 20, class: "my-class" }) }}

App Icons

Atlassian Marketplace app icons use an accent chiclet pattern: a rounded rectangle with --color-accent background and a white Lucide-style symbol unique to each app.

Size Scale

Icons render at four sizes. Each row shows a different app symbol.

32px
48px
96px
144px
Package
32px
48px
96px
144px
Dashboard
32px
48px
96px
144px
Zap
32px
48px
96px
144px
Shield
32px
48px
96px
144px
Settings
32px
48px
96px
144px
Users

Safe Zone Anatomy

The dashed outline shows the 12px safe zone inset. Keep symbols within the inner 120×120px area on the 144px icon.

Atlassian Marketplace Requirements

Context Size Format Notes
Marketplace listing (primary) 144×144px PNG or JPG Main icon shown on the listing page
In-product display 32×32px PNG or JPG Shown inside Jira/Confluence UI
UPM (Universal Plugin Manager) 16×16px PNG or JPG Admin panel listing
High-DPI listing 460×460px PNG or JPG Retina version for Marketplace

Icons must not contain Atlassian trademarks. Transparent backgrounds are not recommended — always fill the full rectangle with --color-accent.

Markup

{%- from "partials/icon.njk" import icon -%}
<span class="app-icon app-icon--lg">{{ icon("package") }}</span>
<span class="app-icon app-icon--sm">{{ icon("zap") }}</span>

Border Radius & Shadows

Reusable border radius and shadow tokens.

Border Radius

--radius-sm (3px)
--radius-md (6px)
--radius-lg (8px)
--radius-full (50%)

Shadows

--shadow-card
--shadow-featured

Code Blocks

Inline and block code styling used in documentation pages.

Inline Code

Use the var(--color-accent) token for accent-colored elements.

Code Block

// Example code block
:root {
  --color-accent: #e94560;
  --color-dark: #1a1a2e;
  --color-bg: #fafafa;
}