ASTA is a monospace UI framework where every element aligns to a character grid to create interfaces that are rhythmic, intentional, and beautifully precise.

Lightweight. Performant. Unapologetically minimal. ASTA shines through simplicity.

ASTA means love, bright star, and sometimes beautiful goddess, a name that embodies the elegance, clarity, and quiet strength at the heart of this system.

How to Use

Getting started with ASTA is simple. Include the CSS, JavaScript, and fonts in your project. Download or clone the repository from GitHub, or grab the core files you need directly from here.

Basic Setup

Add these lines to your HTML <head> section:

<!-- Include ASTA CSS (includes font declarations) -->
<link rel="stylesheet" href="css/asta.min.css">

<!-- Include ASTA JS for interactive components -->
<script src="js/asta.min.js"></script>

Required Files

Make sure you have the following directory structure:

your-project/
├── css/
│   └── asta.min.css
├── js/
│   └── asta.min.js
└── fonts/
    ├── JetBrainsMono-Regular.woff2
    ├── JetBrainsMono-Medium.woff2
    ├── JetBrainsMono-SemiBold.woff2
    └── JetBrainsMono-ExtraBold.woff2

Using Components

All components work with semantic HTML. No utility classes needed:

<!-- Form inputs work out of the box -->
<input type="text" id="demo-input" placeholder="Type something...">
<button id="demo-button" style="margin-top: 5px">Show in Modal</button>

<!-- Modal component -->
<div id="demo-modal" class="modal">
  <div class="modal-backdrop" onclick="closeModal('demo-modal')"></div>
  <div class="modal-content modal-info">
    <div class="modal-header">
      <h4>Your Message</h4>
      <button class="modal-close" onclick="closeModal('demo-modal')">×</button>
    </div>
    <div class="modal-body">
      <p id="demo-modal-text"></p>
    </div>
    <div class="modal-footer">
      <button onclick="closeModal('demo-modal')">OK</button>
    </div>
  </div>
</div>

CSS Variables

Customize ASTA using CSS custom properties:

:root {
  --font-family: 'JetBrains Mono', monospace;
  --font-size: 16px;
  --line-height: 1.5rem;
  --char-width: 1ch;
  --border-thickness: 2px;

  /* Light theme (default) */
  --background-color: #ffffff;
  --text-color: #000000;
}

That's it! All HTML elements are styled automatically. Explore the examples below to see what's available.

Examples

Typography

Heading Levels

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>

Paragraph with Inline Styles

This is a regular paragraph with bold text and italic text. You can also use inline code within paragraphs.

<p>This is a regular paragraph with <strong>bold text</strong> and <em>italic text</em>.
        You can also use <code>inline code</code> within paragraphs.</p>

Code Block

// Code block example
function hello() {
  console.log("Hello, World!");
}

<pre>// Code block example
function hello() {
  console.log("Hello, World!");
}</pre>

Horizontal Rule

<hr>

Lists

Unordered List

First item
Second item
Third item

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

Ordered List with Nesting

First step
Second step
1. Nested item
2. Another nested item
Third step

<ol>
  <li>First step</li>
  <li>Second step
    <ol>
      <li>Nested item</li>
      <li>Another nested item</li>
    </ol>
  </li>
  <li>Third step</li>
</ol>

Tree List

Root
- Branch A
  - Leaf A.1
  - Leaf A.2
  - Leaf A.3
    - Leaf A.3.1
    - Leaf A.3.2
- Branch B

<ul class="tree">
  <li>Root
    <ul>
      <li>Branch A
        <ul>
          <li>Leaf 1</li>
          <li>Leaf 2</li>
        </ul>
      </li>
      <li>Branch B</li>
    </ul>
  </li>
</ul>

Tables

Table Example

ID	Name	Status
001	Project Alpha	Active
002	Project Beta	Pending

<table>
  <thead>
    <tr>
      <th class="width-min">ID</th>
      <th class="width-auto">Name</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>Project Alpha</td>
      <td>Active</td>
    </tr>
    <tr>
      <td>002</td>
      <td>Project Beta</td>
      <td>Pending</td>
    </tr>
  </tbody>
</table>

Forms

Form Example

<form>
  <label>
    Text Input:
    <input type="text" placeholder="Enter text...">
  </label>

  <label>
    <input type="checkbox"> Checkbox option
  </label>

  <div class="radio-group">
    <label>
      <input type="radio" name="radio"> Radio option 1
    </label>
    <label>
      <input type="radio" name="radio"> Radio option 2
    </label>
  </div>

  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

Grid Layout

A 12-column grid system using flexbox. Use .grid as the container and column classes like .six.columns, .four.columns, etc. to control width.

Equal Columns (50/50)

<div class="grid">
  <div class="six columns"><input type="text" placeholder="First Name"></div>
  <div class="six columns"><input type="text" placeholder="Last Name"></div>
</div>

Three Equal Columns

<div class="grid">
  <div class="four columns"><button>Quarter 1</button></div>
  <div class="four columns"><button>Quarter 2</button></div>
  <div class="four columns"><button>Quarter 3</button></div>
