Automatic.CSS (ACSS)

Property	Value
description	Automatic.CSS (ACSS)
tags	index, doc, mac-starter, plugin, acss

Some Settings are Outdated

Some settings were recently moved or refactored. This document will be updated after the ACSS v4.0.0 stable release. The document will also be broken into multiple files. The settings export will be found on this page.

Palette

Main Colors

• Primary = #cf202f
• Secondary = false
• Tertiary = false
• Accent = false
• Base = #1e356c
• Neutral = #050505

Semantic Colors

• Success = #26a746
• Warning = #ffc108
• Info = #18a2b8
• Danger = *#dc3546

Palette Options

• Unify Brand Lightness = true
• Unify Semantic Lightness = true
• Unified Lightness = 0.85

Color Assignments

Backgrounds

• Website (Body) = --white
• Dark = --neutral-dark
• Ultra Dark = --neutral-ultra-dark
• Light = --neutral-light
• Ultra Light = --neutral-ultra-light

Text

• Default Text Color = --text-dark
• Dark = --black
• Dark Muted = --black-trans-80
• Light = --white
• Light Muted = --white-trans-80

Light Relationships

• Ultra Light
  • Text Color = --text-dark
  • Heading Color = --text-dark
  • Link Color = empty
  • Button Style = primary
  • Focus Color = empty
  • Icon Scheme = Light
• Light
  • Text Color = --text-dark
  • Heading Color = --text-dark
  • Link Color = empty
  • Button Style = primary
  • Focus Color = empty
  • Icon Scheme = Light

Dark Relationships

• Ultra Dark
  • Text Color = --text-light
  • Heading Color = --text-light
  • Link Color = empty
  • Button Style = primary
  • Focus Color = empty
  • Icon Scheme = Dark
• Dark
  • Text Color = --text-light
  • Heading Color = --text-light
  • Link Color = empty
  • Button Style = primary
  • Focus Color = empty
  • Icon Scheme = Dark

Options

• Automatic Color Relationships = true

Color Scheme (Light/Dark)

• Enable Color Scheme Support = true
• Website Scheme = Light

Color Settings

Primary

• Main Color Override
  • Lightness = empty
  • Chrome = empty
• Hover Override
  • Lightness = empty
  • Chrome = empty

Base

• Main Color Override
  • Lightness = empty
  • Chrome = empty
• Hover Override
  • Lightness = empty
  • Chrome = empty

Neutral

• Main Color Override
  • Lightness = empty
  • Chrome = empty
• Hover Override
  • Lightness = empty
  • Chrome = empty

Success

• Main Color Override
  • Lightness = empty
  • Chrome = empty
• Hover Override
  • Lightness = empty
  • Chrome = empty

Warning

• Main Color Override
  • Lightness = empty
  • Chrome = empty
• Hover Override
  • Lightness = empty
  • Chrome = empty

Info

• Main Color Override
  • Lightness = empty
  • Chrome = empty
• Hover Override
  • Lightness = empty
  • Chrome = empty

Danger

• Main Color Override
  • Lightness = empty
  • Chrome = empty
• Hover Override
  • Lightness = empty
  • Chrome = empty

Force Scheme

• Force Dark Scheme = empty
• Force Light Scheme = empty

Typography

• Root Font Size = 100%

Headings

• Desktop Base Size = 20px
• Mobile Base Size = 18px
• Desktop Ratio = 1.5
• Mobile Ratio = 1.2

All

• Default Font Family = Outfit, sans-serif
• Default Heading Color = --text-dark
• Default Line Height = calc(4px + 2ex)
• Default Font Weight = 700
• Default Letter Spacing = empty
• Default Font Style = empty
• Default Text Transform = empty
• Default Text Wrap = Balance

H1

• Font Family = empty
• Color = empty
• Line Height = empty
• Font Weight = empty
• Letter Spacing = empty
• Max-Wdith = *100%*
• Text Transform = empty
• Font Style = empty
• Font Size Overrides
  • Desktop Size Override = empty
  • Mobile Size Override = empty

H2

• Font Family = empty
• Color = empty
• Line Height = empty
• Font Weight = empty
• Letter Spacing = empty
• Max-Wdith = 100%
• Text Transform = empty
• Font Style = empty
• Font Size Overrides
  • Desktop Size Override = empty
  • Mobile Size Override = empty

H3

• Font Family = empty
• Color = empty
• Line Height = empty
• Font Weight = empty
• Letter Spacing = empty
• Max-Wdith = *100%*
• Text Transform = empty
• Font Style = empty
• Font Size Overrides
  • Desktop Size Override = empty
  • Mobile Size Override = empty

H4

• Font Family = empty
• Color = empty
• Default Line Height = calc(4px + 2ex)
• Font Weight = empty
• Letter Spacing = empty
• Max-Wdith = *100%*
• Text Transform = empty
• Font Style = empty
• Font Size Overrides
  • Desktop Size Override = empty
  • Mobile Size Override = empty

H5

• Font Family = empty
• Color = empty
• Line Height = empty
• Font Weight = empty
• Letter Spacing = empty
• Max-Wdith = *100%*
• Text Transform = empty
• Font Style = empty
• Font Size Overrides
  • Desktop Size Override = 15px
  • Mobile Size Override = 14px

