Community Algorand Brand Style Kit (Web)

Lightweight CSS style kit for web projects, aligned with extracted Algorand brand guidance.

Licensed under MIT-0 - see LICENSE.

1. Download the kit:
   • Direct ZIP: https://github.com/PXke/community-algorand-brand-style-kit/archive/refs/heads/main.zip
   • Or see downloads/README.md for all options.
2. Add guidelines.css to your project.
3. Import it globally:

<link rel="stylesheet" href="./brand-style-kit/guidelines.css" />

or

@import "./brand-style-kit/guidelines.css";

For production, you can use guidelines.min.css instead.

• Main demo: examples/index.html
• Dark mode preview: examples/dark-mode.html
• Static-host root redirect: index.html -> examples/index.html

Optional local preview:

python3 -m http.server 8080

Then open http://localhost:8080/examples/index.html.

• guidelines.css: tokens + reusable UI primitives
• guidelines.min.css: minified production build of the stylesheet
• tokens.json: machine-readable token export
• assets/icons: brand icon SVGs
• assets/shapes: brand shape SVGs
• examples/: working demo pages
• docs/: usage guidelines by topic

• Brand colors (primary + accent)
• Typography roles (Aeonik heading with Inter fallback, Inter body)
• Formula ratios (margin /9, radius /72, stroke /540)
• Light-first defaults with optional dark-mode overrides
• Script-specific font helpers (.ak-lang-*)

• Docs landing page: docs/README.md
• Getting started: downloads/README.md
• Implementation patterns: docs/IMPLEMENTATION_GUIDE.md
• Brand foundations: docs/BRAND_FOUNDATIONS.md
• Extraction and validation: docs/BRAND_EXTRACTION.md

Legacy topic-by-topic docs were intentionally merged into these consolidated guides.

• Keep token names stable (--ak-*) for compatibility.
• Prefer token overrides over direct class rewrites.
• Regenerate minified CSS with npm run build:css.
• See CHANGELOG.md for release history.