LogoLogo
These products have been deprecated and are no longer being maintained. For a better experience and support, please check out our new stack Aragon OSx.
Aragon Legacy Documentation
Aragon Legacy Documentation
  • 🔷Aragon
    • Aragon Legacy Documentation
    • Aragon Values, Finances, and Legal
      • Legal and technical infrastructure
      • Financial infrastructure
      • Meet your DAO support network
    • Learn about DAOs
      • What is a DAO?
      • Why do we need DAOs?
      • What is decentralized autonomous governance?
      • What is the AN DAO?
      • TAO Voting
      • Why use Aragon to build a DAO?
  • 🌐Products
    • Prerequisites
    • Quickstart
    • Setting up a Metamask Wallet
      • Getting started with Ethereum
      • Getting started with Goerli Testnet
      • Getting started with Polygon
      • Getting started with Mumbai Testnet
      • Getting started with Harmony
      • Getting started with Harmony testnet
      • Getting started with Metis Andromeda
      • Getting started with Stardust Testnet
      • Getting started with BSC Testnet
      • How to sign a transaction?
      • Import your seed wallet to Metamask
      • Gas Tracker
    • Setting up a Frame Wallet
    • Setting up a Gnosis Safe MultiSig Wallet
    • Aragon Client
      • What is Aragon Client
      • How to create a DAO
        • Templates
        • Using the Company Template
        • Using the Membership Template
        • Use the Reputation template
      • How to create a DAO on Polygon
      • How to create a DAO on Harmony
      • How to navigate your DAO
        • Home
        • The Apps
          • Tokens App
          • Voting App
          • Finance App
          • Agent App
            • How to install the Agent App in your DAO
            • Using Agent with Frame
        • System Setting
          • Permissions Setting
          • App Center
          • Organization Setting
      • After you've started a DAO
        • How to change the Quorum of your DAO
          • Change Quorum using Aragon Console
          • Change Quorum using EVMcrispr
        • How to create a Legal Wrapper for your DAO with Otoco
        • How to Operate your DAO from your Mobile Phone
      • How to Brick your DAO 🧱
    • Aragon Govern
      • What is Aragon Govern?
      • How to create a Govern DAO
      • Navigate into your Govern DAO
        • How to mint and assign DAO tokens to others
        • How to deposit funds
        • Challenging a transaction
      • Reasons for the delay period in the transaction
      • Collateral for scheduling or challenging a transaction. Why?
      • Acting as a guardian for an Aragon Govern dispute
      • Using the Client DAO with the Govern DAO
    • Aragon Voice
      • What is Aragon Voice?
      • Creating a voting proposal
      • Creating a voting proposal using your token
      • Voting on a proposal
    • Aragon Vocdoni
      • What is Aragon Vocdoni
      • Creating a Vodconi organization
      • Accessing your Vocdoni organization
      • Navigating your Vocdoni organization
        • Creating a voting proposal
        • Voting on a proposal (anonymous voting disabled)
        • Voting on a proposal (anonymous voting enabled)
    • Aragon Court
      • What is Aragon Court
      • Court Dashboard
      • Dispute lifecycle
      • Acting as guardian for a dispute
      • Glossary
  • 🛠️Developers
    • Legacy Developer Documentation
    • General Tools
      • The Basics
        • Before starting
        • Quick start
        • Tech Stack
        • App permissions
        • Forwarding
        • Upgradeability
        • Package management
        • Templates
        • Aragon client
        • Human readable transactions
      • Guides
        • How to create your first custom DAO using Aragon CLI!
        • How to use the Agent App
          • Installing Aragon Agent from aragonCLI
          • Setting and Checking permissions
          • Interacting with Aragon Agent
        • How to build your first Aragon App!
        • How to publish an Aragon App to aragonPM
        • How to migrate existing Aragon App to Buidler plugin
        • How to change the Quorum of your DAO
          • Change Quorum using Aragon Console
          • Change Quorum using EVMcrispr
        • Deploying Aragon Client in new Chains
          • Deployments information
            • Harmony testnet
            • BSC Tesnet
            • Harmony
            • Metis stardust
            • Metis Andromeda
        • How to Brick your DAO 🧱
        • How to sign with Web3 providers
          • Setting up a Metamask Wallet
            • Import your seed phrase into Metamask
            • Import your private key into Metamask
            • Sign a transaction with Metamask
          • Setting up a Frame Wallet
            • Sign a Transaction with Frame
        • Troubleshooting
      • aragonOS
        • Introduction
        • Motivations
        • Developing with aragonOS
        • Reference documentation
        • Migrating to aragonOS 4 from aragonOS 3
        • Reference (aragonOS 3)
        • Smart Contract References
          • ACL
            • ACL
            • ACLSyntaxSugar
            • ACLHelpers
            • IACL
            • IACLOracle
          • APM
            • APMNamehash
            • APMRegistry
            • APMInternalAppNames
            • Repo
          • APPS
            • AppProxyBase
            • AppProxyPinned
            • AppProxyUpgradeable
            • AppStorage
            • AragonApp
            • UnsafeAragonApp
          • COMMON
            • Autopetrified
            • ConversionHelpers
            • DelegateProxy
            • DepositableDelegateProxy
            • DepositableStorage
            • EtherTokenConstant
            • IForwarder
            • IForwarderFee
            • IVaultRecoverable
            • Initializable
            • IsContract
            • Petrifiable
            • ReentrancyGuard
            • SafeERC20
            • TimeHelpers
            • Uint256Helpers
            • UnstructuredStorage
            • VaultRecoverable
          • ENS
            • ENSConstants
            • ENSSubdomainRegistrar
          • EVMSCRIPT
            • EVMScriptRegistry
            • EVMScriptRunner
            • IEVMScriptExecutor
            • IEVMScriptRegistry
            • EVMScriptRegistryConstants
            • ScriptHelpers
          • EVMSCRIPT/EXECUTORS
            • BaseEVMScriptExecutor
            • CallsScript
          • FACTORY
            • APMRegistryFactory
            • AppProxyFactory
            • DAOFactory
            • ENSFactory
            • EVMScriptRegistryFactory
          • KERNEL
            • IKernel
            • IKernelEvents
            • Kernel
            • KernelAppIds
            • KernelNamespaceConstants
            • KernelProxy
            • KernelStorage
      • aragonCLI
        • Introduction
        • Main commands
        • DAO commands
        • APM commands
        • IPFS commands
        • Global configuration
      • aragonPM
        • Introduction
        • Architecture
        • Reference documentation
      • aragonAPI
        • Introduction
        • Javascript
          • Quick Start
          • App API
          • React API
          • Wrapper
          • Providers
          • Architecture of apps
          • Background Scripts
      • aragonUI
        • Getting started
        • How to upgrade
        • BASE
          • Spacing
          • Colors
          • Text styles
          • Icons
          • Main
        • ACTIONS
          • Button
          • ContextMenu
        • NAVIGATION
          • Tabs
          • Pagination
          • BackButton
          • Link
          • Header
        • STRUCTURE
          • Bar
          • Box
          • Card
          • Split
          • DataView
          • Table
          • EmptyStateCard
          • IdentityBadge
          • TransactionBadge
          • Tag
          • Accordion
          • Timer
          • TokenAmount
          • EthIdenticon
          • TransactionProgress
        • DATA ENTRY
          • AutoComplete
          • DateRangePicker
          • DropDown
          • Switch
          • Radio
          • CheckBox
          • Slider
          • TextInput
          • SearchInput
          • AddressField
          • RadioGroup
          • RadioList
          • TextCopy
          • Field
        • VISUALIZATION
          • CircleGraph
          • LineChart
          • Distribution
        • FEEDBACK
          • Info
          • ProgressBar
          • LoadingRing
          • Toast
          • SyncIndicator
          • FloatIndicator
        • OVERLAYS
          • Help
          • Popover
          • Modal
          • SidePanel
        • ADVANCES
          • ButtonBase
          • FocusVisible
          • PublicUrl
          • Redraw
          • RedrawFromDate
          • Root
          • RootPortal
          • Viewport
      • aragonDS
        • Guidelines
          • Layout
          • Color
          • Iconography
          • Typography
          • Illustrations
        • Components
          • Overview
      • Aragon Connect
        • Guides
          • Aragon Basics
          • Getting started
          • Usage with React
        • Advanced
          • Custom Subgraph queries
          • Writing an App Subgraph
          • Writing an App Connector
        • Connectors
          • Organizations
          • Tokens app
          • Voting app
          • Finance app
        • API reference
          • connect()
          • App
          • Connectors
          • Organization
          • Permission
          • Repo
          • Role
          • TransactionIntent
          • TransactionPath
          • TransactionRequest
          • Types
          • Errors
      • App Center
        • App Center
        • Preparing Assets
        • Submitting Your App to the App Center
    • Product Tools
      • Aragon Govern
        • README
        • Introduction
          • Concepts and background
            • Govern Core concepts
            • ERC3000
          • Developers
            • Getting started
            • Govern.js API
            • Historical deployments
            • GraphQL API
            • Smart contracts breakdown
        • Deployments
          • Mainnet
          • Rinkeby
        • Packages
          • ERC 3k
          • Govern Console
          • Govern contract utils
          • Types
          • govern-create
          • Govern Server
          • govern-subgraph
          • govern-token
          • govern.js
      • Aragon Vocdoni
    • Aragon Client Glossary
  • THE ANT TOKEN
    • Aragon Network Token
      • About ANT
      • Historical token sale
    • ANTv1
      • Non-standard behaviours and gotchas
      • About the MiniMe token
      • The initial token sale flow
    • ANTv2
      • Upgrade portal
        • Troubleshooting
      • Contract interaction
      • Migrating on-chain liquidity
    • Developers
      • Quick start
      • Integrating ANT
      • Historical deployments
      • Security policy
  • ‼️FAQ
    • Products
      • Aragon Client
        • Where is my DAO?
        • DAO creation taking a long time to confirm
        • DAO is taking a long time to load
        • Failed DAO creation transaction
        • Why do I see a Blue Screen?
        • An unexpected error has occurred
        • App does not appear in Firefox
        • Receiving funds directly to the Agent or Vault address
        • How to Recover Funds accidentally sent to an Aragon App address
        • Depositing EURS in the Finance app
        • Which templates are available on the Ethereum Network?
        • Which templates are available on the Polygon Network?
        • Which templates are available on the Harmony Network?
        • Which templates are available on the Metis Andromeda Network?
        • How to delete a DAO
      • Aragon Govern
        • Which was the wallet address used to create the Aragon Govern DAO?
        • Where are my DAO tokens?
        • How to delete a DAO
        • How can I transfer funds to the Aragon Govern DAO?
      • Aragon Vocdoni
        • Is Vocdoni easy to use?
        • Is Vocdoni anonymous?
        • Is Vocdoni free?
        • Is my data safe with Vocdoni?
        • As an Organization, what can I do with Vocdoni?
      • Aragon Court
        • What is the current duration of the different stages of a dispute?
        • Dispute - Which fees need to be paid to create a dispute?
        • Dispute - Do I need to put collateral to create a dispute?
        • Appeals - How much money is needed to appeal a dispute? And to confirm the appeal? What is it for?
        • Appeals - If I have tokens staked or activated, can I lose them if I appeal a dispute?
        • Appeals - What happens to the collateral put up
        • Voting - Is a majority needed to win a vote?
        • Voting - What happens if there is a tie?
        • Voting - What does "Refuse to vote" mean? What happens if it's the most voted option?
        • Voting - Another guardian tried to collude. Can I punish this guardian?
        • Voting - What's the penalty for leaked votes?
        • Governance - Which parameters of Court can be changed? How?
        • Governance - Do parameter changes affect ongoing disputes?
        • Technical - Where is the Court "hosted"?
        • Technical - Where can I find the source code and technical documentation for Aragon Court?
        • ANJ conversion - What date will the lock-up period end?
        • ANJ conversion - If I have not staked my $ANJ, do I still get the lockup period price?
        • ANJ conversion - Will I get the 0.044 conversion if I convert after September 5th 2021?
        • ANJ conversion - How much will it cost to be a Guardian in Aragon Court with $ANT?
        • I can't see my tokens in the Dashboard
        • I activated my tokens but I can't see my probability of being drafted
    • Miscellaneous
      • Metamask wallet transaction alert
      • Is Aragon open source?
      • Where can I browse through the DAOs created on Aragon?
      • How to migrate from "old" DAI to "new" DAI
      • Security notice for organizations created before Aragon 0.8
      • General troubleshooting tips
    • ANT Token
      • What can I do with ANT?
      • Who holds ANT?
      • Who are the biggest ANT holders?
      • Long-term holding ANT - What benefits?
      • Can I delegate my network votes to somebody else?
      • Can I do flash loans with ANT?
      • Is there an ANT options market?
      • Are you planning to launch new network tokens?
      • My wallet isn't available on the Upgrade Portal
      • How can connect my Ledger to the Upgrade Portal?
      • I accidentally sent my "old" ANT to an exchange
      • ANJ conversion - What is the minimum number of $ANJ I need to participate in the 0.044 conversion?
      • ANJ conversion - What is the conversion rate ANJ to ANT v2?