H6

• Font Family = empty
• Color = empty
• Line Height = empty
• Font Weight = empty
• Letter Spacing = empty
• Max-Wdith = 100%
• Text Transform = empty
• Font Style = empty
• Font Size Overrides
  • Desktop Size Override = 14px
  • Mobile Size Override = 13px

Text

• Desktop Base Size = 18px
• Mobile Base Size = 16px
• Desktop Ratio = 1.333
• Mobile Ratio = 1.2

All

• Font Family = empty
• Default Text Color = --text-dark
• Default Line Height = cal(6px + 2ex)
• Font Weight = empty
• Letter Spacing = empty
• Max-Width = empty
• Font Style = empty
• Text Transform = empty
• Text Wrap = Pretty

XXL

• Line Height = empty
• Font Weight = empty
• Letter Spacing = empty
• Max-Width = 100%
• Text Transform = empty
• Font Style = empty
• Font Size Overrides
  • Desktop Size Override = empty
  • Mobile Size Override = empty

XL

• Line Height = empty
• Font Weight = empty
• Letter Spacing = empty
• Max-Width = 100%
• Text Transform = empty
• Font Style = empty
• Font Size Overrides
  • Desktop Size Override = empty
  • Mobile Size Override = empty

L

• Line Height = empty
• Font Weight = empty
• Letter Spacing = empty
• Max-Width = 100%
• Text Transform = empty
• Font Style = empty
• Font Size Overrides
  • Desktop Size Override = empty
  • Mobile Size Override = empty

M

• Default Line Height = calc(6px + 2ex)
• Font Weight = empty
• Letter Spacing = empty
• Max-Width = 100%
• Text Transform = empty
• Font Style = empty
• Font Size Overrides
  • Desktop Size Override = empty
  • Mobile Size Override = empty

S

• Line Height = empty
• Font Weight = empty
• Letter Spacing = empty
• Max-Width = 100%
• Text Transform = empty
• Font Style = empty
• Font Size Overrides
  • Desktop Size Override = 15px
  • Mobile Size Override = 14px

XS

• Line Height = empty
• Font Weight = empty
• Letter Spacing = empty
• Max-Width = 100%
• Text Transform = empty
• Font Style = empty
• Font Size Overrides
  • Desktop Size Override = 14px
  • Mobile Size Override = 13px

Fonts

Outfit (Static, 400)

• Font Type = Static
• Font Family = Outfit
• Font File Path = /wp-content/uploads/outfit-v11-latin-regular.woff2
• Font Format = Woff2
• Font Style = Normal
• Font Weight = 400
• Font Display = Swap
• Fallbacks
  • Font File Path =
  • Font Format =

Outfit (Static, 700)

• Font Type = Static
• Font Family = Outfit
• Font File Path = /wp-content/uploads/outfit-v11-latin-700.woff2
• Font Format = Woff2
• Font Style = Normal
• Font Weight = 700
• Font Display = Swap
• Fallbacks
  • Font File Path =
  • Font Format =

Outfit (Static, 900)

• Font Type = Static
• Font Family = Outfit
• Font File Path = /wp-content/uploads/outfit-v11-latin-900.woff2
• Font Format = Woff2
• Font Style = Normal
• Font Weight = 900
• Font Display = Swap
• Fallbacks
  • Font File Path =
  • Font Format =

Font 4

• Font Type = Static
• Font Family =
• Font File Path =
• Font Format =
• Font Style =
• Font Weight =
• Font Display =
• Fallbacks
  • Font File Path =
  • Font Format =

Font 5

• Font Type = Static
• Font Family =
• Font File Path =
• Font Format =
• Font Style =
• Font Weight =
• Font Display =
• Fallbacks
  • Font File Path =
  • Font Format =

Layout

Website Dimensions

• Content Width = 1366px
• Minimum Width = 360px

Header

• Header Height (Desktop) = 0px
• Header Height (Mobile) = 0px
• Header Settings
  • Offset Content Automatically = false
  • Offset Scroll Margin Automatically = true

Content Grid

• Content Grid = true
• Default Sections to Content Grid = false
• Feature Width = 50px
• Feature Max Width = 100px

Auto Grid

• Flow Option = Auto-Fit
• Aggressiveness = .7
• Ratio Breakpoint = 992px

Boxed Layout

• Boxed Layout = false

Spacing

Standard Spacing

Base Spacing

• Base Value (Desktop) = 30px
• Base Value (Mobile) = 24px

Base Scale

• Desktop Ratio = 1.5
• Mobile Ratio = 1.333

Section Spacing

Padding Multiplier for Sections

• Desktop Multiplier = 3
• Mobile Multiplier = 2

Gutter Spacing

• Desktop Gutter = 48px
• Mobile Gutter = 16px

Default Top & Bottom Padding

• Block Padding = --section-space-m

Contextual Spacing

• Container Gap = --space-xl
• Content Gap = --space-l
• Grid Gap = --space-m

Automatic Spacing

• Auto Container Gap = true
• Auto Content Gap = true
• Auto Grid Gap = true

Smart Spacing

• Smart Spacing = true

Headings

• All (H2-H6) = 1.2em
• H2 = empty
• H3 = empty
• H4 = empty
• H5 = empty
• H6 = empty

