https://github.com/ducktapekiller/obsidian-aubade
A retro-brutalist theme prioritising strict geometry, high contrast, and tactile interactions.
https://github.com/ducktapekiller/obsidian-aubade
aubade brutalist-design brutalist-theme brutalist-ui css dark-mode dark-theme dashboard light-mode light-theme obsidian obsidian-md obsidian-theme retro retro-theme theme themes-css timeline vintage
Last synced: 3 months ago
JSON representation
A retro-brutalist theme prioritising strict geometry, high contrast, and tactile interactions.
- Host: GitHub
- URL: https://github.com/ducktapekiller/obsidian-aubade
- Owner: DuckTapeKiller
- License: mit
- Created: 2026-02-02T22:56:10.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-03-12T14:12:17.000Z (3 months ago)
- Last Synced: 2026-03-12T19:58:03.673Z (3 months ago)
- Topics: aubade, brutalist-design, brutalist-theme, brutalist-ui, css, dark-mode, dark-theme, dashboard, light-mode, light-theme, obsidian, obsidian-md, obsidian-theme, retro, retro-theme, theme, themes-css, timeline, vintage
- Homepage:
- Size: 59.1 MB
- Stars: 88
- Watchers: 4
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://ko-fi.com/ducktapekiller)
**Aubade** is a retro-brutalist theme for [Obsidian](https://obsidian.md). It prioritises strict geometry, high contrast, and tactile interactions over soft gradients and rounded corners. Designed for users who require their digital workspace to feel like a structural tool.
# Table of contents
1. [Visual Identity](#1-visual-identity)
2. [Colour Schemes](#2-colour-schemes)
3. [Select your favourite pattern](#3-select-your-favourite-pattern)
4. [Key Features](#4-key-features)
5. [Typography](#5-typography)
1. [Sans Serif](#51-sans-serif)
2. [Monospace](#52-monospace)
6. [Layout and Configuration](#6-layout-and-configuration)
1. [Alignment](#61-alignment)
2. [Note Width Control](#62-note-width-control)
3. [Typography Settings](#63-typography-settings)
7. [Per-Note Overrides](#7-per-note-overrides)
1. [Custom Widths](#71-custom-widths)
2. [Interface Hiding](#72-interface-hiding)
8. [Dashboard and Masonry Layout](#8-dashboard-and-masonry-layout)
9. [CSS-Only Timelines](#9-css-only-timelines)
10. [Installation](#10-installation)
1. [Method 1: Community Themes (CURRENTLY PENDING REVIEW BY OBSIDIAN)](#101-method-1-community-themes-currently-pending-review-by-obsidian)
2. [Method 2: Manual Installation](#102-method-2-manual-installation)
11. [Gallery](#11-gallery)
1. [Dark Mode](#111-dark-mode)
2. [Light Mode](#112-light-mode)
- [SUMMARY: ALL CSSCLASSES AVAILABLE](#summary-all-cssclasses-available)
## 1 Visual Identity
* **Strict Geometry:** A zero-radius policy applied globally. Every corner is sharp; every container is a box.
* **Tactile Feedback:** Buttons and interactive elements feature hard, directional shadows (4px offset) that flatten physically when pressed.
* **High Contrast Borders:** 2px thick borders define every UI element, ensuring clear separation between panes, notes, and metadata.
* **Retro Typography:** Defaults to `Space Mono` for UI and `Azeret Mono` for text, reinforcing the terminal/typewriter aesthetic.
## 2 Colour Schemes
| | |
|:---:|:---:|
| **Default**
 | **Reader**
 |
| **Amber**
 | **Solarized**
 |
| **Midnight**
 | **Sunset**
 |
| **Ocean**
 | **Forest**
 |
| **Lavender**
 | **Warm**
 |
| **Cool**
 | **Monochrome**
 |
| **Brutalist**
 | |
## 3 Select your favourite pattern
**Patterns**
## 4 Key Features
* **Dashboard Ready:** Built-in grid support for dashboard layouts, automatically handling column breaks and gap spacing.
* **Mobile Optimised:** Features a custom bottom navigation bar, neutralised animations for better performance, and enlarged touch targets.
* **Nuclear Anti-Roundness:** Specific overrides ensure no plugin or native element introduces rounded corners.
* **Striped Headers:** Classic vintage MacOS-style pinstripe gradients on window titles and tab containers.
## 5 Typography
This theme contains the following typefaces:
### 5.1 Sans Serif
* **iA Writer Quattro S** by Information Architects: [Source](https://github.com/iaolo/iA-Fonts)
### 5.2 Monospace
* **Azeret Mono** by Displaay: [Source](https://fonts.google.com/specimen/Azeret+Mono)
* **Space Mono** by Colophon Foundry: [Source](https://fonts.google.com/specimen/Space+Mono)
* **Noto Sans Mono** by Google: [Source](https://fonts.google.com/noto/specimen/Noto+Sans+Mono)
* **iA Writer Duo S** by Information Architects: [Source](https://github.com/iaolo/iA-Fonts)
* **iA Writer Mono S** by Information Architects: [Source](https://github.com/iaolo/iA-Fonts)
**Clarification:** Typefaces are embedded within the theme, ensuring they are available offline and on any device without requiring local installation.
In **Style Settings**, you can choose any of these fonts for either the Body or the UI/Headers.
## 6 Layout and Configuration
You can fine-tune the reading experience in **Style Settings**.
### 6.1 Alignment
Modify the text alignment of your notes using the dropdown menu:
* Left aligned (Default)
* Right aligned
* Centre aligned
* Justified
### 6.2 Note Width Control
When Obsidian's **“Readable line length”** setting is enabled, the editor width defaults to **700px**. You can adjust this global maximum width in Style Settings using a slider ranging from **500px** to **1600px**.
> **Note on Mobile:** These width constraints apply to **Desktop** only. On mobile devices, the theme automatically fits content to the screen width.
### 6.3 Typography Settings
* **Line Height:** Adjust line spacing between **1.0** and **3.0** (Default: 1.5).
* **Inline Title Size:** Adjust the size of the inline title between **1.0em** and **5.0em** (Default: 3em).
## 7 Per-Note Overrides
Use the `cssclasses` property in your frontmatter (YAML) to override global settings for specific files. These classes function regardless of your global “Readable line length” setting.
### 7.1 Custom Widths
Useful for notes containing wide tables or diagrams:
* `width-800` (800px)
* `width-900` (900px)
* `width-1000` (1000px)
* `width-1200` (1200px)
* `width-1600` (1600px)
* `full-width` (100% of pane width)
### 7.2 Interface Hiding
To hide the frontmatter, inline title, and property metadata for a specific note:
* `hide-all`
**Example:**
```yaml
---
cssclasses:
- width-1200
- hide-all
---
```
## 8 Dashboard and Masonry Layout
The theme allows you to organise your notes into a clean, visual grid. The system supports native **Obsidian Callouts** and automatically handles column distribution (responsive flow).
To activate, add `cssclasses: dashboard` to your note's frontmatter. Every Callout within that note will transform into a masonry card.
```markdown
---
cssclasses:
- dashboard
---
> [!abstract] General
> - [[Link 1]]
> - [[Link 2]]
> [!abstract] Essays
> - [[Link A]]
> - [[Link B]]
> - [[Link C]]
> [!abstract] Projects
> - [[Project X]]
> - [[Project Y]]
```
## 9 CSS-Only Timelines
The theme features a native, CSS-only timeline layout that transforms standard bulleted lists into a professional split-view chronology without requiring any external plugins. To activate it, add `cssclasses: custom-timeline` to your note's frontmatter.
Structure your timeline as a single, continuous unordered list. Every event must consist of exactly three bullet points in this strict sequence: Date, Title, and Content. The theme will automatically remove the default bullet points, draw a vertical line, and format the items into a structured grid.
**Example:**
```markdown
---
cssclasses:
- custom-timeline
- hide-all
---
- 1493
- Bulas Inter Caetera y segundo viaje de Colón
- El papa Alejandro VI expide las bulas Inter Caetera, concediendo a la Corona castellana las tierras descubiertas y por descubrir, a cambio de la conversión de sus habitantes al cristianismo. En este mismo segundo viaje de Colón participa fray Ramón Pané, quien se dedicará a investigar los mitos taínos y llevará a cabo las primeras labores evangelizadoras en el Caribe. Es el primer europeo en recopilar sistemáticamente la mitología indígena americana.
- 1494
- Tratado de Tordesillas
- Con mediación papal, España y Portugal regulan la repartición de los territorios descubiertos. El tratado establece una línea divisoria que determinará el reparto colonial del continente americano y consolida la autoridad del papa como única fuente de derecho temporal y espiritual sobre los nuevos territorios.
```
## 10 Installation
### 10.1 Method 1: Community Themes (CURRENTLY PENDING REVIEW BY OBSIDIAN)
1. Open **Settings** > **Appearance**.
2. Click **Manage** under Themes.
3. Search for **Aubade**.
4. Click **Install** and then **Use**.
### 10.2 Method 2: Manual Installation
1. Download `theme.css` and `manifest.json` from the [Releases](../../releases) page.
2. Open your Obsidian vault folder.
3. Navigate to `.obsidian/themes`.
4. Create a new folder named `Aubade`.
5. Paste the files into this folder.
6. Reload Obsidian and select **Aubade** in **Settings > Appearance > Themes**.
## 11 Gallery
### 11.1 Dark Mode
### 11.2 Light Mode
## SUMMARY: ALL CSSCLASSES AVAILABLE
| `cssclass` | Function | Behaviour Details |
| :--- | :--- | :--- |
| `width-800` | Sets fixed note width | Constrains the editor and reading view content to a maximum width of 800px. Centers the content. |
| `width-900` | Sets fixed note width | Constrains the editor and reading view content to a maximum width of 900px. Centers the content. |
| `width-1000` | Sets fixed note width | Constrains the editor and reading view content to a maximum width of 1000px. Centers the content. |
| `width-1200` | Sets fixed note width | Constrains the editor and reading view content to a maximum width of 1200px. Centers the content. |
| `width-1600` | Sets fixed note width | Constrains the editor and reading view content to a maximum width of 1600px. Centers the content. |
| `full-width` | Sets responsive width | Forces the note content to span 100% of the available viewing pane. |
| `hide-all` | UI visibility toggle | Completely hides the frontmatter container, metadata properties, and inline note titles. |
| `dashboard` | Activates grid layout | Transforms the note into a responsive masonry grid structure. Converts standard callouts into floating dashboard cards. |
| `custom-timeline` | Activates timeline layout | Converts standard unordered lists into a split-view, CSS-only vertical chronology grid. |