Powered by GitBook
On this page
  • Usage
  • Notes
  • Palette groups
  • Base
  • Surface
  • Info
  • Feedback
  • Warning
  • Help
  • Positive
  • Negative
  • Tag
  • Badge
  • Floating
  • Controls
  • Colors

Was this helpful?

  1. Developers
  2. General Tools
  3. aragonUI
  4. BASE

Colors

Colors in aragonUI are managed by its theming system. An aragonUI theme is a set of colors assigned to a predefined palette. All aragonUI components use colors from this palette, making it possible to swap the theme for another one dynamically. aragonUI includes two themes by default, light and dark, but any other can be provided.

Usage

The theme palette can be obtained in a component by using the useTheme() hook:

function App() {
  const theme = useTheme()
  return (
    <Main>
      <p
        css={`
          color: ${theme.negative};
        `}
      >
        Negative content
      </p>
    </Main>
  )
}

Notes

Colors meant to be applied on text are indicated using the Content suffix. The reason why it is not using Text is because these also apply to other outline content like icons.

When a color like foo is followed by a color named fooContent, it generally means that foo should be used as a background color for fooContent.

Gradients are defined using the Start and End suffixes.

Colors don’t include opacity. When using aragonUI’s useTheme(), the .alpha(0.5) method can be used on any color. It will apply the desired opacity and return the result as a CSS color using the rgba() syntax.