Text & Links

Text

• Paragraphs = 1em

Lists

• List (Block) = --paragraph-spacing
• List (Index) = 2em
• List Items = .5em

Nested Lists

• Nested List (Block) = empty
• Nested List (Indent) = 1em
• Nested List Items = empty

Other

• Flow Spacing = --paragraph-spacing

• Figures = --paragraph-spacing

• Figcaptions = .5em

• Blockquotes = --paragraph-spacing

• Target Additional Selectors = empty

• Avoid Duplicate Margins = :is(figure, blockquote, ul, ol):where(:not(:first-child))

Buttons & Links

Buttons

Global (All Buttons)

Button Spacing and Dimension (All)

• Block Padding = .75em
• Inline Padding = 1.5em
• Minimum Button Width = 140px
• Button Width = max-content
• Full Width Buttons on Mobile = false

Button Typography (All)

• Font Family = inherit
• Font Size = --text-m
• Line Height = 1
• Letter Spacing = 0.05em
• Font Weight = 700
• Font Style = Normal
• Text Transform = Uppercase
• Text Decoration = None / None
• Justify Content = Center
• Text Align = Center

Button Border Styles (All)

• Border Width = 2px
• Border Style = Solid
• Border Radius = --radius

Button Transition (All)

• Use Global Transition = true

Primary

Solid (.btn—primary)

• Background = --primary / --primary-hover
• Text Color = --primary-ultra-light / --primary-ultra-light
• Border Color = --btn-background / --btn-background-hover
• Focus Color = --primary-light

Dark (.btn—primary-dark)

• Background = --primary-dark / --primary-ultra-dark
• Text Color = --primary-ultra-light / --primary-ultra-light
• Border Color = --btn-background / --btn-background-hover
• Focus Color = --primary-semi-dark

Light (.btn—primary-light)

• Background = --primary-ultra-light / --primary-light
• Text Color = --primary-dark / --primary-ultra-dark
• Border Color = --btn-background / --btn-background-hover
• Focus Color = --primary-light

Outline (.btn—primary.btn—outline)

• Background = transparent / --primary-hover
• Text Color = --primary / --primary-ultra-light
• Border Color = --primary / --btn-background-hover
• Focus Color = --primary-semi-light

Dark Outline (.btn--primary-dark.btn--outline)

• Background = transparent / --primary-dark
• Text Color = --primary-dark / --primary-ultra-light
• Border Color = --primary-dark / --btn-background-hover
• Focus Color = --primary-semi-dark

Light Outline (.btn--primary-light.btn--outline)

• Background = transparent / --primary-light
• Text Color = --primary-light / --primary-dark
• Border Color = --primary-light / --btn-background-hover
• Focus Color = --primary-light

Neutral

Solid (.btn--neutral)

• Background = --neutral / --neutral-dark
• Text Color = --neutral-ultra-light / --neutral-ultra-light
• Border Color = --btn-background / --btn-background-hover
• Focus Color = --primary

Dark (.btn--neutral-dark)

• Background = --neutral-dark / --neutral-ultra-dark
• Text Color = --neutral-ultra-light / --neutral-ultra-light
• Border Color = --btn-background / --btn-background-hover
• Focus Color = --neutral-semi-dark

Light (.btn--neutral-light)

• Background = --neutral-ultra-light / --neutral-light
• Text Color = --neutral / --neutral-ultra-dark
• Border Color = --btn-background / --btn-background-hover
• Focus Color = --neutral-light

Outline (.btn--neutral.btn--outline)

• Background = transparent / --neutral-hover
• Text Color = --neutral / --neutral-ultra-light
• Border Color = --neutral / --neutral-hover
• Focus Color = --neutral-semi-light

Dark Outline (.btn--neutral-dark.btn--outline)

• Background = transparent / --neutral-dark
• Text Color = --neutral-dark / --neutral-ultra-light
• Border Color = --neutral-dark / --btn-background-hover
• Focus Color = --neutral-semi-dark

Light Outline (.btn--neutral-light.btn--outline)

• Background = transparent / --neutral-light
• Text Color = --neutral-light / --neutral-dark
• Border Color = --neutral-light / --btn-background-hover
• Focus Color = --neutral-light

Info

Solid (.btn--neutral)

• Background = --info / --info-hover
• Text Color = --info-ultra-light / --info-ultra-light
• Border Color = --btn-background / --btn-background-hover
• Focus Color = --info-light

Dark (.btn--neutral-dark)

• Background = --info-dark / --info-ultra-dark
• Text Color = --info-ultra-light / --info-ultra-light
• Border Color = --btn-background / --btn-background-hover
• Focus Color = --info-semi-dark

Light (.btn--neutral-light)

• Background = --info-ultra-light / --info-light
• Text Color = --info / --info-ultra-dark
• Border Color = --btn-background / --btn-background-hover
• Focus Color = --info-light

Outline (.btn--neutral.btn--outline)

• Background = transparent / --info-hover
• Text Color = --info-dark / --info-ultra-light
• Border Color = --info-dark / --btn-background-hover
• Focus Color = --info-semi-dark

Dark Outline (.btn--neutral-dark.btn--outline)