</div>

Unbalanced Layout (6 + 3 + 3)

<div class="grid">
  <div class="six columns"><input type="text" placeholder="Main content"></div>
  <div class="three columns"><button>Sidebar</button></div>
  <div class="three columns"><button>Aside</button></div>
</div>

Fractions and Offsets

<!-- Using fractions -->
<div class="grid">
  <div class="one-third column"><button>One-third</button></div>
  <div class="two-thirds column"><button>Two-thirds</button></div>
</div>

<!-- Using offset -->
<div class="grid">
  <div class="three columns"><button>Three</button></div>
  <div class="three columns offset-by-six"><button>Three (offset by 6)</button></div>
</div>

Collapsible Section

Details/Summary Element

Click to expand

Hidden content that appears when you click the summary.

<details>
  <summary> Click to expand</summary>
  <p>Hidden content that appears when you click the summary.</p>
</details>

Media

Image with Caption

Placeholder image — Images automatically adjust padding to maintain grid alignment

<figure>
  <img src="image.jpg" alt="Description">
  <figcaption>Images automatically adjust padding to maintain grid alignment</figcaption>
</figure>

Video with Caption

Videos also maintain grid alignment with automatic padding adjustment

<figure>
  <video poster="thumbnail.jpg" controls>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
  <figcaption>Videos also maintain grid alignment with automatic padding adjustment</figcaption>
</figure>

ASCII Art

Retro Computer Art

╔═══════════════════════════════════════╗
║                                       ║
║        ░▒▓█   A S T A   █▓▒░          ║
║                                       ║
║  ┌─────────────────────────────────┐  ║
║  │ ▓▓▓▒▒░░ DESIGN SYSTEM ░░▒▒▓▓▓   │  ║
║  │   ░░ Monospace Grid Magic ░░    │  ║
║  └─────────────────────────────────┘  ║
║                                       ║
║    █▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀█    ║
║    █  ☇ Fast   ☼ Clean   ✦ Pure  █    ║
║    █▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄█    ║
║                                       ║
╚═══════════════════════════════════════╝

<pre>
╔═══════════════════════════════════════╗
║                                       ║
║        ░▒▓█   A S T A   █▓▒░          ║
║                                       ║
║  ┌─────────────────────────────────┐  ║
║  │ ▓▓▓▒▒░░ DESIGN SYSTEM ░░▒▒▓▓▓   │  ║
║  │   ░░ Monospace Grid Magic ░░    │  ║
║  └─────────────────────────────────┘  ║
║                                       ║
║    █▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀█    ║
║    █  ☇ Fast   ☼ Clean   ✦ Pure  █    ║
║    █▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄█    ║
║                                       ║
╚═══════════════════════════════════════╝
</pre>

Modals

Information Modal

<button onclick="openModal('info-modal')">Show Info Modal</button>

<div id="info-modal" class="modal">
  <div class="modal-backdrop" onclick="closeModal('info-modal')"></div>
  <div class="modal-content modal-info">
    <div class="modal-header">
      <h4>Information</h4>
      <button class="modal-close" onclick="closeModal('info-modal')">×</button>
    </div>
    <div class="modal-body">
      <p>This is an informational message.</p>
    </div>
    <div class="modal-footer">
      <button onclick="closeModal('info-modal')">OK</button>
    </div>
  </div>
</div>

Confirmation Modal

<button onclick="openModal('confirm-modal')">Show Confirmation Modal</button>

<div id="confirm-modal" class="modal">
  <div class="modal-backdrop" onclick="closeModal('confirm-modal')"></div>
  <div class="modal-content modal-confirm">
    <div class="modal-header">
      <h4>Confirm Action</h4>
      <button class="modal-close" onclick="closeModal('confirm-modal')">×</button>
    </div>
    <div class="modal-body">
      <p>Are you sure you want to proceed?</p>
    </div>
    <div class="modal-footer">
      <button onclick="closeModal('confirm-modal')">Cancel</button>
      <button onclick="closeModal('confirm-modal')">Confirm</button>
    </div>
  </div>
</div>

Error Modal

<button onclick="openModal('error-modal')">Show Error Modal</button>

<div id="error-modal" class="modal">
  <div class="modal-backdrop" onclick="closeModal('error-modal')"></div>
  <div class="modal-content modal-error">
    <div class="modal-header">
      <h4>Error</h4>
      <button class="modal-close" onclick="closeModal('error-modal')">×</button>
    </div>
    <div class="modal-body">
      <p>An error has occurred.</p>
    </div>
    <div class="modal-footer">
      <button onclick="closeModal('error-modal')">Close</button>
    </div>
  </div>
</div>

Footer

Basic Footer

<footer>
  <p>&copy; 2025 All rights reserved</p>
  <p>
    <a href="#about">About</a> |
    <a href="https://github.com/anton-io/asta">GitHub</a> |
    <a href="https://anton.io">Anton.io</a>
    <a href="https://x.com/roldao">@Roldao</a>
  </p>
</footer>

ASTA - DESIGN SYSTEM