Palette groups

This section describes the palette colors and how they should be used. The groups are created based on how they relate to each other.

Base

The colors defined in this group are either used by default (border, content, overlay), or on the base layer (background).

background

The base layer on which apps are being rendered.

border

The border color used everywhere by default, except in specific cases like controlBorder.

overlay

The color used for overlays. Some components using an overlay color are SidePanel or Modal.

content

The base color for text and outline content. To be used over background.

contentSecondary

Secondary color for text and outline content. To be used over background.

link

Used as a base color for links.

focus

The color for focus rings.

accent

The accent color can be used to put an emphasis on a component or a certain part of a component, without any specific semantic.

accentContent

To be used for text and outline content over accent.

accentStart** / _accentEnd**_

This is the gradient equivalent of accent.

Surface

The main surface as defined by aragonDS and its different states. This group of colors is used by components providing surfaces: Box, DataView, the default Button, the Slider handle, and many more.

surface

The background color used for surfaces.

surfaceContent

The primary color used for text and outline content over surface.

surfaceContentSecondary

The secondary color used for text and outline content over surface.

surfaceIcon

This color is generally used for icons over surface. Note: in some cases, icons over surface are also using surfaceContent or surfaceContentSecondary.

surfaceUnder

This is used as a background base for surfaces that appear to be at a lower level than the parent surface itself. For instance, the DataView component is using this color for its entry expansion, which opens underneath the primary surface provided by DataView.