• Background = transparent / --info-dark
• Text Color = --info-light / --info-ultra-light
• Border Color = --info-light / --btn-background-hover
• Focus Color = --info-light

Light Outline (.btn--neutral-light.btn--outline)

• Background = transparent / --info-light
• Text Color = --info-light / --info-dark
• Border Color = --info-light / --btn-background-hover
• Focus Color = --info-light

Warning

Solid (.btn--neutral)

• Background = --warning / --warning-hover
• Text Color = --warning-ultra-light / --warning-ultra-light
• Border Color = --btn-background / --btn-background-hover
• Focus Color = --warning-light

Dark (.btn--neutral-dark)

• Background = --warning-dark / --warning-ultra-dark
• Text Color = --warning-ultra-light / --warning-ultra-light
• Border Color = --btn-background / --btn-background-hover
• Focus Color = --warning-semi-dark

Light (.btn--neutral-light)

• Background = --warning-ultra-light / --warning-light
• Text Color = --warning / --warning-ultra-dark
• Border Color = --btn-background / --btn-background-hover
• Focus Color = --warning-light

Outline (.btn--neutral.btn--outline)

• Background = transparent / --warning-hover
• Text Color = --warning / --warning-ultra-light
• Border Color = --warning / --btn-background-hover
• Focus Color = --warning-semi-light

Dark Outline (.btn--neutral-dark.btn--outline)

• Background = transparent / --warning-dark
• Text Color = --warning-dark / --warning-ultra-light
• Border Color = --warning-dark / --warning-dark
• Focus Color = --warning-semi-dark

Light Outline (.btn--neutral-light.btn--outline)

• Background = transparent / --warning-light
• Text Color = --warning-light / --warning-dark
• Border Color = --warning-light / --btn-background-hover
• Focus Color = --warning-light

Danger

Solid (.btn--neutral)

• Background = --danger / --danger-hover
• Text Color = --danger-ultra-light / --danger-ultra-light
• Border Color = --btn-background / --btn-background-hover
• Focus Color = --danger-light

Dark (.btn--neutral-dark)

• Background = --danger-dark / --danger-ultra-dark
• Text Color = --danger-ultra-light / --danger-ultra-light
• Border Color = --btn-background / --btn-background-hover
• Focus Color = --danger-semi-dark

Light (.btn--neutral-light)

• Background = --danger-ultra-light / --danger-light
• Text Color = --danger / --danger-ultra-dark
• Border Color = --btn-background / --btn-background-hover
• Focus Color = --danger-light

Outline (.btn--neutral.btn--outline)

• Background = transparent / --danger-hover
• Text Color = --danger / --danger-ultra-light
• Border Color = --danger / --btn-background-hover
• Focus Color = --danger-semi-light

Dark Outline (.btn--neutral-dark.btn--outline)

• Background = transparent / --danger-dark
• Text Color = --danger-dark / --danger-ultra-light
• Border Color = --danger-dark / --btn-background-hover
• Focus Color = --danger-semi-dark

Light Outline (.btn--neutral-light.btn--outline)

• Background = transparent / --danger-light
• Text Color = --danger-light / --danger-dark
• Border Color = --danger-light / --btn-background-hover
• Focus Color = --danger-light

Success

Solid (.btn--neutral)

• Background = --success / --success-hover
• Text Color = --success-ultra-light / --success-ultra-light
• Border Color = --btn-background / --btn-background-hover
• Focus Color = --success-light

Dark (.btn--neutral-dark)

• Background = --success-dark / --success-ultra-dark
• Text Color = --success-ultra-light / --success-ultra-light
• Border Color = --btn-background / --btn-background-hover
• Focus Color = --success-semi-dark

Light (.btn--neutral-light)

• Background = --success-ultra-light / --success-light
• Text Color = --success / --success-ultra-dark
• Border Color = --btn-background / --btn-background-hover
• Focus Color = --success-light

Outline (.btn--neutral.btn--outline)

• Background = transparent / --success-hover
• Text Color = --success / --success-ultra-light
• Border Color = --success / --btn-background-hover
• Focus Color = --success-semi-light

Dark Outline (.btn--neutral-dark.btn--outline)

• Background = transparent / --success-dark
• Text Color = --success-dark / --success-ultra-light
• Border Color = --success-dark / --success-dark
• Focus Color = --success-semi-dark

Light Outline (.btn--neutral-light.btn--outline)

• Background = transparent / --success-light
• Text Color = --success-light / --success-dark
• Border Color = --success-light / --btn-background-hover
• Focus Color = --success-light

Links

Styles

• Colors = --primary / --primary-hover
• Weight = inherit
• Decoration = Inherit / Inherit
• Decoration Color = empty / empty
• Decoration Thickness = empty
• Underline Offset = auto
• Use Global Transition Style = true

Rules

• Sync Link & Decoration Color (Link Classes) = false
• Add Link Default Exclusions = true = "header a", "footer a"

External Links

• Indicate External Links = false

Options

• Buttons (Master) = true

Primary

• Primary Buttons = true
• Light/Dark Variants = true
• Outline Variants = true

Base

• Base Button = false

Neutral

• Neutral Button = true
• Light/Dark Variants = true
• Outline Variants = true

Warning

• Warning Button = true
• Light/Dark Variants = true
• Outline Variants = true

Info

• Info Button = true
• Light/Dark Variants = true
• Outline Variants = true

Danger

• Danger Button = true
• Light/Dark Variants = true
• Outline Variants = true

Success

• Success Button = true
• Light/Dark Variants = true
• Outline Variants = true

Additional Options

• Exclude ‘.btn—’ Selectors = empty

Surfaces & Overlays

Custom Surfaces

1

Surface Settings

• Name = 1
• Background Color = --body-bg-color
• Surface Asset = empty
• Asset is URL = true
• Surface Size = 200px
• Surface Position = center center
• Attachment = Scroll
• Repeat = repeat
• Color Relationship = None

Animation Options

• Animation = empty

Overlay

• Overlay = empty

2

Surface Settings

• Name = 2
• Background Color = --body-bg-color
• Surface Asset = empty
• Asset is URL = true
• Surface Size = 200px
• Surface Position = center center
• Attachment = Scroll
• Repeat = repeat
• Color Relationship = None

Animation Options

• Animation = empty

Overlay

• Overlay = empty

3

Surface Settings

• Name = 3
• Background Color = --body-bg-color
• Surface Asset = empty
• Asset is URL = true
• Surface Size = 200px
• Surface Position = center center
• Attachment = Scroll
• Repeat = repeat
• Color Relationship = None

Animation Options

• Animation = empty

Overlay

• Overlay = empty

4

Surface Settings

• Name = 4
• Background Color = --body-bg-color
• Surface Asset = empty
• Asset is URL = true
• Surface Size = 200px
• Surface Position = center center
• Attachment = Scroll
• Repeat = repeat
• Color Relationship = None

Animation Options

• Animation = empty

Overlay

• Overlay = empty

5

Surface Settings

• Name = 5
• Background Color = --body-bg-color
• Surface Asset = empty
• Asset is URL = true
• Surface Size = 200px
• Surface Position = center center
• Attachment = Scroll
• Repeat = repeat
• Color Relationship = None

Animation Options

• Animation = empty

Overlay

• Overlay = empty

Basic Overlays

• Enable Basic Overlays = true
• Pseudo Element = Before

Custom Overlays

1

Overlay Settings

• Name = 1
• Background Color = empty
• Background Type = None
• Background Blur = empty
• Overlay Opacity = 0.7
• Blend Mode = empty
• Border Radius = empty
• Inset = 0

Animation Options

• Animation = empty

Nested Overlay

• Nested Overlay = empty

Additional Options

• Pseudo Element = Before

2

Overlay Settings

• Name = 2
• Background Color = empty
• Background Type = None
• Background Blur = empty
• Overlay Opacity = 0.7
• Blend Mode = empty
• Border Radius = empty
• Inset = 0

Animation Options

• Animation = empty

Nested Overlay

• Nested Overlay = empty

Additional Options

• Pseudo Element = Before

3

Overlay Settings

• Name = 3
• Background Color = empty
• Background Type = None
• Background Blur = empty
• Overlay Opacity = 0.7
• Blend Mode = empty
• Border Radius = empty
• Inset = 0

Animation Options

• Animation = empty

Nested Overlay

• Nested Overlay = empty

Additional Options

• Pseudo Element = Before

4

Overlay Settings

• Name = 4
• Background Color = empty
• Background Type = None
• Background Blur = empty
• Overlay Opacity = 0.7
• Blend Mode = empty
• Border Radius = empty
• Inset = 0

Animation Options

• Animation = empty

Nested Overlay

• Nested Overlay = empty

Additional Options

• Pseudo Element = Before

5

Overlay Settings

• Name = 5
• Background Color = empty
• Background Type = None
• Background Blur = empty
• Overlay Opacity = 0.7
• Blend Mode = empty
• Border Radius = empty
• Inset = 0

Animation Options

• Animation = empty

Nested Overlay

• Nested Overlay = empty

Additional Options

• Pseudo Element = Before

Borders & Dividers

Borders

• Border Radius = 8px
• Border Width = 1px
• Border Style = solid
• Border Color (Dark) = color-mix(in oklch, var(--black) 20%, transparent)
• Border Color (Light) = color-mix(in oklch, var(--white) 20%, transparent)
• Default Border Scheme = Dark

Additional Radius Options

• Radius Scale = 2
• Auto Radius Selectors = img:not(header img), figure:not(figure:has(img))
• Add Radius Automatically = true
• Inverted Radius Support = true
• Generate Extra Radius Sizes = true

Dividers

• Divider Size = 1px
• Divider Style = solid
• Divider Gap = --content-gap
• Divider Color (Dark) = color-mix(in srgb, var(--black) 20%, transparent)
• Divider Color (Light) = color-mix(in srgb, var(--white) 20%, transparent)
• Default Divider Scheme = Dark

Cards

• Card Framework = true

Card Styling

Default Card Scheme

• Default Card Scheme = Inherit

Styling Options

Background & Foreground

• Background = --neutral-ultra-light
• Heading Color = --text-dark
• Text Color = --text-dark-muted

Spacing

• Card Padding = --space-m
• Card Content Gap = calc(var(--content-gap) / 2)

Typography