surfaceOpened

Communicates that a surface is being “opened”, generally revealing a surface using surfaceUnder underneath. The DataView component is using this color for the side border of its entry expansion.

surfaceSelected

Indicates that a surface, or a part of it, is being selected. This is the color DataView is using to indicate that an entire row is selected.

surfaceHighlight

Indicates that a surface, or a part of it, is being highlighted. This color could be used to reflect a hover or focused state.

surfacePressed

Indicates that a surface, or a part of it, is being pressed − either by a pointer or a touch event.

Info

Used to indicate informative content in general.

info

This info color is generally stronger than infoSurface. It should be used for icons, borders, etc.

infoSurface

The surface info color, generally softer than info. It should be used for background colors.

infoSurfaceContent

To be used for text and outline content over infoSurface.

Feedback

Used to signal feedback, in the broad sense. For instance, this set of colors is used to show the status of a transaction in the signing panel.

feedbackSurface

Use this color as a background color for feedback.

feedbackSurfaceContent

The primary color to be used for text and outline content over feedbackSurface.

feedbackSurfaceContentSecondary

The secondary color to be used for text and outline content over feedbackSurface.

Warning

Used to indicate warnings.

warning

This warning color is generally stronger than warningSurface. It should be used for icons, borders, etc.

warningSurface