• Heading Size = --h3
• Text Size = --text-s

Borders

• Concentric Radius = false
• Border Width = --border-width
• Border Style = Solid
• Border Color = --border-color-dark
• Border Radius = --radius

Buttons & Links

• Link Color = --primary / —primary-hover
• Button Style = primary
• Button Text Size = --text-s

Icons

• Icon Size = --icon-size-l
• Icon Color = --icon-color
• Use Boxed Icon Style = false

Avatars

• Avatar Size = 140px
• Border Width = --border-width
• Border Style = --border-style
• Avatar Border Color = empty
• Radius = --radius
• Aspect Ratio = 1

Media

• Radius = --radius
• Aspect Ratio = 4/3
• Object Fit = cover

Shadows

• Card Shadow = empty

Card Options

Card Targeting

• Card Selectors = empty

More Options

• Default Cards to Display Grid (Pro) = false

Icons

• Icon Framework = true

Default Style Options

• Default Icon Scheme = Inherit
• Default Icon Style = Plain

Icon Styling Options

Icon Color

• Icon Color = --text-dark-muted / --primary

Boxed Icon Styling

• Icon Padding = .15em
• Icon Background = --neutral-ultra-light / --neutral-light
• Icon Border Width = --border-width
• Icon Border Style = --border-style
• Icon Border Color = --border-color-dark / inherit
• Icon Radius = --radius

Icon Sizes

Extra Small Icons

• Icon Size (XS) = 12px
• Icon Padding (XS) = --icon-padding

Small Icons

• Icon Size (S) = 18px
• Icon Padding (S) = --icon-padding

Medium Icons

• Icon Size (M) = 32px
• Icon Padding (M) = --icon-padding

Large Icons

• Icon Size (L) = 64px
• Icon Padding (L) = --icon-padding

Extra Large Icons

• Icon Size (XL) = 128px
• Icon Padding (XL) = --icon-padding

Extra-Extra Large Icons

• Icon Size (XXL) = 256px
• Icon Padding (XXL) = --icon-padding

Icon Lists

• Boxed List Icons = false
• Icon Size = 1em
• List Gap = 1em
• Inline Offset = empty
• Block Offset = empty

Icon Framework Options

• Icon Data Attribute = data-icon

Additional Styling

Focus

• Focus Style = Outline
• Focus Color = --primary
• Focus Width = 2px
• Focus Offset = 2px

Transition

• Transition Variables = true
• Timing Function = ease-in-out
• Duration = .2s
• Delay = 0s

Scroll Offsets

• Scroll Offset (Desktop) = 0px
• Scroll Offset (Mobile) = 0px

Sticky Styling

• Offset Sticky Automatically = true

Box Shadows

m

• Name = m
• Value = 0 0 40px color-mix(in srgb, black 10%, transparent)

l

• Name = l
• Value = 0 0 60px color-mix(in srgb, black 20%, transparent)

xl

• Name = xl
• Value = 0 0 80px color-mix(in srgb, black 30%, transparent)

Blockquotes

Main

• Padding = --space-m
• Gap = 1em
• Border Width = 0 0 0 3px
• Border Style = solid
• Border Color = --primary
• Border Radius = --radius
• Background = --neutral-ultra-light
• Box Shadow = none
• Max Width = empty

Text

• Color = inherit
• Font Family = inherit
• Font Style = normal
• Font Size = --text-l
• Font Weight = normal
• Line Height = inherit
• Text Align = left
• Text Transform = none

Footer & Caption

• Padding = 0
• Margin = 1em 0
• Font Family = inherit
• Font Size = --text-s
• Font Weight = normal
• Font Style = normal
• Line Height = 1.5
• Text Transform = none
• Color = currentColor

Cite

• Font Family = inherit
• Font Size = inherit
• Font Weight = inherit
• Font Style = inherit
• Line Height = inherit
• Text Transform = inherit
• Color = currentColor

Options

• Blockquote Styling = true
• Auto Style Blockquotes = true
• Exclude Selectors = :is([class*='-card'] blockquote, figure[class*='-card'])

Selection Styling

• Background Color = empty
• Text Color = empty
• Alt Background Color = empty
• Alt Text Color = empty

Columns

Column Widths

• Small = 128px
• Medium = 256px
• Large = 360px

Column Rules

• Small = .5px
• Medium = 1px
• Large = 2px

Form Styling

Settings

• Load Forms = true
• Style Forms Automatically = true

Styling

Form Defaults

Spacing

• Grid Gap = 20px
• Inline Padding = 0px
• Block Padding = 0px

Typography

• Font Size = --text-m
• Font Size Small = --text-s
• Font Size Large = --text-l
• Font Style = Normal
• Font Weight = empty
• Letter Spacing = --text-letter-spacing
• Line Height = --text-line-height
• Text Decoration = None
• Text Transform = None

Border

• Border Radius = 0
• Border Size = 0px
• Border Style = Solid
• Border Color = transparent

Transition

• Use Global Transition = true

Colors

• Background Color = transparent
• Base = --text-dark
• Base Contrast = --text-light
• Accent = --primary
• Neutral = --neutral-light
• Primary = --primary
• Secondary = --secondary

Tab

Borders

• Bottom Border Style = Solid
• Bottom Border Size = 1px
• Active Border Radius = --btn-border-radius
• Active Border Style = Solid
• Active Border Size = 1px

Border Color

• Default Border = --primary-light
• Active Border = --primary
• Focused Border = --primary
• Disabled Border = color-mix(in oklch, var(--neutral) 60%, transparent)
• Bottom Border = --neutral

Size

• Tabs Gap = 0px
• Inline Padding = 1.5em
• Block Padding = .75em

Background Color

• Default = transparent
• Active = --text-light
• Focused = --text-light
• Disabled = color-mix(in oklch, var(--neutral) 60%, transparent)

Typography

• Font Size = --f-form-font-size
• Font Weight = empty
• Font Style = Inherit
• Line Height = --f-form-line-height
• Text Transform = Inherit
• Text Decoration = Inherit

Text Color

• Default = --f-form-color-base
• Active Text = --f-form-color-base
• Focused Text = --f-form-color-base
• Disabled Text = color-mix(in oklch, var(--neutral) 60%, transparent)

Styled - Steps

• Size = --space-l
• Font Size = --f-form-font-size
• Font Style = Normal
• Font Weight = empty
• Text Decoration = None

Styled - Steps Colors

• Background = --white
• Active Background = --primary-light
• Complete Background = --primary
• Border = --primary-light
• Active Border = --primary
• Complete Border = --primary
• Text Color = --f-form-color-base
• Active Text = --f-form-color-base
• Complete Text = --text-light

Section

• Background Color = transparent

Legend

• Font Size = --f-form-font-size
• Font Style = Normal
• Font Weight = empty
• Line Height = --f-form-line-height
• Text Decoration = None
• Text Transform = None
• Gap = 1rem

Legend Colors

• Legend Background = transparent
• Legend = --f-form-color-base

Repeater Icons

• Size = --text-m

Fieldset

• Font Size = --f-form-font-size
• Font Style = Normal
• Font Weight = 400
• Text Transform = None
• Text Decoration = None
• Gap = 0.5em

Fieldset Legend

• Legend Color = --f-form-color-base
• Legend Background = transparent

Label

• Font Size = --f-form-font-size
• Font Weight = 400
• Line Height = --text-line-height
• Gap = 0.5em
• Inside Label Vertical Offset = -20px
• Inside Label Scale = 0.9
• Label Colors
• Text Color = --neutral-dark
• Background Color = empty

Help

• Font Size = --text-s
• Font Style = Normal
• Font Weight = 400
• Line Height = 1.5
• Text Decoration = None
• Text Transform = None
• Gap = 0.5em
• Help Colors
• Text Color = --f-form-color-base
• Background Color = transparent

Input

Typography

• Font Size = --text-m
• Font Style = Normal
• Font Weight = 400
• Letter Spacing = --text-letter-spacing
• Line Height = --text-line-height
• Text Decoration = None
• Text Transform = None

Typography Colors

• Text Color = --f-form-color-base / --f-field-color
• Focus Text Color = --f-field-color
• Disabled Text Color = color-mix(in oklch, var(--neutral) 80%, transparent)
• Invalid Text Color = --danger
• Placeholder Text Color = --neutral-light

Background

• Background Color = --f-form-color-base-contrast / --f-field-color-background
• Focus Background = --f-field-color-background
• Disabled Background = color-mix(in oklch, var(--neutral) 80%, transparent)
• Invalid Background = --f-field-color-background

Border

• Placement = All
• Radius = --radius
• Size = 1px
• Style = Solid

Border Colors

• Border Color = --border-color-dark / --border-color-dark
• Focus Border Color = --primary
• Disabled Border Color = color-mix(in oklch, var(--neutral) 60%, transparent)
• Invalid Border Color = --danger
• Box Shadow (Focus) Color = --primary

Box Shadow (Focus)

• Width = 0px

Invalid Feedback

• Font Size = --text-s
• Font Style = Normal
• Font Weight = 400
• Letter Spacing = --text-letter-spacing
• Line Height = --text-line-height
• Text Decoration = None
• Text Transform = None
• Gap = 0.5em

Invalid Feedback Colors

• Invalid Text Color = --danger
• Invalid Background = transparent

Padding

• Inline Padding = 10px
• Block Padding = 8.5px

Prefix/Suffix

• Font Size = --text-s
• Font Style = Normal
• Font Weight = 400
• Letter Spacing = --text-letter-spacing
• Line Height = --text-line-height
• Text Decoration = None
• Text Transform = None

Prefix/Suffix Colors

• Color = --f-form-color-base
• Background = --neutral-semi-light

Tooltip

• Font Size = --text-xs
• Font Weight = 400
• Line Height = --text-line-height
• Border Radius = --radius-s
• Gap = 5px

Buttons

• Submit Button Style = primary
• Next Button Style = primary
• Previous Button Style = primary.btn--outline
• Save Button Style = primary
• Reset Button Style = primary
• Clear Button Style = primary.btn--outline

Checkbox

• Border Radius = 4px
• Inline Gap = 6px
• Block Gap = 10px

Checkbox Colors

• Color Background = --white
• Checked Color Background = --primary
• Checkmark Color = --white

Button