The surface warning color, generally softer than warning. It should be used for background colors.

warningSurfaceContent

To be used for text and outline content over warningSurface.

Help

Used for elements related to helping the user.

help

This help color is generally stronger than helpSurface and should be used for icons, borders, etc.

helpContent

To be used for text and outline content over help.

helpSurface

This help color is generally softer than help and should be used for background colors.

helpSurfaceContent

To be used for text and outline content over helpSurface.

Positive

Used to communicate something positive. It can be used for successful operations, but also for other things like voting “Yes”.

positive

Use this color to communicate positive information (e.g. success, an action to vote yes).

positiveContent

To be used for text and outline content over positive.

positiveSurface

A softer positive, to be used when a large amount of information needs to be communicated.

positiveSurfaceContent

To be used for text and outline content over positiveSurface.

Negative

Used to communicate something negative. It can be used for errors, but also for other things like voting “No”.

negative

Use this color to communicate negative information (e.g. error, an action to vote no).

negativeContent

To be used for text and outline content over negative.

negativeSurface

A softer negative, to be used when a large amount of information needs to be communicated. For instance, the Info component uses it as a background color in error mode.

negativeSurfaceContent

To be used for text and outline content over negativeSurfaceContent.

Tag

This set of colors is used by the Tag component and its different modes.

tagIdentifier

Used to identify or label a subject.

tagIdentifierContent

To be used for text and outline content over tagIdentifier.

tagNew

Used to indicate that a subject is new, or updated.

tagNewContent

To be used for text and outline content over tagNew.

tagIndicator

Used for indicators in the general sense.

tagIndicatorContent

To be used for text and outline content over tagIndicator.

tagActivity

Used to represent some activity that happened, like a number of notifications.

tagActivityContent

To be used for text and outline content over tagActivity

Badge

This colors are used for badge-like components: IdentityBadge, AppBadge, etc.

badge

The background color of badge-like components.

badgeContent

To be used for text and outline content over badge.

badgePressed

The pressed state of badge.

Floating

Floating elements, like tooltips.

floating

The background color of a floating element.

floatingContent

To be used for text and outline content over floating.

Controls

Colors related to controls, that could be used in forms or elsewhere.

hint

Used for hints (or placeholders) inside of text input or similar components.

selected

Indicates a selection in the broad sense.

selectedContent

To be used for text and outline content over selected.

selectedDisabled

Indicates a selection in the broad sense, when disabled (non-interactive).

disabled

The background color of disabled components like Button.

disabledContent

The text or outline content to be used over disabled.

disabledIcon

This color is generally used for icons over disabled. Note: icons over disabled could also be using disabledContent.

control

Used as a background color for some control components like Checkbox, Radio or Switch.

controlBorder

Used as a border color for some control components like Checkbox, Radio or Switch.

controlBorderPressed

Used as a border color for the pressed state of some control components like Checkbox, Radio or Switch.

controlDisabled

The background color for the disabled state of some control components like Checkbox, Radio or Switch.

controlSurface

This is used as a surface color for elements of control components that appear at an upper level. For instance, the Switch component is using this color for its handle.

controlUnder

This is used as a background base for elements of control components that appear to be at a lower level. For instance, the Switch component is using this color for its inner base.

Colors

These colors can be used when a color is needed for its semantics. An example could be a chart using a red and a blue curve. Even if their theme is different, two users should still be able to refer to these by using the terms “red” or “blue”.

Themes are free to implement their own variation of these colors, but they should respect the naming (e.g. green can vary, but should use a color that is commonly accepted to be “green”).

Available color names:

  • green

  • yellow

  • red

  • blue

  • brown

  • purple

PreviousSpacingNextText styles

Last updated 2 years ago

Was this helpful?

🛠️