• Button Color Background = --neutral-light
• Button Color = --neutral
• Checked Button Color Background = --primary
• Checked Button Color = --white

Switch

• Switch Color = --neutral-light
• Checked Switch Color Background = --primary
• Checked Switch Color = --white

Radio

• Gap Inline = 6px
• Gap Block = 10px

Radio Colors

• Color Background = --white
• Checked Color = --primary

Button

• Button Color Background = --neutral-light
• Button Color = --neutral
• Checked Button Color Background = --primary
• Checked Button Color = --white

Switch

• Switch Color = --neutral-light
• Checked Switch Color Background = --primary
• Checked Switch Color = --white

Select

• Arrow Width = 12px
• Arrow Height = 6px

Select Colors

• Select Arrow Color = --neutral

Select2

• Choice Background = --neutral-light
• Choice Color = --neutral
• Remove Choice Color = --neutral
• Result Background = --neutral-light
• Selected Result Background = --primary
• Highlighted Result Background = --primary
• Result Color = --neutral
• Selected Result Color = --white
• Highlighted Result Color = --white

Progress Bar

• Background Color = --neutral-ultra-light
• Bar Color = --primary-light
• Complete Bar Color = --primary

Range Slider

• Track Border Radius = 50px
• Tickmark Font Size = --text-s
• Tickmark Font Style = Normal
• Tickmark Font Weight = 400
• Tickmark Letter Spacing = --text-letter-spacing
• Tickmark Line Height = --text-line-height
• Tickmark Text Decoration = None
• Tickmark Text Transform = None

Range Slider Colors

• Track Color = --neutral-ultra-light
• Left Track Color = --neutral-light
• Right Track Color = --neutral-ultra-light
• Thumb Color = --primary
• Tickmark Color = --neutral
• Tickmark Label Color = --neutral

Other Field Types

Date/Time

• Calendar Border Style = Solid
• Calendar Border Width = 1px
• Font Size = --text-s
• Font Style = Normal
• Font Weight = 400
• Letter Spacing = --text-letter-spacing
• Line Height = --text-line-height
• Text Decoration = None
• Text Transform = None
• Block Padding = 6px
• Inline Padding = 8px

Navigation

• Border Style = Solid
• Border Width = 1px

File

• Dropzone Border Style = Solid
• Dropzone Border Width = 1px
• Dropzone Border Radius = --radius
• Dropzone Inline Padding = --wsf-form-grid-gap
• Dropzone Border Radius = --wsf-form-grid-gap
• Progress Border Radius = --radius
• Progress Gap = 5px
• Progress Height = 10px

Text Editor

• Font Size = --text-s
• Font Style = Normal
• Font Weight = 400
• Letter Spacing = --text-letter-spacing
• Line Height = --text-line-height
• Text Decoration = None

Global SCSS

= empty

Options

Workflow Enhancements

• Auto Object Fit = true

Class Manager

• Accessibility Classes = true
• Contextual Colors = true
• Gaps (Contextual) = false
• Is Background (.is-bg) = true
• Section Padding = false
• Smart Spacing = true
• Sticky Classes = false
• Text Size Classes = false
• Transition Classes = false
• Width = false

Variable Manager

• Auto Grid Variables = true
• Black and White Color Variables = true
• Border Variables = true
• Box Shadow Variables = true
• Column Variables = true
• Contextual Color Variables = true
• Contextual Space Variables = true
• Divider Variables = true
• Grid Variables = true
• Header Height Variables = true
• Heading Size Variables = true
• Link Variables = true
• Radius Variables = true
• Section Space Variables = true
• Space Variables = true
• Sticky Variables = true
• Text Size Variables = true
• Transition Variables = true
• Width Variables = true

Defaults & Misc

• Reset Styles = true
• Default Body Styles = true
• Default Heading Styles = true
• Default Text Styles = true
• Default Link Styles = true
• Default Section Styles = true
• Focus Styles = true
• Smooth Scrolling (CSS) = true
• Reduce Motion = true
• Overflow Detection = false

Gutenberg

• Generate Color Palette = false
• Replace Color Palette = false
• Class-First Workflow = true

Blog Posts

• Blog Post Type(s) = post,blog,legal,news
• Blog Post BG Color = empty
• Blog Post Text Color = empty

Layer Controls

• Default Styles = false
• Buttons & Links = false
• Card Framework = false
• Icon Framework = false
• Utility Classes = false

Plugin Settings

• Inline ACSS Tokens = false
• Display Dashboard Icon = false
• Receive Beta Releases = false
• Enable Debugging = false
• Admin Bar Link = true
• Admin Link Position = 90
• Delete on Deactivation = no

Frames

Components

• N/A

Additional Options

• Bricks Template Gallery Enhancements = true

Experimental Features

• N/A

User Shortcuts

• Dashboard = Ctrl + Shift + O
• Save = Ctrl + S
• Custom CSS = Ctrl + Shift + C
• Typography = Ctrl + Shift + T
• Spacing = Ctrl + Shift + S
• Pin Dashboard = Ctrl + Shift + P

Export

Settings File Coming Soon

Will upload a mac-starter-acss-settings.json export file later. We need to refactor the vault first and connect the vault attachments to the Docusaurus assets folder without breaking the links during publishing or cloning.